继承
某些属性会自动继承其父元素的计算值，除非显示指定一个值
CSS求值过程
布局
- 确定内容的大小和位置的算法
- 依据元素、容器、兄弟节点和内容等信息来计算
布局相关技术
-
常规流
- 行级
- 块级
- 表格布局
- FlexBox
- Grid布局
-
浮动
-
绝对定位
width
- 指定 content box 宽度
- 取值为长度、百分数、auto
- auto由浏览器根据其他属性确定
- 百分数相对于容器的 content box 宽度
height
- 指定 content box 高度
- 取值为长度、百分数、auto
- auto取值由内容计算得来
- 百分数相对于容器的 content box 高度
- 容器有指定的高度时，百分数才生效
padding
- 指定元素四个方向的内边距
- 百分数相对于容器宽度
border
- 指定容器边框样式、粗细和颜色
- 三种属性
- border-width
- bnorder-style
- border-color
- 四个方向
- border-top
- border-right
- border-bottom
- border-left
margin
- 指定元素四个方向的外边距
- 取值可以是长度、百分数、auto
- 百分数相对于容器宽度
块级vs行级
块级：不和其他盒子并列摆放，如body、article、div、main、section、h1-6、p、ul、li等
行级：和其他行级盒子一起放在一行或拆开成多行，如span、em、strong、cite、code等
常规流 Nornmal Flow
- 根元素、浮动和绝对定位的元素会脱离常规流
- 其他元素都在常规流之内（in-flow）
- 常规流中的盒子，在某种排版上下文中参与布局
行级排版上下文
- Inline Formatting Context（IFC）
- 只包含行级盒子的容器会创建一个IFC
- IFC内的排版规则
- 盒子在一行内水平摆放
- 一行放不下时，换行显示
- text-align 决定一行内盒子的水平对齐
- vertical-align 决定一个盒子在行内的垂直对齐
- 避开浮动元素
块级排版上下文
- Block Formatting Context（BFC）
- 某些容器会创建一个BFC
- 根元素
- 浮动、绝对定位、inline-block
- Flex子项和Grid子项
- overflow 值不是visible的块盒
- display：flow-root‘
BFC内的排版规则
- 盒子从上到下摆放
- 垂直margin合并
- BFC内盒子的margin不会和外面的合并
- BFC不会和浮动元素重叠
Flex Box
- 一种新的排版上下文
- 它可以控制子级盒子的；
- 摆放的流向（→ ← ↑ ↓）
- 摆放顺序
- 盒子宽度和高度
- 水平和垂直方向的对齐
- 是否允许折行
flex-direction
justify-content
align-items
align-self
order
Flexbility
- 可以设置子项的弹性；当容器有剩余空间时，会伸展；容器空间不够时，会收缩。
- flex-grow 有剩余空间时的伸展能力
- flex-shrink 容器空间不足时收缩的能力
- flex-basis 没有伸展或收缩时的基础长度
Grid
- display：grid 使元素生成一个块级的 Grid 容器
- 使用 grid-template 相关属性将容器划分为网格
- 设置每一个子项占哪些行/列
float
position 属性
- static 默认值、非定位元素
- relative 相对自身原本位置偏移，不脱离文档流
- absolute 绝对定位、相对非 static 祖先元素定位
- fixed 相对于视口绝对定位
positon:relative
- 在常规流里面布局
- 相对于自己本应该在的位置进行偏移
- 使用top、left、bottom、right 设置偏移长度
- 流内其他元素当它没有偏移一样布局
position-absolute
- 脱离常规流
- 相对于最近的非 static 祖先定位
- 不会对流内元素布局造成影响
