タグ : CSS
如何使用 Class Composition 組合 CSS ?
CSS 允許我們將重複 Property 抽出成獨立 Class，然後 HTML Element 再以 Class Composition 完成我們要的視覺效果。
為什麼只有 Block 能使用 Margin Auto 水平置中 ?
margin: auto 為最簡單的水平置中，但卻只能用於有指定寬度的 Block，為什麼不能使用在 Inline 與 Inline-block 呢 ?
如何使 UL + LI 水平顯示 ?
UL 與 LI 預設會垂直顯示，但實務上卻常常使用 UL 與 LI 製作水平 Menu，可使用 Flexbox 或 display: inline 使 UL 與 LI 水平顯示。
CSS 之 Box Sizing
Box Model 預設將 width 與 height 設定在 Content Box，但你可以透過 box-sizing 將 width 與 height 設定在 Border Box。
CSS 之 Box Model
CSS 有獨特的 Box Model，除了包含本身的 Content Box 外，尚包含 Border Box、Padding Box 與 Margin Box，其中 DevTools 的寬度計算只包含 Width、Border 與 Padding，並不包含 Margin。
如何解決圖片所造成的底部空隙 ?
當圖片放在 Block 中，會發現圖片似乎與 Item 底部有些空隙，這是因為 <img> 本身 vertical-align 預設值為 baseline 所造成。
處理 Anchor 間 Space
當 <a> 並排時常發現之間會有一點空間，此乃因 <a> 為 Inline Element，會將其後的多個 space 視為一個 space 保留顯示。