吃透CSS核心机制：层叠优先级、盒模型与Flex/Grid布局

1. 为什么CSS学了三年，写起来还是像在“猜”

我见过太多前端学习者卡在同一个地方：CSS的属性翻来覆去背了不少，Flexbox的教程刷了好几遍，但真拿到一个设计稿，还是忍不住一边调一边刷新，凭感觉凑数值。这真的不是你不努力，而是你学CSS的方式从一开始就跑偏了。

CSS全称是Cascading Style Sheets，核心词是“Cascading”——层叠。它不是一门“编程语言”，更像一套“规则系统”。你写的每一条样式，本质上都是往一个巨大的规则池里扔进一条规则。最终页面上某个元素长什么样，取决于所有规则在“层叠上下文”里博弈之后的结果。很多新手（甚至做了两三年前端的人）之所以觉得CSS难，是因为他们以为CSS像JavaScript一样是“逐行执行命令”，但实际上CSS是“声明约束”，多个约束同时生效时会按优先级、权重、来源做合并和覆盖。

这一篇是“前端学习二之CSS”，我默认你已经看完HTML的基础内容，知道<div>、<span>、<p>这些标签的语义，也能区分行级元素和块级元素。接下来我要带你做的，是把CSS从“死记硬背属性”升级为“理解规则，推断结果”。文章里不会有“CSS从入门到精通”那种大而全的目录，而是挑前端日常开发中最容易翻车、最容易让你在面试和工作中露怯的几条主线路，一条条拆开揉碎讲清楚。

先给这篇内容定个调：我们聊的不是“CSS有哪些属性”，而是“CSS到底怎么工作的”“为什么同样的代码在不同浏览器里会不一样”“哪些坑是我实际踩过并且帮你验证过解决方案的”。看完之后你写样式，应该能做到心中有数——这个元素为什么是这个尺寸、那个间距为什么是24px而不是随手写的25px、Flexbox为什么在这里能居中而在那里就不行。

2. 层叠优先级不是“背口诀”，而是理解规则的产生与覆盖

很多人提起CSS优先级，张口就是“内联 > ID > 类 > 标签”。这句话没错，但远远不够。你在真实项目里遇到的多半是这种局面：明明给.box写了color: red，页面上却死活显示成蓝色，打开DevTools一看，蓝色来自一个写在很远处的.container .box span。于是你开始烦躁，觉得CSS“不按常理出牌”。

2.1 优先级四元组的计算逻辑

浏览器判断一条样式是否生效，看的是四元组 (inline, id, class, type)。这里的关键在于：每一类选择器的数量会累加，且类永远大于标签、ID永远大于类、内联永远大于ID。注意，同一个四元组里，先比第一位的inline，inline相同再比id数量，id数量相同再比class数量，最后才比type数量。

举个例子：

css复制/* 场景：一个结构特别深的组件 */
#app .main .content .card .title .text span { color: red; }
.text { color: blue; }

页面里一个<span class="text">，上面第一条规则有6个class，算下来是 (0, 1, 6, 1)，第二条是 (0, 0, 1, 0)。四元组第一位都是0，第二位1大于0，所以第一条赢。看起来非常离谱，但这就是CSS的规则：只要ID和class数量领先，选择器再长也能压过短选择器。所以**“选择器越短越不容易被覆盖”这句话基本是错的**，真正决定优先级的是四元组里高位数字的大小。

2.2 避免“疯狂加权重”的恶性循环

新手最常见的骚操作是：发现覆盖不了，就加一个更高的ID，然后再加!important，最后实在不行就写!important加内联。这种操作短期内能让页面正常，但长期来看，你的样式表会变成一个无人敢碰的雷区。

真实项目里我推荐的做法：

• 尽量保证选择器的class层级不超过三层，例如.card .title span是极限。
• 用BEM命名规范（.block__element--modifier），从根上降低选择器冲突概率。
• !important只放在“全局工具类”里，比如.hidden、.disabled这类明确要求最高优先级的规则。
• 遇到覆盖不了的情况，先打开DevTools看是优先级不够，还是这条规则压根没匹配到。后者往往才是真正的问题，比如选择器写错了、拼写错了、或者元素被JS动态修改了class。

DevTools里有一个“matched CSS rules”面板，会按优先级从高到低列出命中元素的所有规则，还能直接看到哪条规则被划掉了、哪条生效了。这比你自己在那儿猜“谁赢谁输”高效得多。

