记录一些经常忘记的css

这个目录用于记录前端开发中容易忘记但经常会用到的 CSS 知识点，例如布局、居中、滚动、层叠上下文、动画和响应式。

CSS排查流程

mermaid

flowchart TD
    A[页面样式异常] --> B[检查元素是否命中选择器]
    B --> C[检查样式是否被覆盖]
    C --> D[检查盒模型尺寸]
    D --> E[检查定位和层级]
    E --> F[检查父级布局约束]

Flex 居中最常用：

css

.box {
  display: flex;
  align-items: center;
  justify-content: center;
}

css

.text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

z-index 不生效时，通常不是值不够大，而是父元素形成了新的层叠上下文。常见触发条件包括 position + z-index、transform、opacity < 1、filter 等。