CSS

布局

弹性盒子布局 flex

• 作用于父元素
  • 建立一个弹性盒子：display: flex|inline-flex
  • 盒子主轴方向：flex-direction: row|column|...
  • 子元素折行显示形式：flex-wrap: nowrap|wrap|wrap-reverse
  • 主轴方向子元素的排列方式：justify-content: center|space-between|...
  • 交叉轴方向子元素的对齐方式：align-items: flex-start|center|stretch|...
  • 交叉轴方向多行子元素的布局方式：align-content: flex-start|space-between|...
  • 以明确值设定子元素间的间隔：gap：< row-gap>< column-gap>
• 作用于子元素
  • 规定item未缩放之前的默认大小：flex-basis: auto|长度值|...
  • 规定有剩余空间时，对item的分配比例：flex-grow: number
  • 规定空间不够时，对item的压缩比例：flex-shrink: number
  • 以上三项的缩写：flex: grow shrink basis 默认：0 1 auto
  • 规定item从左到右（row布局）显示的顺序：order: number 默认是0
  • 规定单个item在交叉轴上的位置：align-self: auto|center|flex-start|...

网格布局 grid

• 作用于父元素
  • display: grid|inline-grid
  • 用来生成显示的列、行：grid-template-columns/rows: 数值/百分比/fr/repeat()等
  • 规定区域的分布：grid-template-areas: "header header" "sidebar content" "footer footer"
  • 规定默认的排序方向：grid-auto-flow: row(dense)|column(dense)
• 作用于子元素
  • 规定占用的列、行：grid-column/row:< start-line >/< end-line >
  • 规定占用的area：grid-area: header

定位 position

• relative
• absolute
• fixed
• sticky

层叠上下文 The stacking context

含义解释

层叠上下文是对HTML元素的三维构想，将元素沿着垂直屏幕的虚构的Z轴排开
一个新的层叠上下文渲染时会对应一个浏览器渲染时的render layer（渲染层）

形成条件（任一即可）

• position：relative/absolute; 并且z-index不是auto
• position: fixed/sticky
• flex或grid的子元素；并且z-index不是auto
• opacity小于1
• transform的值不为none
• will-change的值不为通用值

举例：

注意：子元素的z-index无法超越父元素的z-index显示区域

编写z-index的建议

• 使用css变量或预处理语言的变量，管理z-index的值
• 将预设间隔设置为10或100，方便后续的插入