CSS

选择器的优先级

特异度：选择器特殊程度

#.E   分别是id、（伪）类、标签

通过特异度实现复用

继承，某些属性会自动继承父元素的计算值，除非显示指定值，例如文字相关的。盒模型相关的一般不继承，可以将value设置为inherit实现显示继承

CSS 中，每个属性都有一个初始值

background-color 的初始值为 transparent（透明）

margin-left 的初始值为 0

可以使用 initial 关键字显式重置为初始值

background-color: initial

计算规则

选择器匹配、属性有效、符合当前media、来源、!important、选择器特异性、书写顺序得到最终的层叠值，转换得到计算值（只通过css能得到的值，继承值的终点），百分比等计算值转换为使用值（根据实际情况得到的值，比如浏览器分辨率），小数像素等使用值转换为实际值

布局

常规流

行级

和其他行级盒子放在一行或拆成多行、盒模型中的width、height不适用，由内容决定

生成行级盒子display:inline

注：inline-block(行级、可设置宽高、不可拆分为多行)、none（排版被忽略）、flex（一种新的排版上下文，可以控制子级盒子的摆放的流向(一-个)、摆放顺序、盒子宽度和高度、水平和垂直方向的对齐、是否允许折行）

行级排版上下文

Inline Formatting Context (IFC)·只包含行级盒子的容器会创建一个IFC

IFC内的排版规则

盒子在一行内

水平摆放一行放不下时，换行显示

text-align 决定一行内盒子的水平对齐

vertical-align 决定一个盒子在行内的垂直对齐避开浮动(float)元素

overflow-wrap

块级

不和其他盒子并列摆放、适用所有的盒模型属性

生成块级盒子display:block

表格布局、FlexBox、Grid布局

块级排版上下文

Block Formatting Context (BFC)

某些容器会创建一个BFC

根元素

浮动、绝对定位、inline-block

Flex子项和Grid子项

overflow 值不是 visible 的块盒

display: flow-root;

排版规则

盒子从上到下摆放

垂直 margin 合并

BFC 内盒子的 margin 不会与外面的合并

BFC不会和浮动元素重叠

////////////////

关于flex：

可以设置子项的弹性: 当容器有剩余空间时，会伸展;容器空间不够时，会收缩。

flex-grow 有剩余空间时的伸展能力

flex-shrink 容器空间不足时收缩的能力

flex-basis 没有伸展或收缩时的基础长度

/////////////

关于grid

display: grid 使元素生成一个块级的 Grid 容器

使用grid-template 相关属性将容器划分为网格

设置每一个子项占哪些行/列

/////////////

浮动

float:left/right

绝对定位

position:static\relative\absolute\fixed\sticky

position: relative

在常规流里面布局

相对于自己本应该在的位置进行偏移

使用 top、left、bottom、right 设置偏移长度

流内其它元素当它没有偏移一样布局

position: absolute

脱离常规流

相对于最近的非 static 祖先定位

不会对流内元素布局造成影响

position: fixed

脱离常规流

相对于窗口

不会对流内元素布局造成影响

盒模型

height

指定 content box 高度

取值为长度、百分数、auto

auto取值由内容计算得来

百分数相对于容器的 content box 高度

容器有指定的高度时，百分数才生效

margin在垂直方向上的合并

box-sizing: border-box，把padding和border的值都算在content 里，盒子模型会自动根据padding和border的值来调整content的值

overflow控制溢出部分