看起來意思都是背景的 background / background-image 差別
background:設置背景屬性。
background-image:設定背景圖像。
background 是多種背景屬性的縮寫，也就是說如果不設定其中的一項屬性，也不會出現問題。而 background-image 是 background 其中的一項單個屬性，意思是設定圖片，並不能去使用像是 background-repeat no repeat 的值。
background 概括的屬性如下：
- background-color
- background-position
- background-size
- background-repeat
- background-origin
- background-clip
- background-attachment
- background-image
要怎麼選才是我要的? - CSS 多重選擇器
在同一個 HTML 標籤間中，包含兩個 class 名稱，有無空格和分號隔開的差異。
HTML
<div class="one two"></div>
CSS
| CSS | class 差別 | 說明 |
|---|---|---|
| .one .two{} | 中間空格 | 須要是在 one 裡面的 two，才會被選擇到。 |
| .one.two{} | 沒有空格 | 同時具有 one 和 two 的 class 時，才能被 CSS 所選擇到到。 |
| .one, .two{} | 逗號 | class 中有 one 或 two，都會被編輯器所選擇到。 |
資料參考: [技術分享] CSS中的多重選擇器（Multiple Selectors）包含空白或逗號
CSS各種對齊
- line-height：
適用於單行文字置中對齊，透過單行行高的設定，讓一行字所需要佔據的空間分配到文字的上下方。 - Absolute/ margin 負值：
利用 top, left 50%，將網頁的物件定位在空間中的頂端與左側的50%位置，但由於是以物件左上角做為定位起始點，最後再使用margin-top：-50%，設定成高度的一半。 - Absolute / margin auto：
當物件設定 absolute 後，預設是抓不到整體可運用範圍的，搭配 left/right/top/bottom 這類屬性。使用top/bottom：0的用意在於，讓瀏覽器去計算空間的頂部和底部空間，這時候使用margin:auto 就會生效。 缺點是定位物件必須有固定的寬高（％數也可）才能正常置中。 - absolute / translate：
物件不需固定寬高，與使用margin 負值同概念。transform: translate(-50%, -50%) 讓物件的X軸移動-50%，50%是以物件本身的寬度作為100%來做計算，所以物件寬度是多少，都會自動跑負一半的位置。 - flex/align-items：
設定父層 display: flex ，設定次軸(cross axis)置中屬性 align-items: center，不需設定高度即可置中。
