CSS布局实战：从Flex到Grid，掌握响应式与原子化CSS

1. 内容整体设计与思路拆解

1.1 布局的本质：从“摆积木”到“搭骨架”

CSS布局这件事，说白了就是两件事：把元素放在哪里，以及元素在不同尺寸的屏幕上怎么变化。很多人一上来就背flex、grid的属性，结果真拿到设计稿还是不知道从哪下手，问题就出在“只记属性、不懂思路”。

我做了十多年前端，带过不少新人，发现一个规律：凡是布局学得好的，脑子里都有一套“自上而下、先整体后局部”的拆解方法。拿到一张设计稿，第一件事不是写代码，而是先问自己三个问题：

一是这个页面是单栏、双栏还是多栏结构？二是哪个区域是“主”哪个区域是“辅”？是左右分栏还是上下分栏？三是哪些内容在窄屏下需要折叠、隐藏或重新排列？

这三个问题想清楚了，才轮到flex还是grid的选型。

我习惯把布局拆成“骨架层”和“血肉层”两层来思考。骨架层负责页面的整体结构，比如顶部导航、侧边栏、内容区、底栏，这层用grid或float都行，关键是结构稳定；血肉层是具体某个模块内部的排列，比如导航菜单里几个链接怎么排、卡片里的标题和描述怎么对齐，这类场景flex几乎是通杀。

这样划分的核心逻辑是：grid擅长“二维空间管理”，flex擅长“一维排列对齐”。你用单独一行float堆三列布局没毛病，但如果你想做那种“左侧自适应、右侧固定宽度、两行三列还带间距”的复杂结构，grid的grid-template-areas会让你感动到想哭。

1.2 方案选型：为什么我不再迷恋“万能flex”

早些年我确实是flex的忠实拥趸，因为flex解决80%的常规布局问题。但后来项目越做越复杂，开始踩到flex的边界，才补上了grid这块拼图。

flex最大的痛点是“以内容为主”。什么意思？就是flex布局的尺寸是由内容撑起来的，你想精确控制某个子元素占多少比例、跨几行几列，就得靠flex-grow、flex-shrink、flex-basis这三个兄弟反复计算，内容一多一少就很容易挤变形。

grid的思路完全反过来，它是“以容器为主”。我可以先把页面分成一个三行四列的网格，然后告诉每一个元素“你放在第几行第几列”，剩下的都不管了。这种声明式写法对复杂布局来说，维护成本低得多。

所以我的选型标准是：

• 一维排列（导航、按钮组、列表项、垂直居中等）：用flex
• 二维结构（整页布局、卡片网格、仪表盘面板）：用grid
• 简单的两栏/三栏带间距：flex能轻松搞定，没必要上grid
• 子元素宽度自适应且需要等分：flex的flex: 1最顺手
• 建栅格系统且宽度单位复杂：grid的repeat()和minmax()完胜

我见过不少同事把flex用成“万能工具箱”，做什么都套一层display: flex，结果嵌套层级深得离谱，改起来要命。布局选型就像选工具，你说螺丝刀能当锤子用吗？能，但砸两下就废了。

1.3 原子化CSS：布局被“拆碎”之后，反而更清晰了

最近一两年，原子化CSS（Atomic CSS）在社区里热度很高，热搜词里也出现了“原子性css”以及“css动效样式库”这些词，说明大家已经不满足于“能用”，而是开始追求“高效复用”。

原子化CSS的核心思路是：把布局中反复出现的属性拆成一个个独立工具类。比如flex对应一个类，justify-content: center对应一个类，padding: 16px对应一个类。用的时候组合类名，而不是反复写重复的CSS规则。

一开始我是拒绝的，觉得这样写HTML会很丑，类名堆积如山。直到我维护过一个6万行CSS的项目——每次改个间距都要全局搜索，生怕动到别的模块——我才意识到传统写法也不一定好维护。

真正让我转变的是一次性能优化。某个活动页用原子化CSS重构后，CSS文件从80KB降到了23KB，因为公共的工具类只存在一份，页面里全是组合引用。而且布局调整变得极快，不用去翻几十行CSS去找那个该死的margin-left到底写在哪个类里。

