css 選擇器
| 預覽 | 選擇器 | 描述 |
|---|---|---|
 |
a > b 子組合器 | 選擇直接位於 a 元素內部的所有 b 元素。 |
 |
a b 後代組合子 | 選擇 a 元素內任意位置的所有 b 元素。 |
 |
a + b 相鄰兄弟組合子 | 選擇緊鄰 a 元素的所有 b 元素。 |
 |
a ~ b 通用兄弟組合子 | 選擇 a 元素之後任意位置的所有 b 元素。 |
 |
.cl 類選擇器 | 選擇具有 cl 類名稱的所有元素。 |
 |
a.cl 標籤 + 類選擇器 | 選擇所有具有 cl 類名稱的 a 元素。 |
 |
.cl1.cl2多類 選擇器 | 選擇同時具有 cl1 和 cl2 類名的所有元素。 |
 |
a[x=y] 屬性選擇器 | 選擇所有 x 屬性設置爲 y 的元素。 |
 |
#id1 ID 選擇器 | 選擇 ID 名稱爲 id1 的元素。 |
 |
***** 通用選擇器 | 選擇所有元素。 |
css 盒子模型
| 預覽 | 財產 | 描述 |
|---|---|---|
 |
box-sizing: border-box |
width和的height大小爲content+ padding+border |
 |
box-sizing: content-box |
width和height的大小正好content |
flex
grid
align-content沿水平軸分佈內容。
 |
align-content: start |
 |
align-content: space-around |
|---|---|---|---|
 |
align-content: center |
 |
align-content: space-between |
 |
align-content: end |
 |
align-content: stretch |
justify-content垂直軸
 |
justify-content: start |
 |
justify-content: space-around |
|---|---|---|---|
 |
justify-content: center |
 |
justify-content: space-between |
 |
justify-content: end |
 |
justify-content: stretch |
align-items網格區域內沿水平軸分佈內容
 |
align-items: start |
 |
align-items: center |
|---|---|---|---|
 |
align-items: end |
 |
align-items: stretch |
justify-items在其網格區域內沿垂直軸分佈內容。
 |
justify-items: start |
 |
justify-items: center |
|---|---|---|---|
 |
justify-items: end |
 |
justify-items: stretch |
|---|---|---|---|
