次世代 Hugo

使用 Margin Auto 實現 Flexbox 內垂直置中

若要在 Flexbox 內實現 Cross Axis 置中，直覺會使用 align-items: center，事實上也可巧妙地使用 margin: auto 實現。

2021-02-13

もっと読む

Flexbox 初體驗

Flexbox 為 CSS 3 所引進的新 Layout，使得我們不必再使用 inline-block 或 float 排版，而改用更直覺的 Flexbox。

2021-02-12

もっと読む

使用 :link、:visited、:hover、:active 設定 Anchor 視覺

<a> 為最常用的 HTML 之一，可透過 :link、:visited、:hover 與: :active 設定在不同狀態下 Anchor 視覺效果。

2021-02-12

もっと読む

CSS Variable 使用 String

::before 與 ::after 常搭配 String，事實上 String 也可用在 CSS Variable。

2021-02-06

もっと読む

CSS Variable 使用 Shorthand

CSS Variable 除了能用在 Numeric 外，也可使用於 Shorthand。

2021-02-06

もっと読む

使用 CSS Variable 管理重複值

若多個 CSS Selector 共用相同的設定，可將其設定抽成 CSS Variable 方便日後維護。

2021-02-06

もっと読む

CSS Variable 使用 Number

CSS Variable 若搭配無單位 Number，可使用 calc() 計算使其變成有單位。

2021-02-06

もっと読む

CSS Variable 使用 List

CSS Variable 除了能用在 Numeric 外，也可使用於 List。

2021-02-06

もっと読む

CSS Variable 使用 Keyword

CSS Variable 常搭配 Number 與 calc()，事實上也可搭配 Keyword。

2021-02-06

もっと読む

CSS Variable 組合 String

在 ECMAScript 我們會以 Template String 或 + 組合 String，在 CSS 若以 Variable 為 String，我們也可加以組合。

2021-02-06

もっと読む