[CSS] box model/ display/ position

說明 CSS 中盒模型、display、position 的概念與應用。

什麼是盒模型（box model）？

HTML 的元素都可以視為一個盒子。
盒子從內到外包含元素本身的寬高、padding、border、margin。
預設的 box-sizing 是 content-box，content 指的是圖片中藍色的區塊，所以padding、border、margin 都是會往外長的部分。

如果想要在寬=900（粉紅色區塊）中平均放三個 item（灰色區塊），會設定三個 item 的寬為 300，但此時再去調整 padding 或是 border 會發現版面跑版了：

一點美感都沒有的配色

這是因為設定的 300 是 content 的寬，所以調動了 content 以外的部分，就會讓整體的尺寸塞不下寬度 900 的範圍內了。
要解決這個問題，可以將 item 的 box-sizing 改為 border-box，意思是指將以 content 與 padding 為界的範圍改到以 border 與 margin 為界。如此就算改動 padding 或是 border 都是往內擠，不會影響到原設定好的寬度：

延續沒有美感的配色

display: inline, block 跟 inline-block 的差別

inline：

1. 尺寸就是內容，無法靠 height 與 width 設定長寬。
2. 設定上下的 padding 時，看似面積有變大，但實際的高度依舊是一行的高度。
   如下圖所示，灰色區塊是 display: inline 並且設定 padding 和粉紅色 display: block 排起來的樣子，可以看到灰色和粉紅色的區塊疊在一起，表示灰色 inline 區塊的高度並沒有隨 padding 的值而增高。而要以 margin 調整上下時也無效。
   
3. inline 可以排在同一行。
   
4. 使用時機：想讓元素在同一行排列且沒有要設定寬高時使用。 <a>、<span> 等原來設定就是 inline。

block：

1. 尺寸可以以 height 和 width 來設定。
2. 承第 1 點，所以設定 padding 時是有作用的。
   灰色區域是有設定寬高及 padding 的 block，可以看到與粉紅色的區塊並沒有疊在一起，設定的高與 padding 都有算在高度裡。
   
3. block 會自己占據一整排。
   
4. 使用時機：當元素要占據一整行時。<div>、<h1>、<p> 的預設值為 block。

inline-block：

1. inline-block 可以說是 inline 和 block 的小孩，結合了 inline 可以排在同一行及 block 可以設定高寬的特性。如下圖是將灰色及粉紅色都調整為 display: inline-block 後的排版：
   
2. 灰色與粉紅色區塊中的空白，是由於在寫 html 時 div 和 div 之間有字元空格所產生的。
   • 調整父層的 font-size: 0
   • 用 comment < > 夾在中間
3. 使用時機：希望可以像 inline 一樣可以併排，但又想要可以像 block 一樣可以條寬高時使用。

position: static, relative, absolute 跟 fixed

static：

1. position 的預設值。
2. 在沒有想要元素特別改動位置的時候使用。

relative：

1. 以元素在畫面原本的位置為基準點所做的移動，並且會保留原位置，維持文件的排版流。
2. 可以運用在元素互換位置，或是廣告視窗內的文字與圖片排版。

absolute：

1. 如果上一層的 position 是 static，會再繼續往上層找，直到找到 postion 非 static 的一層，並以此層為基準點移動元素。如果都沒找到，則會以 body 作為父層。與 relative 不同，並不會保留元素原本的位置，之後的元素會往前遞補，就像是元素從平面被抽離到另一個平面。可設定 z-index 的值調整元素的前後關係。
2. 可運用於促銷的產品卡右上角會出現的 sale 圖案，或是廣告右上角的叉叉圖示。

fixed：

1. 以視窗為基準點調整位置，所以當畫面捲動時，也不會改變其位置，會一直顯示在畫面中。
2. 可以用在 navbar 、返回最上面的圖示，或是總是會跳在畫面正中央的煩人廣告上。

註：預設的原點是元素的的左上角。可搭配 transform 的 translate 來調整原點，達到版面置中的效果。