水平垂直居中
1. 单行的文本、inline或inline-block元素
水平居中：父级元素必须是块级元素，且在父级元素内添加text-align: center
垂直居中： (1) 设置height和line-height一致 (2) 设置padding-top和padding-bottom一致
2. 固定宽高的块级盒子
(1) 子绝父相+子元素left和top50%+子元素负margin
(2) 子绝父相+子元素left和top: calc(50% - 1/2width/height)
(3) 子绝父相+margin:0 auto
3. 不固定宽高的块级盒子
(1) 子绝父相+子元素left和top50%+transform: translate(-50%, -50%)
(2) flex 父元素display: flex; justify-content: center; align-items: center
(3) grid 父元素display: flex;子元素 justify-self: center; align-self: center
常用布局
1. 两栏布局（aside定宽，main自适应）
(1) aside添加float和width，main添加overflow: hidden参与BFC
(2) aside添加float和width，main添加margin-left
(3) 父元素display: flex，aside添加width，main添加flex: 1
(4) 父元素display: grid; grid-template-columns: 200px auto
2. 三栏布局（aside(left, right)定宽，main自适应）
(1) 父元素display: flex，aside添加width，main添加flex: 1
(2) 父元素display: grid; grid-template-columns: 200px auto 200px
3. 三行布局（头尾定高主栏自适应）
(1) 子绝父相+header/footer各自top/bottom: 0，main设padding或margin
(2) 父元素display: flex; flex-direction: column; header, footer设height，main添加flex: 1
(3) 父元素display: grid; grid-template-rows: 50px 1fr 50px
盒子模型
盒子尺寸 = content + border + padding
标准盒子模型：设置的width和height是content的宽高
IE盒子模型：设置的width和height是整体盒子的宽高
盒子类型
盒子类型由display的值确定，html元素有默认的display属性值，但原理而言，display的属性值实际上是设置outer display type和inner display type
【下面这段没看任何文档，是我自己脑补方便自己理解的，应该会有不准确的地方】 从这个角度而言，可以认为使用的html标签的样式已经由CSS定义好了，展现给开发者的是display属性及属性值等选项(web开发者)||(CSS开发者)但实际上这些选项是通过定义它们的outer/inner display type属性值来实现的，这些属性值背后映射着不同的渲染规则。了解这些渲染规则有利于web开发者理解CSS的原理。
outer display type
- outer display type的值决定了这类盒子参与bfc还是ifc
- 值为block-level-box块级盒子：参与bfc，垂直排列
display: block/ flex/ grid - 值为inline-level-box行内级盒子：参与ifc，水平排列
display: inline/ inline-block
inner display type
- inner display type的值决定类这类盒子在内部建立何种排列
- 值为block container：建立bfc或ifc
- 值为flex container：建立ffc
- 值为grid container：建立gfc
- 值为ruby container：不常用
格式化上下文
定义页面中的一块渲染区域，并包含相应的渲染规则，决定其子元素将如何定位，以及和其他元素的关系和相互作用。
通俗而言，开发者可以通过代码（包括但远远不限于display: block/inline-block/flex/grid）创建一块渲染区域，这块区域有几种类型（包括CSS2.1的bfc，ifc，CSS3的ffc，gfc），每种类型都包含自己的渲染规则，开发者根据自己的需要创建合适类型的渲染区域。然后根据这些渲染区域的渲染规则布置元素或实现特定应用场景的功能。
bfc
块格式上下文：只有块级盒子参与
渲染规则：
- 内部的盒子会在垂直方向一个个放置
- 盒子垂直方向的距离由margin决定，属于同一个bfc的两个相邻盒子的margin会发生重叠
- 每个元素的margin的左边，与包含块border的左边相接触，即使存在浮动也如此
- bfc的区域不会与float盒子重叠
- bfc是页面上的一个隔离的独立容器，里面的自元素不会影响到外面的元素
- 计算bfc的高度时，浮动元素也参与计算 创建bfc：
- html
- 非溢出的可见元素：overflow不为visible
- 设置浮动
- 设置定位
- 定义成块级的非块级元素 应用场景：
- 自适应两栏布局 侧边栏固定宽度且浮动在左侧，那么触发右侧内容的bfc，两者就不会重叠，右侧内容就可以自适应剩余宽度
- 清除内部浮动 浮动会造成父元素高度塌陷。那么触发父元素的bfc，计算其高度时浮动元素就会参与计算，实现清除浮动
- 防止margin合并 同一个bfc的相邻元素margin会合并，那么把其中一个元素外面包裹一层，两个元素就不在一个bfc里，margin就不会合并了
ifc
块级元素中仅包含内联级别元素，当ifc中有块级元素插入时，会产生两个匿名块将父元素分隔开，产生两个ifc
渲染规则：
- 子元素在水平方向一个个排列，在垂直方向以容器顶部开始向下排列
- 无法声明宽高，margin和padding仅在水平方向生效
- 在垂直方向以不同形式对齐
- 能把在一行上的框都完全包含进去的矩形区域称为该行的线盒line box。线盒的宽度由包含块containing box和其中的浮动决定
- line box一般左右边贴紧其包含块，但float元素会优先排列
- line box高度由line-height计算规则确定
- 内联级盒子的总宽度少于包含他们的line box时，水平渲染规则由text-align属性值决定
- 当一个内联盒子超过父元素的宽度时，会被分割成多盒子，这些盒子分布在多个line box中。如果子元素未设置强制换行，inline box将不可分割，导致溢出父元素。 应用场景：
- 水平居中 当一个块要在环境中水平居中时，设置其为inline-block会在其外层产生ifc，通过text-align实现水平居中
- 垂直居中 创建一个ifc，用其中一个元素撑开父元素的高度，然后设置其vertical-align: middle，其他行内元素则可以在此父元素下垂直居中
层叠上下文
创建层叠上下文
- html文档根元素
- 声明position: absolute/relative 且z-index值不为auto的元素
- 声明position: fixed/sticky的元素
- flex容器的子元素，且z-index值不为auto
- grid容器的子元素，且z-index值不为auto
- opacity属性值小于1的元素
- mix-blend-mode属性值不为normal的元素 ……
层叠等级
在同一个层叠上下文中，描述定义的是该层叠上下文中的层叠上下文元素在z轴上的上下顺序
在其他普通元素中，描述定义的是这些普通元素在z轴上的上下顺序
层叠顺序
- z-index>0的子节点
- z-index: auto/0的子节点
- 标准流内行内非定位的子节点
- 浮动非定位的子节点
- 标准流内块级非定位的子节点
- z-index<0的子节点
- 层叠上下文的border和background
如何比较元素的层叠等级
- 同一个层叠上下文中，按照上述顺序比较
- 不在同一个层叠上下文中，比较所处的层叠上下文的等级
- 同一个层叠上下文且层叠顺序相同，在html中定义越后面的层叠等级越高
【自己理解】 由于html文档根元素会创建一个层叠上下文，也就意味着页面的所有元素都参与到了层叠上下文之中，必然会根据层叠顺序进行排列。一些元素可能还会创建自身内部的层叠上下文，那么内部也遵循上述的顺序进行排列；还有一些元素是不创建层叠上下文的，将它们称为普通元素。
【注：这几天换了电脑第一次用MacBook，好多需要设置和不习惯的地方。明天就除夕了，祝所有人新年快乐】