当然原子化CSS也不是银弹。布局复杂、嵌套深的场景，纯靠原子类会非常难读懂，你看到一行flex items-center justify-between px-4 py-3，很难在脑子里立刻还原出整体结构。所以我的实践是：大骨架用传统的语义化CSS，模块内部的排列用原子类，两者结合，既好读又高效。

2. 核心布局方案解析

2.1 Flex布局：最常用的“一维排列终极方案”

flex的全称是flexible box，弹性盒模型。为什么它好用？因为它把CSS历史上最痛苦的对齐问题一次性解决了。在flex出现之前，垂直居中是CSS圈的一个梗，面试官必问，开发者必跪。flex一出来，天下苦秦久矣的场面终于结束了。

flex布局的核心就两个维度：主轴（main axis）和交叉轴（cross axis）。默认主轴是水平方向（row），交叉轴是垂直方向（column），你可以通过flex-direction把它俩对调。

我在《CSS flex布局子元素宽度自适应》这个热搜词上多说两句。很多新手搞不清楚子元素宽度怎么自适应，其实就是三兄弟配合的事：

• flex-grow：空间有剩余时，按比例放大
• flex-shrink：空间不足时，按比例缩小
• flex-basis：初始宽度，等价于width的“布局优先值”

我一般推荐这样写：

css复制/* 等分子元素 */
.child {
  flex: 1;
}

/* 左侧固定200px，右侧自适应 */
.left {
  flex: 0 0 200px;
}
.right {
  flex: 1 1 auto;
}

flex: 1是flex: 1 1 0的简写，意思是初始宽度为0，有空间就平均分。这个写法的好处是不用关心子元素本身的内容宽度，彻底等分。但有个小坑要注意：子元素里的文本如果太长，flex默认min-width: auto，子元素可能被内容撑破。这时候给子元素加个min-width: 0就能解决。

2.2 Grid布局：复杂二维布局的“降维打击”

grid最出彩的一点是二维控制。你要做三行四列带间距的复杂布局，grid只用几行代码搞定，flex要做多少嵌套？

我第一次感受到grid的威力，是做一个数据可视化大屏。页面里有12个面板，每个面板位置、大小都不同，有的跨两行，有的跨三列，用flex布局我得套四五层容器，代码量惊人且改一处崩三处。用grid重写之后，整个结构一目了然。

css复制.dashboard {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(6, auto);
  gap: 16px;
}

.panel-1 {
  grid-column: 1 / 3;
  grid-row: 1 / 4;
}
.panel-2 {
  grid-column: 3 / 5;
  grid-row: 1 / 2;
}

gap属性在热搜里出现了，这个属性其实是grid-gap的升级写法，现在flex也能用。它的作用就是设置行列间距。以前要挨个给子元素设margin，然后再用:last-child去掉多余的间距，麻烦得要命，现在一行搞定。

grid还有两个杀手锏，我几乎天天用：

一个是minmax()函数。比如grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))，这样写出来的栅格系统在宽屏下自动多分几列，窄屏下自动减少列数，响应式完全不需要写媒体查询。

另一个是grid-template-areas。这个属性可以给网格区域命名，布局结构直接写在CSS里，跟看设计图一样直观。

css复制.layout {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: 
    "header header"
    "sidebar content"
    "footer footer";
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }

这个写法的好处是，你一眼就能在CSS里看到整个页面结构是“上中下、左宽右窄”还是“左窄右宽”，改结构直接改grid-template-areas里的排列方式，完全不用动HTML。热词里提到的“grid布局阮一峰”应该是指阮一峰老师的Grid教程，那个教程确实经典，我当年也是靠它入门的。

2.3 流式布局与响应式方案：从固定宽度到弹性网格

流式布局（在热搜里对应“流式布局面板”和“移动端布局媒体查询”）是响应式设计的基础思想之一，核心是用百分比或视口单位代替固定像素，让内容随着屏幕宽度流动调整。