2.3 继承不是“父传子”这么简单

层叠之外，另一个常被忽略的机制是继承。并不是所有的属性都会继承给子元素。比如color、font-size、line-height会继承，但width、height、margin、padding、border等和盒模型相关的属性不会继承。这个“会继承/不会继承”的边界其实很容易理解：影响文本和排版的可继承，影响尺寸和定位的不可继承。

我还踩过一个比较隐蔽的坑：line-height在父元素上设了1.5，子元素字体更大，结果行高并没有等比缩放，看起来特别挤。原因就是line-height的继承规则是先继承计算后的值，而不是继承比例。如果你想让所有子元素的line-height都和字号保持比例关系，得在根元素设置line-height: 1.5这种无单位的值，而不是line-height: 24px。

3. 盒模型和常规流：你以为是基础，其实大部分人的理解都是模糊的

盒模型是CSS里最“基础”也最“容易考倒人”的知识点。面试题特别爱问：一个width: 200px的元素，加上padding: 20px和border: 5px，实际占用的宽度是多少？如果你脱口而出“220px”，那基本就暴露了你用的是默认的content-box。

3.1 两种盒模型的实际差异

从CSS2.1开始，默认盒模型是content-box：width定义的是内容区域的宽度，盒子的实际宽度 = width + padding + border。另一种是border-box：width定义的是整个盒子的宽度，padding和border都从width里扣。

css复制/* 全局切换到 border-box 是现在的主流做法 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

为什么要切border-box？因为“所见即所得”。你写width: 200px，这个盒子就是200px，不会因为临时加了padding而撑破布局。如果你用content-box，想实现“总宽200px，内边距20px”，得在心里做减法——width: 150px加padding: 20px和border: 5px才刚好200px，每次都要算一遍，纯属给自己添堵。

3.2 margin塌陷：父子元素的margin合并

margin collapse（外边距塌陷）是另一个“基础但暗藏杀机”的问题。最常见的情况：一个父容器里有一个子元素，给子元素设置margin-top: 20px，结果父元素整个往下移了20px，而不是子元素在父元素内部往下移20px。

原因：在同一个块级格式化上下文（BFC）里，相邻的垂直margin会合并，取两者中的较大值。父子的margin-top在此处“挨在一起”，合并了。解决办法有几个：

• 给父元素加overflow: hidden，让它产生一个新的BFC。
• 给父元素加padding-top或border-top，隔断父子margin。
• 给父元素加display: flow-root，这个属性专门用来创建BFC，不会带来overflow: hidden可能引发的滚动条问题。

我自己最推荐display: flow-root，因为它语义最干净，“我是独立的块级格式化上下文，不参与外部margin合并”。

3.3 标准文档流为什么重要

常规流（normal flow）决定了块级元素垂直排列、行内元素水平排列的默认行为。很多人一上来就学Flexbox和Grid，反而把常规流里的规则搞糊涂了。其实Flexbox、Grid、定位都是“脱离常规流”的手段，脱离之后，很多默认行为会失效——比如margin: auto在不同上下文里的含义完全不一样。常规流里margin: auto可以水平居中，垂直居中做不到；Flex布局里margin: auto在主轴和交叉轴都能发挥“吸收剩余空间”的作用。这些差异只有理解了底层机制，才能在不同布局方案之间自如切换。

4. Flexbox和Grid：布局不是“调属性”，而是“分配空间”

前端面试题里，css flex、css grid的出现频率就一直居高不下。为什么？因为布局是CSS里最难的部分，而Flexbox和Grid是目前最主流的两种布局方案。但很多人学Flexbox只记住了justify-content和align-items，遇到稍微复杂一点的需求就懵了。

4.1 Flexbox的“空间分配”核心思维

Flexbox最核心的概念，不是“弹性盒子”，而是“空间分配”。一个容器设为display: flex之后，它的子项不再是普通文档流里的块级或行内元素，而是变成了“flex item”。这些item沿着主轴（main axis）和交叉轴（cross axis）排列，剩余空间和溢出空间由flex-grow、flex-shrink、flex-basis三个属性决定。

有个最典型的问题是：三个子项，想让它们在容器里等分宽度？很多人直接flex: 1，结果最后一项的内容稍微长一点，就会自动换行。原因是flex: 1是flex: 1 1 0%的缩写，它表示flex-basis为0%，然后按比例瓜分剩余空间。但如果在子项上设置了min-width，它就不会被压缩到0，而是占满内容宽度后的剩余空间再参与分配。这就是为什么“flex: 1但子项宽度不均”的原因。

想要稳定的等分效果，请这样写：

css复制.parent {
  display: flex;
}

.child {
  flex: 1 1 0;
  min-width: 0; /* 允许内容收缩到比内容宽度更小 */
}

