[轉職軟體工程師、自學程式語言] 什麼是 CSS ? 第三章 : Layout
部落格轉移，給讀者更好的閱讀體驗，本文網址 : https://janstockcoin.com/blog/
我們今天講的主題是， 什麼是 CSS，大綱如下
第一章 : The Basics
第二章 : Selectors
第三章 : Layout
第四章 : Stacking Order
➤ Floats
部落格轉移，給讀者更好的閱讀體驗，本文網址 : https://janstockcoin.com/blog/
第三章 : Layout
➤ Box model
content 內容，例如 : 文字
padding 外框與內容的空間，可以調整他們的間距
border 外框
margin 外框與其他element的空間，可以調整他們的間距
width 內容的寬度
height 內容的高度
inline box 給他寬度沒用，不過像是<input>和<img>是可以的
有時候在使用圖片時，<img> 他是 inline，他會跟文字秀在同一行，會跟 border 會有個間距，因為那個是留給字母 ex : "g" 這種有需要佔到下面的使用到的
那這時候你可以把 <img> 改成 block
部落格轉移，給讀者更好的閱讀體驗，本文網址 : https://janstockcoin.com/blog/
➤ Hiding Elements
visibility : hidden; 會把圖片藏起來，但還保留它的空間
display : none; 會把圖片藏起來，不保留它的空間
部落格轉移，給讀者更好的閱讀體驗，本文網址 : https://janstockcoin.com/blog/
➤ Centering Text/Elements
<img> 它設為一個 block 所以它佔滿了一行，因此就算 <p> 使用 text-align : center，那還是無法對 <img> 做置中的
只要對它做，margin : 0 auto; 它對左右是給自動的 auto
部落格轉移，給讀者更好的閱讀體驗，本文網址 : https://janstockcoin.com/blog/
➤ Margin Collapsing
它會自動把兩個 margin 取大的
部落格轉移，給讀者更好的閱讀體驗，本文網址 : https://janstockcoin.com/blog/
em 和 rem
em 是相對於你現在繼承的幾倍
rem 是相對於html所設定的幾倍
部落格轉移，給讀者更好的閱讀體驗，本文網址 : https://janstockcoin.com/blog/
加了 box-sizing : border-box; 它會直接包含了 border 和 padding，這樣就可以真正達到我們要的佔50%
部落格轉移，給讀者更好的閱讀體驗，本文網址 : https://janstockcoin.com/blog/
➤ Positioning
static 是 browser 依照 normal flow 幫你擺的位置，然後你像要稍微調整移動，可以使用 relative 來去做 position 的設定，(所以它是相對於原本物件的位置來做調整)
absolute 它是相對於，上面有設定到的位置來做設定的
所以它往上找，有設定position的是在html的地方，所以它是相對於html的位置來做調整的
如果再 container 的地方加上了 position 那它網上找會先找的這個地方，因此它是相對於 container 的 position 來做調整的，也就是下圖藍色的區塊來做 position 調整
fixed 就是永遠跟著 browser window 一起移動的，你滾輪在怎麼滑動，它的位置永遠都在是視窗的一個位置上
部落格轉移，給讀者更好的閱讀體驗，本文網址 : https://janstockcoin.com/blog/
➤ Floats
float 它可以達成你想要擺的任何形式，例如說你的文字框要橫擺，那就是加上 float : left;
至於最後還要做一個關閉的動作，不然接下來的 element 也會受到影響，因此我們需要加上 clear : both; 那它後面哦element就不會受到影響
部落格轉移，給讀者更好的閱讀體驗，本文網址 : https://janstockcoin.com/blog/
➤ Demo: Image Gallery
在做照片的排版也是跟上述所提到的方法去使用
部落格轉移，給讀者更好的閱讀體驗，本文網址 : https://janstockcoin.com/blog/
第一章 : The Basics
第二章 : Selectors
第三章 : Layout
第四章 : Stacking Order
部落格轉移，給讀者更好的閱讀體驗，本文網址 : https://janstockcoin.com/blog/
痞客邦 : https://warlimit.pixnet.net/blog?utm_source=PIXNET&utm_medium=navbar&utm_term=my_blog
隨意窩 : https://blog.xuite.net/warlimit/blog
Blogspot : https://warlimit.blogspot.com/
如果您喜歡我的文章，請幫我在下方拍手區按圓圈圈裡的拍手圖案5次!
我將得到 Likecoin 的回饋:)
回饋由 Likecoin 基金會出資，您只要註冊/登入帳號(fb、google帳號都可以註冊，不超過1分鐘)，按五次左鍵，可以贊助我的文章且完全不會花到錢！若願意成為讚賞公民那是十分感激。
支持創作，正向交流:)
留言
張貼留言