这是我参与「第四届青训营 」笔记创作活动的第2天。 今天的主要内容包括: 特异度、继承、布局等。
（一）选择器优先级如何选择？
同一个元素绑定多个样式属性时，哪个样式生效？
选择器特异度来决定！利用特异度可以实现样式覆盖。
（二）继承
某些属性会自动继承其父元素的计算值，除非显示指定一个值。一般来说与文字相关的属性都是可继承的。
（三）布局
- 确定内容大小和位置的算法。
- 依据元素、容器、兄弟节点和内容等信息来计算。
布局相关技术：
- 常规流
- 行级
- 块级
- 表格布局
- Flex Box
- Grid
- 浮动
- 绝对定位
盒模型
布局时，把所有的元素理解成一个个的盒子。
content-box
基本属性：widtth(宽度)、height(高度)、padding(内边距)、margin(外边距)
Hint : 使用
margin:auto可以使元素水平居中。
border-box
常见布局规则——常规流
dispaly属性
- block: 块级盒子
- inline: 行级盒子
- inline-block: 本身是行级，可以放在行盒中；可以设置宽高，作为一个整体不会被拆散成多行
- none: 排版时完全被忽略
行级排版上下文（IFC）
- 只包含行级盒子 的容器会创建一个IFC。
- IFC内的排版规则：
- 盒子在一行内水平摆放
- 一行放不下换行显示
text-align决定一行内盒子的水平对齐vertical-align决定一个盒子在行内的垂直对齐- 避开浮动元素
*
块级排版上下文（BFC）
- 某些容器会创建一个BFC
- 根元素
- 浮动、绝对浮动、
inline-block - Flex子项和Grid子项
overflow值不是visible的盒块displace:flow-root
- BFC内的排版规则：
- 盒子从上到下摆放
- 垂直
margin合并 - BFC内盒子的
margin不会与外面的合并 - BFC不会和浮动元素重叠
Flex排版上下文
- 摆放顺序
- 摆放方向
- 盒子宽度和高度
- 水平和垂直方向的对齐
- 是否允许折行
Flexibility
- 可以设置子项弹性：当容器有剩余空间时，会伸展；容器空间不够时，会收缩
- flex-grow 有剩余空间时的伸展能力
- flex-shrink 容器空间不足时收缩的能力
- flex-basis 没有伸展或收缩时的基础长度
Grid排版上下文
- display: grid 使元素生成一个块级的 Grid 容器
- 使用 grid-template 相关属性将容器划分为网格
- 设置每一个子项所占行/列
浮动
实现文字环绕效果。
绝对定位
position属性
static：默认值，非定位元素。relative：相对偏移，不脱离文档流。absolute：绝对定位，相对非static祖先元素定位，脱离常规流。fixed：相对于视口绝对定位，脱离常规流。
