格式化上下文

---

内联级格式化上下文

在内联格式区域中，盒子从包含块的顶部开始按序水平排列，只保留水平外边距、边框和内边距，在垂直水平上盒子可以按不同的方式对齐。包含一系列盒子的矩形区域称为线条框。

line box

line box的高度为所包含的位置最高的元素顶部和位置最低的元素底部间的距离。

baseline基线

基线即英文字母"x"的下边缘线。x-height为字母x的高度，也即中线median与基线baseline之间的距离。

对于inline-block的元素，其基线取决于它本身。当该元素没有行内子元素时，或者overflow不是visible，则该inline-block元素的基线为margin-bottom的下边界；否则以该元素中最后一个行框子元素的基线为该元素基线。

行高line-height定义的是两条基线之间的距离。

vertical-align

vertical-align的默认值为基线，只有当元素属于inline或inline-block，vertical-align才有用。

注意：设置vertical-align: middle;时，所指的位置不是median，而是x-height一半的高度。

垂直居中

设置vertical-align: middle;时，不是完全垂直居中。如果设置父元素font-size: 0;基线baseline和中线median重叠，实现居中对齐。

注意：设置父元素font-size: 0;适用于父元素内没有包含文字的，毕竟font-size直接影响字体大小。

弹性盒子布局

---

弹性盒子布局（Flexible Box Layout）在未知宽高的情况下也可以排列和分割一个盒子内部的布局，在不同布局方向的调整也更加灵活。

作用于父元素

1. 建立一个弹性盒子：display: flex/inline-flex;
2. 规定盒子主轴方向：flex-direction: row/column/...;
3. 子元素拆行显示：flex-wrap: nowrap/wrap/wrap-reverse;
4. 主轴方向子元素排列方式：justify-content: center/space-between/...;
5. 交叉轴方向子元素对齐方式：align-items: flex-start/space-between/...;
6. 交叉轴方向多行子元素布局方式：align-content: flex-start/space-between/...
7. 以值设定子元素间的间隔：gap: row-gap/column-gap;

作用于子元素

1. item未放缩之前的默认大小：flex-basis: auto/长度值/...;
2. 有剩余时对item的分配比例：flex-grow: number;
3. 空间不够时对item的压缩比列：flex-shrink: number;
4. 以上三项的缩写：flex: grow shrink basis;（默认值：0 1 auto）
5. item从左到右显示的顺序：order: number;（默认0）
6. 单个item在交叉轴上的位置：align-self: auto/center/flex-start/...;

使用策略

1. 一维布局
2. 是基于内容的布局
3. 浏览器兼容更好
4. 适用于小面积、组件或Grid item中布局，灵活性强

网格布局

---

网格（Grid）布局可以定义由行和列组成的二位布局，将元素放到网格中。元素可以占单个单元格或多行或多列。

作用于父元素

1. 建立网格布局：display: grid/inline-grid;
2. 生成显示的列、行：grid-template-colums/rows: 数值/百分比/fr/repeat()/...;
3. 区域的分布：grid-template-areas: header header/sidebar content/footer footer;
4. 默认排序方向：grid-auto-flow: row(dense)/column(dense);

作用于子元素

1. 占用的行、列：grid-colum/row: start-line/end-line;
2. 占用的区域：grid-area:header;

使用策略

1. 二维布局
2. 2017年之后的浏览器版本普遍支持
3. 适用于大面积或者整体布局

定位

---

在文档流的基础上让元素移动，做出更加灵活的改变。

static

静态定位的元素不受top, bottom, left, right属性的影响，元素始终根据正常文档流定位。

relative

元素相对于自己原来在文档流中的位置进行定位，可设置top, bottom, left, right属性来调整位置。原本文档流的空间仍存在，也就是说不会调整其他元素位置以适应剩余空间。

absolute

元素被移出正常文档流，没有预留空间，相对于最近的非static定位祖先元素定位，如果该元素没有祖先，它将相对于文档主体（body）定位，并随页面一起滚动。

fixed

元素被移出正常文档流，没有预留空间，相对于屏幕视口定位，当屏幕滚动时不会改变其位置。

sticky

元素相对于它最近的滚动祖先（overflow: scroll/hidden/auto）的视口定位，根据视口滚动在relative和fixed之间切换。

层叠上下文

---

层叠上下文（the stacking context）是对HTML元素的三维构想，将元素沿垂直平面的虚构z轴展开。

形成新层叠上下文的条件

1. position: ralative/absolute;且z-index不是auto
2. position: fixed/sticky;
3. flex或grid的子元素，且z-index不是auto
4. opacity的值小于1
5. transform不为none
6. will-change不为通用值
7. ...

层叠顺序

• 背景和边框：建立层叠上下文元素的背景和边框
• 负 Z-index：z-index 为负的后代元素建立的层叠上下文
• 块级盒：文档流内非行内级非定位后代元素
• 浮动盒：非定位浮动元素（除position:absolute/relative/fixed的浮动盒）
• 行内盒：文档流内行内级非定位后代元素

两个原则：

1. 同一层叠上下文领域，层叠水平值大的元素覆盖层叠水平值小的元素。
2. 当元素的层叠水平一致、层叠顺序相同时，在DOM流中处于后面的元素覆盖前面的元素。

注意：

1. inline-block和inline水平元素同等级别。
2. z-index:0和z-index:auto单纯从层叠水平上看可视为一样，但实际上两者在层叠上下文领域有着根本性的差异。
3. z-index只在同一个层叠上下文内进行比较。
4. 子元素的z-index无法超越父元素的z-index显示顺序。

建议

1. 使用CSS变量或预处理语言变量来管理z-index的值。
2. 将预设间隔设置为10或100，方便后续的插入。

未完待续......