タグ: CSS | 點燈坊

CSS 之 Box Model

CSS 有獨特的 Box Model，除了包含本身的 Content Box 外，尚包含 Border Box、Padding Box 與 Margin Box，其中 DevTools 的寬度計算只包含 Width、Border 與 Padding，並不包含 Margin。

2020-12-15

當圖片放在 Block 中，會發現圖片似乎與 Item 底部有些空隙，這是因為 <img> 本身 vertical-align 預設值為 baseline 所造成。

2020-12-14

<li> 在文字前面預設可顯示圓形或方形，使用 before 可改變 <li> 所顯示圖形。

2020-12-09

當 <a> 並排時常發現之間會有一點空間，此乃因 <a> 為 Inline Element，會將其後的多個 space 視為一個 space 保留顯示。

2020-12-07

linear-gradient() 雖然是用來建立漸層效果，但也可技巧性建立純色的 Hard-stop。

2020-10-13

CSS 在實務上常會遇到重複 Property，為了方便日後維護，應盡量避免重複，本文介紹兩種重構方式，各有其優缺點。

2020-07-16

常聽前輩說盡量少用 ID Selector，這會導致日後維護困難，本文以 Functional CSS 角度，解釋為什麼不該使用 ID Selector。

2020-07-11

row-direction 主要定義 Main Axis 方向，需搭配 justify-content 設定 alignment；若要針對 Cross Axis，則要使用 align-items。

2019-07-08

WebStorm 在 2019.1 開始支援 CSS 的 Extract Variable，可將重複部分直接抽成 CSS Variable，方便日後維護。

2019-05-27

Typora 是使用 Electorn 技術的 macOS App，也因此可自行使用 CSS 開發 Theme，或者利用既有的 Theme 加以微調 CSS，但該如何觀察 CSS 呢 ?

2019-05-23