CSS

布局

normal flow(正常布局流) 完全按照元素出现的先后顺序显示, 以下技术会覆盖默认布局：
- display: 此时一般取值 block,inline,inline-block grid, flex…
- float: 允许某个元素浮动到某一位置，脱离 normal flow
- position: static, relative, absolute, fixed, sticky
- table layout: 传统表格
- multi-column layout: 多列布局, column-count / column-width;
flexbox layout(弹性盒子) 目的：创建横/纵的一维页面布局实现：
1. 父元素(flex-contanier)属性设为
  - (flex-direction)
    - row: 默认, 多列布局
    - column: 堆叠布局
    - row-reverse: 多列布局，倒序
  - display
    - flex: 块级元素
    - inline-flex: 行内元素
  - flex-wrap: wrap: 自动换行，解决元素溢出问题,当子元素有定宽如flex-width: 200px
  - flex-flow: row wrap: 合并direction和wrap简写
  - align-items: 控制在交叉轴（与 direction 垂直）的位置
    - strectch: 拉伸
    - center/flex-start/flex-end: 居中/开头/结尾。
  - justify-content: 控制在主轴上的位置
    - flex-start/flex-end/center: 开头/结尾/居中
    - space-around: 均匀分布，两端留空
    - space-between: 均匀分布，两端贴紧
2. 子元素(flex-item)属性设为
  - flex (grow [shrink basis])
    - 1: 无单位比例值，充分伸展并填充父元素容器, 宽度相等, 即 flex-grow
    - 1 200px: 指定当前 flex 最小值为 200px，扣除后再进行共享, 即flex-basis
    - 1 1: 指定无单位比例和溢出比例
  - align-self: 覆盖父元素align-items的行为
  - order: 排序
3. Flex 项目在 Flex 容器中的排列方向同时会受 flex-direction 属性和 CSS 的书写模式 writing-mode 或阅读模式 direction 影响
grid layout(网格布局) 目的：创建二维布局实现：
1. 父元素属性：
  - display: grid;
  - grid-template-columns: 200px 1fr (repeat)…;
  - grid-column-gap/grid-row-gap/grid-gap: 设置间隙
  - grid-auto-{rows, columns}: 设定隐式网格轨道的大小, minmax(…)
  - grid-template-areas: ”…” ”…“…
2. 子元素属性：设定子元素位置：
  1. 分隔线 grid-{column,row}: start / end,
  2. areas grid-area: …, 对应于父元素中的 grid-template-areas
float layout 目的：传统上实现文字环绕实现：

待浮动元素属性： float: none/left/right/inline-start/inline-end;

清除浮动元素其后元素的浮动行为： clear: left/right/both;

清除浮动元素周围的盒子对其后元素的影响在盒子属性中设置display: flow-root
positioning 目的: 建一个浮动 UI 元素/始终停留在浏览器窗口内的相同位置实现：设置元素position属性
1. static: normal
2. relative: 与 top/bottom/left/right一起使用，相反的方向。
3. absolute: 绝对定位将元素固定在相对于其位置最近的祖先。（如果没有，则为初始包含它的块）
  - 父元素都没有显示定义position属性，绝对定位元素会被包含在初始块容器中,定位也是如此
  - 设置其中一个父元素的定位属性(比如 relative), 则定位则是相对于父元素
  - z-index: 决定覆盖图层的显示优先级
4. fixed: 将元素固定在相对于浏览器视口本身
5. sticky: relative和fixed混合

multicol 目的：创建多列布局实现：

.container {
  column-count: 3;
  column-width: 200px
  column-gap: 20px;
  column-rule: 4px dotted rgb(79, 185, 227);
}

.card {
break-inside: avoid;
page-break-inside: avoid;
}