min-width: 0是很多人忽略的关键——默认min-width: auto会让flex item的最小宽度等于内容宽度，当内容过长时盒子不会缩小，进而把布局撑破。所有“flex布局被内容撑爆”的问题，几乎都是这个原因，解决方式就是允许它收缩。

4.2 Grid的“二维”优势从何而来

Flexbox是一维布局（沿一个轴线排），Grid是二维布局（行列同时控制）。Flexbox适合“一排里的分布”，Grid适合“整张页面的结构”。

Grid学习里最容易被忽略的是fr单位和minmax()。1fr代表“剩余空间的一份”，但它和Flexbox的flex-grow一样，不会先等分再分配，而是先计算等分之后再按内容可压缩程度调整。具体表现就是，grid-template-columns: 1fr 1fr 1fr三列，如果第一列内容特别长，它会把另外两列挤得很窄。想避免这种情况：

css复制.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

minmax(0, 1fr)允许列缩小到0宽度，这样每列严格等分，内容溢出时通过换行或滚动处理。

4.3 垂直居中这个“世纪难题”的解法演进

“怎么调整CSS容器里的文本位置”是热搜词里非常经典的问题。以前常规流的解法是text-align: center配合line-height，但一旦内容换行就废了。用Flexbox之后：

css复制.container {
  display: flex;
  justify-content: center; /* 主轴居中 */
  align-items: center;     /* 交叉轴居中 */
}

这段代码随手就能解决块级容器内单行/多行文本的水平和垂直居中。如果容器是Grid：

css复制.container {
  display: grid;
  place-items: center; /* align-items: center; + justify-items: center; */
}

place-items是Grid里一个非常实用的简写。这些属性本身不难，难的是理解它们背后“空间分配”的模型——为什么能居中？因为Flexbox把剩余空间在主轴和交叉轴上各留出了一半，文本就被推到中心了。

5. 选择器与样式组织：从“匹配元素”到“管理规则”

很多人对CSS选择器的理解停留在“选中我想要的那个元素”。这个理解本身没错，但它会把你限制在“类名越写越长”的泥潭里。真正的选择器思维应该是：选择器是在描述元素关系，而不是罗列类名。

5.1 常用选择器不只是“少写class”

• 后代选择器 .a .b：匹配.a内部的所有.b，不管层级多深。这容易导致“样式被深层元素意外影响”，平时尽量控制后代层级。
• 子选择器 .a > .b：只匹配直接子元素，不会往下钻。这是默认推荐的选择器，能有效限定影响范围。
• 相邻兄弟选择器 .a + .b：匹配紧跟在.a后面的第一个.b。适合做“标题下面的说明文字”这类场景。
• 通用兄弟选择器 .a ~ .b：匹配.a之后的所有.b兄弟元素。

我在实际项目里最常用的策略是children + BEM混用：外层用BEM的block和element命名，内部仅用子选择器来避免深层级污染。比如：

html复制<div class="card">
  <h3 class="card__title">标题</h3>
  <p class="card__desc">描述</p>
</div>