我见过很多新手做流式布局，一上来就是width: 100%铺满，然后发现里面的图片变形了。真正的流式布局要做到以下几点：

• 容器使用max-width而不是width限定最大宽度，让它在窄屏下自动收缩
• 图片使用max-width: 100%，让图片跟着容器缩放
• 字体单位用rem或em，配合html { font-size: 62.5% }的技巧，方便换算
• 间距用clamp()函数，比如padding: clamp(12px, 3vw, 32px)，让小屏间距小、大屏间距大

媒体查询是响应式的进阶手段。它有断点（breakpoint）的概念，主流断点一般是576px、768px、992px、1200px，分别对应手机横屏、平板竖屏、平板横屏、桌面。

我个人的建议是“移动优先”，也就是先写最小屏幕的样式，然后用@media (min-width: ...)逐级往上加。这样写的好处是，移动端的代码是基础，桌面端的代码是增强，不会出现桌面端正常、移动端样式覆盖来覆盖去覆盖不干净的情况。

举一个我最近在做的移动端项目实例：

css复制/* 移动端默认单列布局 */
.content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

/* 平板：两列 */
@media (min-width: 768px) {
  .content {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

/* 桌面：三列 */
@media (min-width: 1200px) {
  .content {
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }
}

这个方案比百分比流式布局更进一步：百分比在中间宽度区间容易出现“半宽不宽”的尴尬状态，grid配合媒体查询可以精准控制断点，体验好很多。

2.4 小程序布局的特殊性：苹果底部兼容与文本方向

热搜里有一条“小程序苹果底部兼容css”，这个我太有感触了。小程序页面在iPhone X及以后机型上，底部有一个Home指示条，如果不做适配，页面的固定底部按钮会被Home指示条挡住，怎么点都点不到。

解决办法是利用env(safe-area-inset-bottom)：

css复制.bottom-bar {
  padding-bottom: env(safe-area-inset-bottom);
}

但这里有个坑：env()需要配合viewport-fit=cover才能生效，而且有些安卓webview不支持。所以稳妥的写法是：

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

还有热搜里的“css文字竖着排列”，这个其实不难，用writing-mode属性就行。我之前做企业文化页，需要用竖排文字展示古诗词，效果非常惊艳：

css复制.vertical-text {
  writing-mode: vertical-rl; /* 从上到下，从右到左 */
}

如果只是单行文字竖排，用writing-mode: vertical-rl就行；但如果要逐字竖排，还得配合text-orientation: upright。我实测下来，中文字体的竖排效果很好，英文字体会有一点旋转，需要额外处理。

3. 实操过程与核心环节实现

3.1 登录页左右布局：从设计稿到完整代码

热搜里有“登录页左右布局背景图”，这算是一个很典型的布局需求：左边是品牌展示区，右侧是登录表单。我拿这个案例来完整讲解布局实操的思考过程。

首先拆解需求：桌面端左宽右窄，比例大概是6:4；左侧是一张大图背景加半透明遮罩，右侧是表单。移动端要缩成一列，背景图上移或者隐藏，表单全屏展示。

第一步是搭骨架：

html复制<div class="login-wrapper">
  <div class="login-brand">品牌区</div>
  <div class="login-form">表单区</div>
</div>

第二步是写桌面端样式：

css复制.login-wrapper {
  display: grid;
  grid-template-columns: 6fr 4fr;
  min-height: 100vh;
}

.login-brand {
  background: url('../images/brand-bg.jpg') center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-brand::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
}

.login-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px;
}

这里用了一个::before伪元素做遮罩，免得直接改背景图透明度把整张图搞灰了。

第三步是移动端适配：

css复制@media (max-width: 768px) {
  .login-wrapper {
    grid-template-columns: 1fr;
  }
  .login-brand {
    min-height: 30vh;
  }
  .login-form {
    min-height: 70vh;
  }
}

这个方案里有个我踩过的坑：如果login-brand模块里用了position: absolute的遮罩，需要在.login-brand上设置position: relative，否则遮罩会跑出去盖住整个页面。这个坑我前几年带项目的时候犯过一次，测试妹子截图发群里，整个页面都是半透明的黑，我还以为是图没加载出来。

3.2 利用gap属性优雅处理间距，告别margin连环坑

我要单独聊聊gap，因为热搜里单独出现了“css gap”，说明这是很多人关心又容易忽略的点。

以前做卡片列表，每个卡片之间要有20px间距。常规做法是每个卡片margin-bottom: 20px，然后再用:last-child { margin-bottom: 0; }去尾，或者用相邻兄弟选择器+。这些做法虽然能用，但问题不少：一个是最后一个元素的间距总要特殊照顾，另一个是如果你用flex换行了，纵向间距完全没法控制。

gap的诞生把这个问题彻底解决。无论flex还是grid，直接在容器上写gap: 20px，让浏览器自动处理所有间距，不用管首尾和换行。

我自己的项目里，几乎所有列表场景都用上了gap：

css复制.card-list {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.card-item {
  flex: 1 1 300px;
}

这个方案的好处是：不管一排放得下4个还是3个卡片，间距永远是一样的24px，不会出现“一行最后一个卡片紧贴容器边缘”的尴尬。而且我不会再为“间距到底属于父级还是子级”这种问题纠结半天。

有一点要注意：gap属性在较老版本的Safari上不生效（Safari 14.0以下对flex的gap支持不稳定）。做国内项目的时候，如果用户iOS版本偏低，建议在容器上加个备用方案，比如给子元素设margin-right，然后@media查询做兼容。

3.3 文本处理：文字溢出省略、渐变、垂直排列

热搜里“css超出显示...”指的就是文本溢出的省略号处理，这个看似简单的需求其实暗藏不少细节。最基础的三件套：

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

这只是单行省略。多行省略有两种思路，一种是-webkit-line-clamp方案，特别简洁：

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

实测下来这个方案对现代浏览器支持很好，唯一的坑是display: -webkit-box会被用来做flex布局时产生干扰，需要留意作用范围。

另一种是纯后台截断字符串的方法，对前端来说反而更可控。我的建议是：如果是固定的摘要文本，后端直接截断最可靠；如果是会跳行渲染的内容，用-webkit-line-clamp更省心。在正文区域使用两种形式都有踩坑的体验，我建议优先-webkit-line-clamp，因为后台截断经常会截出半个表情符号。

“css字体渐变”是我的压轴戏之一。效果是将文字渲染成渐变色，模拟那种高级大标题的视觉效果。实现方式是用background-clip: text：

css复制.gradient-text {
  background: linear-gradient(135deg, #ff6b6b, #4ecdc4);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

第一眼看这个写法可能会觉得奇怪：为什么字体的颜色会是透明的？原理很简单，先把背景画出来，然后通过background-clip: text把背景裁剪成文字的形状，最后把文字的颜色设为透明，这样背景透过文字显示出来，就形成渐变效果了。这个过程有一种“用文字当蒙版”的感觉，理解了这一层，就不会出奇奇怪怪的bug。

另一个进阶技巧是“css涟漪光圈扩散”，热搜里也有。它可能不算是纯布局能力，但是配合布局非常有用。比如登录按钮的加载状态，在按钮背景画一个涟漪，又比如卡片点击时的扩散反馈。我用box-shadow配合animation实现过：

css复制ripple-btn {
  position: relative;
  overflow: hidden;
}
.ripple-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.4);
  transform: scale(0);
  border-radius: 50%;
  opacity: 0;
  transition: transform 0.6s, opacity 0.6s;
}

.ripple-btn:active::after {
  transform: scale(2);
  opacity: 1;
  transition: 0s;
}

这个细节直接让点击体验提升了一个档次。很多项目做完了，调整之余加上这个小动效，点起来就是顺手很多。

3.4 CSS mask与动效样式库：布局的“妆点层”

热搜里还有“css mask”，这个技术在很多高级视觉场景里非常有用。mask的作用是给元素加一个蒙版，蒙版的透明区域会隐藏元素对应的部分，非透明区域才显示。

举个例子，做一个渐变淡出的列表底部：

css复制.list-fade {
  -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

这样列表滚动到最底部时，内容并不是生硬地截断，而是像融入了背景一样柔和地消失。类似的效果在网易云音乐、小红书这类产品里经常看到。

至于“css动效样式库”和“css动画效果网站”，这类资源可以大幅提升布局开发的效率。我常用的是：

• Animate.css：适合给元素加进入/退出的关键帧动画，几乎零成本
• Hover.css：适合做按钮、卡片的hover反馈，日常项目够用
• Magic Animations：效果比较花哨，适合做某些品牌展示页面
• Motion One：面向现代前端的动画库，配合框架很舒适

但这些动效库的问题是不能直接套到“布局结构”上。动画只能给“已经存在的元素”加过渡效果，比如一个卡片从右滑入，需要先把卡片定位到右侧，再动画移动到最终位置。大多数布局动画的坑都出在这里：元素当前的位置是display: none，或者是被v-if直接移出DOM，动画根本不触发。正确做法是先让元素渲染到页面里，再用类名切换触发动画。

4. 常见问题与排查技巧实录

4.1 布局重叠：为什么我的元素跑到别人下面去了

热搜里“布局重叠”是个高频问题。常见的重叠原因有三个：

第一是定位（position）冲突。某个元素设置了position: absolute或relative，但没有给父级加position: relative，就会脱离文档流重叠到别的地方去。排查方法是在浏览器DevTools里选中元素，看它的position和top/left是谁在控制。我通常的做法是先把定位属性全部去掉，确认基础布局正常，再加回来。

第二是负margin。负margin能实现某些特殊效果，比如margin-top: -20px让元素上移。但如果对负margin的计算不精确，就会出现重叠。我的建议是：如果是做响应式栅格，尽量用gap和flex/grid特性，不要再手动负margin。

第三是float没清。现在还在用float做布局的情况不多了，但处理正文中的图文混排时还是会遇到。float元素没有清除浮动会影响父级高度，导致后面的内容顶上去重叠。解决方案是给容器加overflow: hidden或display: flow-root。

排查重叠问题时我会按一个固定顺序走：第一步DevTools选中重叠元素，看它有没有position属性；第二步看父级有没有position；第三步看margin有没有负值；第四步看有没有float；第五步看有没有transform导致新的层叠上下文。这套流程基本能覆盖90%的重叠问题，效率很高。

4.2 子元素宽度自适应：flex: 1和min-width的恩怨

热词里有一条“css flex布局子元素宽度自适应”，我前面提到过，这里再展开它的坑。

flex子元素宽度自适应最常见的问题：子元素设了flex: 1，但实际宽度超过了分配的空间，把容器撑破了。原因是flex子项有一个隐形的min-width: auto，它规定了子元素的宽度不能小于其内容的最小宽度。如果内容里有很长的URL、很长的英文单词，就会强制撑开。

解决办法是给子元素加min-width: 0：

css复制.flex-child {
  flex: 1;
  min-width: 0;
}

我给团队定了一个经验规则：使用flex自适应布局时，没有特殊情况全部带上min-width: 0。多打一行字，省下一堆排查时间的成本是很值的。

同理，grid子元素也有类似的问题，给grid子项加min-width: 0一样管用。

4.3 小程序苹果底部兼容与文本方向

这部分前面讲过一部分，再补充一个实际排查案例。我们的电商小程序上线前测试，运营用iPhone 12 Pro Max测试时发现，结算页的“提交订单”按钮被底部横条挡住了。当时我们已经加了env(safe-area-inset-bottom)，但还是失效。

排查后发现两个问题：一个是我们的小程序页面没有设置viewport-fit=cover，另一个是按钮本身在自定义tabBar组件里，自定义组件需要单独设置padding。最后我改成在全局app.wxss里给page设padding-bottom: env(safe-area-inset-bottom)，在tabBar容器里再加一层兜底padding，问题才彻底解决。

我的心得是：凡是固定定位在底部的元素，都要考虑安全区；凡是安全区适配，都要设置双备份值（固定px + env）。

4.4 布局问题排查速查表

我把这些年布局排查的常用场景整理成一张速查表，方便直接对照：

4.5 性能优化：布局引发的重排与重绘

最后一定要提布局和性能的关系。布局操作（Layout）是最昂贵的浏览器渲染操作之一。我见过很多页面卡顿，不是动画问题，而是频繁修改布局属性导致浏览器不断重排。

优化经验有三点：

第一点，修改元素的尺寸和位置尽量用transform和opacity，不要直接改top/left/width/height。transform只触发合成，不触发重排和重绘，性能差距在低端手机上非常明显。

第二点，批量修改样式时先把元素脱离文档流，或者先display: none，改完再显示。尤其是列表渲染，一次性append大量DOM时，最好用文档片段（DocumentFragment）或虚拟DOM层面处理。

第三点，flex和grid布局在变更时确实有少量额外计算，但对于现代浏览器的优化程度来说，这个差距可以忽略。真正拖慢布局的是那些频繁读写布局属性的JS循环，比如在循环里读offsetHeight再改样式，会导致强制同步布局，这是性能大坑。

我实际测过一个小型列表（1000项），用transform做滚动手感非常丝滑，而直接改top值帧率掉到30帧左右。在复杂管理后台里，差别更明显。

5. 工具与资源推荐

5.1 布局调试三件套

做布局离不开调试工具，我把自己的标配列出来，都是免费好用的。

浏览器DevTools是最核心的工具，它有三个功能我天天用：一个是“选择元素后查看父级链”——可以快速理解当前元素处于哪一层容器中；另一个是“Inspect时直接改class”——随时往元素上塞测试类；还有一个是“Rendering面板里的Paint Flashing和Layout Shift Regions”——用来检测重绘和布局抖动区域。

另一个是CSS Grid和Flexbox的视图形提示。DevTools里选中grid容器会显示网格线/网格轨道，选中flex容器会显示flex线和空间分布，这对排查栅格错位非常实用。我经常让新手把这个功能开着，看看自己的布局到底被浏览器理解成了什么样子。

还有一个是响应式设计模式，就是Chrome DevTools左上角的设备工具栏。选一个折叠屏或者小屏设备尺寸，快速看布局是否正常，这个太重要了，尤其是移动端。

5.2 学习路径建议

如果你的CSS布局还停留在“能跑就行”的阶段，那么我的建议是：

• 花一周时间系统性学一遍 Flexbox，不用背所有属性，但至少要清楚主轴、交叉轴以及flex-grow/shrink/basis的计算关系
• 然后用实际项目里的一个模块重写布局，验证自己的理解
• 再花一周时间学Grid，重点练grid-template-areas和repeat()这两个API
• 之后拿一整个页面（比如登录页或仪表盘）用Grid重写

我不推荐只看教程不动手。阮一峰老师那篇Grid教程写得极好，我收藏了好几年，但真正掌握还是在某个项目里用Grid做完一整个控制台后台之后。动手是唯一的捷径。

对一些框架，比如Tailwind CSS，它的前置类名（flex、grid、justify-between）容易让人迷上“快速写类名”，但我还是建议先掌握原生布局能力再上工具。否则一旦框架升级、类名变更，连排查的底气都没有。

5.3 常用CSS特性速查

我个人在实际操作中的体会是：CSS布局最大的障碍不是属性记不住，而是“不知道什么时候该换方案”。用flex硬撑拼网格，就跟用砍刀切西瓜一样，能切，但刀会钝。学会layout方案之后，再去关注细节才能事半功倍。

最后再分享一个小技巧：每次拿到一个新页面，我先用浏览器截图工具截一张整个页面的全貌图，把设计稿和实际渲染结果放在一起对着看，一眼就能发现哪里有偏移、哪里宽了、哪里窄了。这个方法帮我省下了大量逐块排查的时间。

CSS布局看起来简单，想要真正做到“稳定、高效、易维护”，确实需要系统积累。希望这篇内容能帮正在跟div和定位较劲的同学们少走些弯路。