选择器的优先级
选择器的优先级是由它的特异度决定的，即特殊程度。
选择器优先级 = id选择器个数 × 100+(伪)类选择器个数 × 10+标签选择器个数
选择器的继承
- 自动继承
eg: 大部分字体样式和颜色。 - 显式继承
eg:
* {
box-sizing: inherit;
}
CSS求值过程
CSS布局（Layout）
布局相关技术
- 常规流
- 行级
- 块级
- 表格布局
- Flexbox
- Grid布局
- 浮动
- 绝对定位
盒模型
- width、height、padding、border、margin
- content-box、border-box
边框：实现一个三角形（width height为0，部分边框透明）
margin：
- 居中 (margin: 0 auto)
- margin collapse（垂直方向的折叠）
overflow:超过盒模型设置的高度时的内容展示形式。
块级盒子/块级元素 vs 行级盒子/行级元素
常规流
行级排版上下文
- 盒子在一行内水平摆放
- 一行放不下时，换行显示
- 容器的text-align属性决定一行内盒子的水平对齐
- 容器的vertical-align属性决定一个盒子在行内的垂直对齐
- 避开浮动元素
块级排版上下文（流的容器）
- 盒子从上到下摆放
- 垂直margin合并
- BFC内盒子的margin不会与外面的合并
- BFC不会和浮动元素重叠
Flex Box布局
- 一种新的排版上下文（改变了传统的流向/流的规则）
- 它可以控制子级盒子的：
- 摆放的流向（↑↓←→）
- 摆放顺序
- 盒子的宽高
- 水平和垂直方向的对齐
- 是否允许折行
display:block/inline-block
弹性盒：
Grid布局
flex布局可以看做是一维布局，grid则是二维布局
设置子元素占据的格子：
浮动
一开始来源自传统印刷领域，文字环绕图片的效果。
position
static
relative
absolute
fixed