css复制.card > .card__title { font-size: 18px; }
.card > .card__desc { color: #666; }

这样写，即使你的CSS里还有其他.card__title，只要不在.card容器内，就不会被这条规则命中。比裸写.card__title更安全。

5.2 伪类和伪元素：一个伪冒号之差

伪类是“元素在特定状态下的样式”，比如:hover、:focus、:nth-child(2)、:not(.disabled)。伪元素是“在元素内部生成的虚拟内容”，比如::before、::after、::placeholder。

CSS3之前两者都用单冒号，CSS3开始伪元素统一改成双冒号。现代浏览器都支持，但为了兼容旧浏览器，::before和::after写成单冒号也仍然会被解析。比较实用的小技巧：

• 伪元素::before和::after必须设置content属性，即使内容为空也要写content: ''。不写content，它们不会渲染。
• 伪元素默认是行内元素，设置宽高没用，需要display: block或position: absolute来改变。
• ::after { content: attr(data-tooltip); }可以从元素的data-*属性中读文本，做纯CSS的tooltip。

5.3 CSS变量与原子性CSS：现代工程的两种路线

热搜词里出现了原子性css和css变量。这两者其实是两种不同的工程化思路：

• CSS变量（custom properties）定义在:root里，结合上下文继承特性，可以做出各种主题切换、动态样式，比如暗色模式。变量的继承规则和普通属性一致：子元素能读取到父元素定义的变量值，但子元素也可以覆盖它。
• 原子性CSS（如Tailwind CSS）是把“margin: 10px”抽成一个类.m-10，通过组合类名来拼装组件。优点是样式可预测、不会互相污染；缺点是HTML类名特别长，而且需要团队统一约定。

我自己的建议：小项目用CSS变量+合理嵌套的结构化CSS，中大型项目直接上Tailwind或类似方案。两种方案本身没有绝对的好坏，关键是团队所有人都认同同一套规则。我最讨厌的项目是“半套Tailwind加半套手写CSS”，这种项目改起来真是灾难。

6. 让页面“活”起来：过渡、动画和视觉细节

写了几年CSS，你会发现最提现功力的不是布局，而是那些“看不见的细节”——hover时按钮的反馈、弹窗出现时的淡入、文字渐变的质感。这些细节决定了用户觉得你的页面“精致”还是“粗糙”。

6.1 transition是“状态变化”，animation是“关键帧动画”

transition和animation最大的区别在于：transition只能在某个属性从A值变到B值时，插入中间过程；animation可以定义多段关键帧，按时间推进。

css复制.btn {
  background: #3498db;
  transition: background 0.3s ease;
}

.btn:hover {
  background: #2ecc71;
}

上面的按钮hover时背景会从蓝色平滑过渡到绿色。注意，transition不是只作用于hover，它作用于“按钮背景任何状态的变化”。只要background属性发生变化，都会按0.3s的时长和ease的缓动函数执行。

更滑一点的进阶用法是配合CSS变量，做数值的渐变：

css复制.card {
  --shadow-opacity: 0.2;
  box-shadow: 0 8px 30px rgba(0, 0, 0, var(--shadow-opacity));
  transition: box-shadow 0.5s ease, transform 0.5s ease;
}

.card:hover {
  --shadow-opacity: 0.4;
  transform: translateY(-4px);
}

这个卡片hover时阴影变深且卡片上浮，看起来很有“质感”。因为CSS变量本身可以transition，所以box-shadow里的透明度变化也会被动画化。

6.2 transform与rotate3d：硬件加速的秘密

transform属性里面有一个非常出名的坑：即使你只是旋转、缩放、平移，它也会触发浏览器创建新的层来渲染。这个“层”可以利用GPU加速，动画更快更流畅。但代价是如果层太多，会吃掉大量内存，导致页面变卡。

常见的硬件加速写法：

css复制.box {
  transform: translateZ(0); /* 强制开启GPU层 */
}

这段代码不是给元素添加3D动画的，而是用来强制触发GPU渲染，让它从普通的CPU渲染流程里独立出来，通常用于那些频繁变化的元素，比如轮播图、滚动吸顶的导航。但说实话，现代浏览器的自动优化已经很强了，非必要不要手动加translateZ(0)，因为可能带来“图层爆炸”的问题。

rotate3d是CSS 3D变换的核心函数：transform: rotate3d(x, y, z, angle)。很多酷炫的卡片翻转效果都是基于它：

css复制.flip-card-inner {
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

实现“卡片翻转”效果的核心是transform-style: preserve-3d——它让子元素能在父元素的3D空间里做变换，如果只写transform: rotateY(180deg)而没有preserve-3d，子元素还是会被拍扁在平面上。

6.3 文字的竖排、渐变、溢出省略号

热搜词里有好几个和文字样式相关的，比如css文字竖着排列、css字体渐变、css 单行显示,超出点点点。这几个都是日常开发里高频的需求，但网上资料很零碎，我一次性整理在这里：

文字竖排：

css复制.vertical-text {
  writing-mode: vertical-rl; /* 从右向左竖排，日文/中文古籍排版常用 */
}

字体渐变（需要背景裁剪）：

css复制.gradient-text {
  background: linear-gradient(90deg, #ff6b6b, #feca57);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

关键步骤是background-clip: text——把背景裁剪到文字轮廓内，然后color: transparent让原本的文字颜色变成透明，露出渐变背景。

单行文本超出省略：

css复制.single-line {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

多行文本超出省略（这个需要-webkit-前缀，非标准但兼容性极好）：

css复制.multi-line {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

其实line-clamp已经从Chrome 99开始变成了标准属性，写法会更简洁。但目前主流还是带-webkit-前缀的写法，最稳妥。

6.4 涟漪光圈扩散：用纯CSS做水波纹反馈

热搜词里有一个“css涟漪光圈扩散”，这个效果很多人第一反应是上JavaScript，其实纯CSS就能做。核心思路是用::after伪元素画一个圆形，初始时透明且缩放为0，hover或active时让它放大并渐隐。配合transition或者animation的关键帧，就能实现涟漪效果。

css复制.ripple-btn {
  position: relative;
  overflow: hidden;
  background: #4a90d9;
  color: #fff;
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.ripple-btn::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.5s ease, opacity 0.5s ease;
  opacity: 0;
  pointer-events: none;
}

.ripple-btn:active::after {
  transform: translate(-50%, -50%) scale(2.5);
  opacity: 1;
}

这个涟漪虽然是用::after伪元素实现的，但它的大小是相对于按钮本身，不是相对于点击位置。如果想要精确的点击位置涟漪，还是需要JS动态设置left和top。但作为按钮的active反馈效果，这段代码已经够用了。

7. 那些年我们一起踩过的CSS兼容性和性能坑

把兼容性和性能放到最后，是因为这些问题通常只会在“真实项目”里暴露。你在自己的demo里随手写的代码很可能完全没问题，一旦放到线上环境，各种奇奇怪怪的问题就全冒出来了。

7.1 小程序里常见的底部兼容问题

热搜词里有个精确的场景：“小程序苹果底部兼容css”。这个是很多小程序开发者都遇到过的问题——iPhone X及以后的机型都有底部Home Indicator（小横条），小程序在底部固定的tabBar或者操作栏会被它遮挡。

解决方案无外乎两种：

一是用safe-area-inset-bottom这个环境变量：

css复制.safe-bottom {
  padding-bottom: constant(safe-area-inset-bottom); /* iOS 11.0 */
  padding-bottom: env(safe-area-inset-bottom);     /* iOS 11.2+ */
}

二是在小程序里给page标签设置padding-bottom，或者在App.json配置"navigationStyle": "custom"。但要注意，env()在某些安卓浏览器上不支持，所以一般会先写一个固定padding值，再用env()覆盖。

7.2 伪元素变量：CSS变量和伪元素的关系

热搜词里出现“css 控制伪元素变量”，是因为很多人试图用CSS变量去控制::before和::after的样式，结果发现变量没生效。原因在于：伪元素默认继承的是宿主元素的样式，而不是父元素的样式。也就是说，你在父元素上定义了--bg，然后在类选择器里写了.parent::before { background: var(--bg); }，这个var(--bg)是在伪元素的计算环境里解析的，伪元素本身没有--bg变量，所以会退回默认值。

正确的写法是：把变量定义在伪元素匹配的那个元素上：

css复制.item {
  --ripple-color: #ff6b6b;
}

.item::before {
  background: var(--ripple-color);
}

因为::before是.item的伪元素，它会继承.item自己的CSS变量，所以var(--ripple-color)能解析成功。

7.3 性能优化：减少重排和重绘的几个硬指标

CSS性能优化的核心目标，是减少浏览器执行“布局”（Layout）和“绘制”（Paint）的次数。这两个过程是浏览器渲染管线的关键阶段。布局阶段浏览器要重新计算每个元素的位置和尺寸，绘制阶段要把像素画到屏幕上。这两者相互影响，布局必然触发绘制，但绘制不一定触发布局。

需要重点注意的：

• 触发布局的属性：width、height、margin、padding、top、left、border等。修改这些属性会引起大面积重排。
• 触发绘制的属性：color、background、box-shadow、text-shadow、border-radius等。只触发绘制不触发布局，但绘制本身也消耗GPU资源。
• 最优的属性：transform和opacity。这两个属性操作时，浏览器可以跳过布局和绘制阶段，直接提交合成（composite）。这就是为什么“滚动吸顶”和“弹窗动画”都推荐用transform: translateY()而不是top或margin-top实现的根本原因。

还有一个经常被忽视的细节：频繁切换类名切换样式比直接改行内样式更有利于性能，因为浏览器可以对类名变化做批量处理。另外，尽量避免用JS逐帧修改CSS样式（比如动画里读offsetTop再改样式），“读”和“写”交错会导致浏览器没法批量优化，产生强制同步布局（Forced Synchronous Layout），数据一大页面就卡。

7.4 从href到link：CSS的加载时机

最后顺带说一个面试常问但和日常开发密切相关的点：为什么CSS要用<link>而不是@import？因为<link>是HTML解析时并行加载的，而@import是CSS解析到那条规则时才去请求外部文件，会阻塞后续样式的应用，页面容易出现“没有样式”的白屏闪烁。而且@import不支持并行加载多个文件，每个@import都得等前一个下载完成。

所以在实际项目中，CSS文件加载最推荐的顺序是：页面骨架的CSS用<link>放在<head>里，非关键CSS（比如弹窗、底部内容）可以异步加载或用media属性延迟。现在的构建工具大多数都会自动帮你做代码分割和预加载，理解这个底层逻辑，你才能知道工具帮你做了什么、为什么要这么配置。

8. 从“会写”到“会调”：DevTools和调试思路才是分水岭

文案写到这，你会发现我几乎没有提“背属性”这件事。因为CSS的学习曲线里，真正把人和人拉开差距的，不是记住了多少属性，而是遇到问题时的调试思路。

8.1 调试CSS的标准流程

我总结了一个非常朴素的调试流程：

第一步，确认命中。选中元素，看Elements面板里有没有匹配到你的选择器，DevTools里会直接显示“matched CSS rules”。如果压根没匹配到，说明你的选择器写错了，或者元素被其他规则覆盖了。

第二步，确认优先级。看matched rules里的排序，排在前面且没有划线的规则，就是最终生效的。如果有两条规则同时命中且都没有划线，说明优先级完全一样，后面的覆盖前面的，这时候需要检查样式表里的加载顺序。

第三步，确认继承。如果元素自己没有匹配到任何颜色类规则，去Elements面板的“Inherited from”里找父元素的继承值。很多“为什么我的字是蓝色”的问题，答案都在父元素的某个属性上。

第四步，确认计算值。选中元素后看Computed面板，最右边会显示每一个属性的最终计算值。“我明明写了width: 200px，为什么显示不是200”的问题，在这里一眼就能看出是content-box还是border-box，或者被min-width/max-width限制了。

8.2 几种高频坑的排查经验

• 设置了position: absolute但怎么都定位不对：检查父元素有没有position: relative。绝对定位是相对最近的“定位祖先”定位的，没有就相对视口。这是新手最容易忽略的一环。
• z-index设了999999还是压不住：检查这个元素有没有形成层叠上下文。position: absolute/fixed + z-index会创建层叠上下文；transform、opacity、filter也会创建。如果给一个元素加了transform，它内部的z-index就只能在这个上下文内比较，和外部元素比是无意义的。
• 明明写了hover样式但鼠标移上去没反应：检查是不是其他元素盖住了目标元素。用DevTools的“Inspect”功能点一下鼠标所在位置的元素，看实际命中的是哪个。

8.3 一个小而美的技巧：用outline调试布局

布局肉眼看不准的时候，我会一口气加上：

css复制* {
  outline: 1px solid rgba(255, 0, 0, 0.2);
}

outline不会影响元素尺寸和布局，比border好用太多。加上之后每个元素的边界立刻清晰可见，哪块被撑破了、哪个间距不对，一眼就能看出来。调试完记得删掉。

最后分享一点我的个人体会

CSS这个领域，上限和下限差距极大。下限是“写一个静态页面”，上限是“构建一个高性能、可维护、可换主题的大型应用的设计系统”。中间的那条主线，就是理解机制，而不是背语法。我见过很多工作两三年的人，还在用!important和堆选择器来解决问题，然后抱怨CSS是个烂设计。实际上他们只是没有花时间去理解层叠、盒模型、布局模型这些底层机制。

如果你现在还在“调一个值刷新一次页面”的阶段，我的建议特别简单粗暴：把DevTools的Computed面板当成你的练习场。每写一个样式，都去Computed里确认一下最终计算值，看看和你的预期是否一致。不一致就追查原因——是优先级、继承、还是某个默认样式在捣乱。这个过程坚持一个月，你的CSS直觉会有质的提升。

下一篇我会继续聊JavaScript，把前端的逻辑层补上。到时候你会发现，理解了CSS的“规则系统”和“事件驱动”，再去学JS会轻松很多。