CSS 基礎 Part3：盒模型（box model）

什麼是 box model？

每一個 HTML 元素都可以看成是一個盒子，這個盒子會由四個部分所組成，從內到外分別是 content, padding, border, margin。打開開發者工具，就可以看到這個 box model（如下圖所示）

關於 box model，要注意的是 box-sizing 這個屬性
box-sizing 這個屬性可以決定「要用什麼樣的模式來顯示 box model」

• box-sizing 的預設值是 content-box，意思就是：假設我設定了一個 width, height 各是 100px 的元素，這 100px 只會是「content」的寬高而已，因此如果我想要計算整個元素的寬高，就還要再加上 border 和 padding 的部分。例如我加上 20px 的 padding，那麼元素的寬就會是 100px + 20px(left padding) + 20px(right padding) = 140px

因為 content-box 對開發者來說，計算寬高還要加加減減很麻煩，因此通常都會把 box-sizing 設定為 border-box

• 如果把 box-sizing 設定為 border-box，意思就是：假設我設定了一個 width, height 各是 100px 的元素，這 100px 就已經是包含 content + border + padding 的部分了。例如我加上 5px 的 border 後，content 就會往內縮，元素的寬高還是一樣會是 100px
  • border-box 對開發者來說很方便，因為不需要再去加加減減的計算寬高，因此通常都會設定成 box-sizing: border-box

參考資料 話說 Box model 是什麼呢？

display 的三種形式：inline、block 與 inline-block

display: inline

• span, a 這些元素，預設就是 display: inline
• 調整 width, height 沒有作用（元素的 width, height 都是根據內容來決定的）
• 調整上下的 margin 沒有作用（只能夠調整左右的 margin）
• 調整左右的 padding 會把元素左右撐開，也會影響到元素的左右位置
• 調整上下的 padding 不會改變元素的位置，但還是會以元素 content 為中心點把元素的上下給撐開
• 使用時機：同一列可以並排多個 inline 元素

display: block

• div, h1, p 這些元素，預設就是 display: block
• 調什麼都可以（可以任意調整元素的 width, height, padding, margin）
• 使用時機：當我想要自己就佔滿一整列（寬度會撐滿整個父元素），不跟其他元素並排

display: inline-block

inline-block 集合了 inline 和 block 的優點

• button, input, select 這些元素，預設就是 display: inline-block
• 跟 inline 一樣可以並排
• 跟 block 一樣可以調整 width, height, margin, padding
• 使用時機：想要並排多個元素，又想要調整元素的 width, height, margin, padding

CSS 基礎 Part4：定位（position）

position: static

• 每個元素，預設就會是 position: static
• static 會順著排版流
• 會用到的場合：沒有需要特殊的排版時，就可以順著排版流去排

position: relative

• position: relative 就是「相對定位」
• 用 top, right, bottom, left 來調整元素「相對於自己在 position: static 時」的位置
• relative 會順著排版流
• 只會改變自己的位置，不會影響到其他元素的位置
• 會用到的場合：要做出彈跳視窗右上角的叉叉按鈕，彈跳視窗就要設定為 position: relative，這樣就可以做為叉叉按鈕的參考點

position: fixed

• position: fixed 會相對於 viewport （瀏覽器窗口）做定位
• 會脫離正常的排版流
• 會用到的場合：網頁右下角的 go-to-top 按鈕，就可以用 position: fixed 來固定在右下角的位置

position: absolute

• position: absolute 會相對於參考點去做定位，也就是「絕對定位」
• 如果都沒有找到參考點，那就會以 body 做為參考點去做定位
• 會脫離正常的排版流
• 會用到的場合：要做出彈跳視窗右上角的叉叉按鈕，彈跳視窗就要設定為 position: relative，叉叉按鈕設定為 position: absolute，叉叉就可以相對於彈跳視窗去做定位

position: absolute 要怎麼找到參考點？

往上找，找到的第一個「position 不是 static 的元素」就是參考點

z-index

• z-index 可以決定圖層的順序

sticky

.box 還沒到達 top: 30px 這個位置之前，.box 都會按照正常的排版流（static）

一旦到達了 top: 30px 這個位置，就會被黏住（變成 fixed）

.box:nth-child(2) {
  background-color: pink;
  position: sticky;
  top: 30px;
  z-index: 2;
}