CSS 理论知识点

CSS 经常被误解成“调样式的语法集合”，但它真正难的地方不是属性数量，而是渲染规则。很多布局问题、层级问题、样式覆盖问题，最后都不是某个属性不会用，而是没有理解浏览器为什么这样算。

这篇文章把最值得先建立的几个核心概念放在一起讲清楚。

盒模型

每个元素都可以看成一个盒子，由以下部分组成：

content
padding
border
margin

默认情况下，元素声明的 width 和 height 只对应内容区。

css

.box {
  width: 200px;
  padding: 20px;
  border: 2px solid #333;
}

如果还是默认盒模型，那么这个元素真实占据的宽度会大于 200px。

`box-sizing: border-box`

在现代项目里，更推荐全局统一使用：

css

*,
*::before,
*::after {
  box-sizing: border-box;
}

它的好处是：

宽高计算更直观
组件布局更稳定
表单、卡片、弹窗这类常见 UI 更容易对齐

层叠、继承与优先级

当多个样式同时命中一个元素时，浏览器会按规则决定最终结果。

大致可以理解成四步：

规则是否命中元素
来源与重要性谁更高
选择器优先级谁更强
如果前面都相同，后写的覆盖先写的

常见优先级直觉

从常见写法来看，大致可理解为：

行内样式
id
class、属性选择器、伪类
标签、伪元素

例如：

css

#app .card-title {
  color: #222;
}

.card-title {
  color: #666;
}

更具体的选择器通常更容易赢。

为什么不要滥用 `!important`

!important 当然能“压过去”，但副作用也明显：

后续样式维护会变得更混乱
组件复用时更难覆盖
容易形成样式对抗

更稳妥的做法通常是：

优化选择器结构
调整样式注入顺序
抽离基础类和状态类

BFC

BFC 可以理解成一个相对独立的布局区域，它内部的布局变化不会随意影响到外部。

常见触发方式：

overflow: hidden 或 auto
display: flow-root
float
position: absolute 或 fixed

BFC 常用于解决什么

清除浮动影响

父元素内部全是浮动元素时，父元素高度可能塌陷。触发 BFC 可以让父元素重新包住内部布局。

避免外边距合并

相邻块级元素或者父子块级元素之间，垂直方向的 margin 可能合并。引入 BFC 可以隔离这种行为。

隔离布局

当你不希望一个区域的浮动、尺寸计算、滚动策略影响外部时，BFC 非常实用。

布局方式

CSS 真正的现代布局主力，已经不是早期的浮动和绝对定位，而是 flex 和 grid。

Flex

flex 更适合一维布局，也就是：

一行内的分布
一列内的排列

常见场景：

顶部导航
工具栏
表单行
卡片头部布局

css

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

Grid

grid 更适合二维布局，也就是同时控制行和列。

常见场景：

仪表盘
图片宫格
首页版块编排

css

.panel-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

怎么选

一行或一列的弹性分配，用 flex
同时控制行和列，用 grid

不要一上来就想着“所有问题都用一个布局方案解决”。

定位

定位的本质，是决定元素是否继续留在普通文档流里，以及它相对谁发生位移。

常见定位方式

static：默认文档流
relative：保留原位置，同时允许偏移
absolute：脱离文档流，相对最近的定位祖先
fixed：相对视口固定
sticky：在特定滚动区间里表现为粘性定位

最常见的误区

很多人把定位当成“强行摆放元素”的手段，最后整个页面都靠 absolute 拼起来。这种方案短期看起来能对上，长期维护会很差。

优先顺序通常应该是：

普通文档流
flex / grid
少量定位做局部增强

层叠上下文与 `z-index`

z-index 并不是全局比较大小，而是在同一个层叠上下文里比较。

这就是为什么你明明写了一个很大的 z-index，元素还是盖不过另一个层。

常见会创建新层叠上下文的情况包括：

定位元素结合 z-index
opacity 小于 1
transform
filter

业务里最容易踩坑的地方是：

弹窗挂在了错误容器里
父元素创建了新的层叠上下文
子元素再大的 z-index 也出不去

响应式思路

响应式不只是“加几个媒体查询”，更核心的是：

布局本身具备伸缩能力
字体、间距和容器宽度能自然变化
在内容变多时页面也不会立刻崩掉

常见实践：

用百分比、fr、minmax 等相对单位组织布局
减少写死宽高
先做流式布局，再补断点优化

实践建议

全局默认使用 box-sizing: border-box
业务布局优先考虑 flex 和 grid
尽量减少“靠 margin 硬挤”的布局方式
组件样式命名保持语义化，避免纯视觉命名
遇到层级问题先排查层叠上下文，不要盲目加大 z-index

小结

CSS 难的不是记属性，而是理解规则。只要你把下面这些建立起来，排查样式问题会快很多：

盒模型怎么计算
层叠和优先级怎么决定结果
BFC 为什么能隔离布局问题
flex 和 grid 应该怎么选
z-index 为什么经常“不生效”

CSS 理论知识点 ​

盒模型 ​

box-sizing: border-box ​

层叠、继承与优先级 ​

常见优先级直觉 ​

为什么不要滥用 !important ​

BFC ​

BFC 常用于解决什么 ​

清除浮动影响 ​

避免外边距合并 ​

隔离布局 ​

布局方式 ​

Flex ​

Grid ​

怎么选 ​

定位 ​

常见定位方式 ​

最常见的误区 ​

层叠上下文与 z-index ​

响应式思路 ​

实践建议 ​

小结 ​

延伸阅读 ​