如何水平均分 Column ?
在 Main Axis 水平均分 N 個 Column 為實務上常見需求,在 CSS 有多種方式實現。
在 Main Axis 水平均分 N 個 Column 為實務上常見需求,在 CSS 有多種方式實現。
Grid 為 CSS 最新 Layout 方式,其思維有別於 Flexbox,可完全在父層設定。
理論上每個 Element 都可以設定獨立 Class 加以選取,若想在不增加 Class 前提下選取下一個 Element,可使用 + 加以選取。
若遇到 CSS 相同部分,我們會抽出相同 Class 共用,對於不同部分,可使用 Compound Selector 加以選擇。
一般較少討論 Attribute Selector 的 Specificity,當與 Class Selector 有衝突時,到底會使用 Attribute Selector 還是 Class Selector 呢 ?
最暴力的 Selector,一次將選取全部 Element,但 Side Effect 也最大,須小心使用。
Class Selector 為 CSS 最常用的 Selector,實務上常看到幾種寫法:.box1, box2、.box1 .box2 與 .box1.box2,因為很像很容易誤會其意義。
僅管是相同 Tag,只要其 Attribute 的 Value 不一樣,就能使用 Attribute Selector 選擇該 Tag。
CSS 也可以直接以 ID 描述 Selector,這種方式速度最快,但因為 ID 不能重複,只能套用在單一 Tag。
Type Selector 會一次影響所有 HTML Tag,直接以 Tag 名稱描述即可,不用任何符號。