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 |
|---|---|---|---|
