CSS3基础语法与盒模型：从底层原理到实战排查全解析

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

1.1 为什么CSS3基础语法和盒模型是前端绕不过去的两道坎

我见过太多人学前端，HTML两天就上手了，觉得不就是一堆标签嘛，真正开始写CSS的时候才发现事情没那么简单。一个div死活居中不了，两个元素间距怎么调都不对，border加上去布局直接崩掉……这些问题十有八九都出在对CSS基础语法和盒模型的理解上。

CSS3作为现在前端样式方案的绝对主力，已经不只是“给页面换个颜色”那么简单了。flex、grid、动画、过渡、媒体查询这些能力，全部建立在基础语法之上。而盒模型，是所有CSS布局的地基——你写的每一个width、height、padding、border、margin，本质上都是在操纵盒子。如果你对盒模型的理解停留在“知道有content、padding、border、margin这四个东西”的层面，那遇到复杂布局基本就是靠猜，靠试，靠运气。

这篇文章适合谁？三种人。第一种是刚入门前端、正在啃CSS基础语法的小白，这篇文章能帮你把散落的知识点串成体系。第二种是写过一阵子页面、但经常在布局上翻车的开发者，盒模型的坑这篇文章会一一帮你排掉。第三种是想系统梳理CSS知识、准备面试的人，盒模型是前端面试的高频考点，这篇文章能帮你把细节讲透。

简单说，理解了CSS3基础语法，你就知道样式该怎么写、往哪儿写、为什么这么写。理解了盒模型，你就知道页面为什么长这样、布局为什么这样排、浏览器到底是怎么计算元素占位的。这两块内容，是后续所有CSS进阶知识的基石。

1.2 从CSS的发展脉络看为什么现在要学CSS3

聊CSS3之前，先花两分钟看看CSS这个语言是怎么走过来的。CSS1是1996年发布的第一版规范，定义了最基础的选择器、字体、颜色、背景、盒模型这些概念。CSS2在1998年发布，引入了定位、浮动、z-index、媒体类型这些能力，当时浏览器大战正酣，各大浏览器对规范的支持各搞一套，开发者被兼容性问题折磨得不轻。CSS2.1是2011年才定稿的修订版，是CSS2的“可执行版本”，也是很长一段时间内前端开发的基准。

CSS3和之前最大的不同，是它不再是单一的规范，而是被拆分成了一堆独立的模块。选择器、盒模型、背景、边框、动画、过渡、flex、grid……每个模块都有自己的版本号和进度，浏览器可以按模块逐步实现。这就是为什么你在看CSS3相关文档时，经常看到“该特性需要前缀”或“部分浏览器不支持”的提示——因为CSS3本来就不是一个一次性全部落地的版本，而是模块化持续演进的生态。

这个演进方式对开发者来说是好事也是挑战。好事是，新特性可以快速在浏览器里落地，flex、grid这些强大的布局方案陆续普及；挑战是，知识点变得零散，学习资料五花八门，很多人在学到一半时容易迷失在碎片化里。也正因为如此，先打好CSS3基础语法和盒模型的底子，之后再接触各种模块化新特性时，才能有条不紊地逐个攻破。

1.3 我的学习路线建议：语法先行，盒模型随后

很多人学CSS喜欢直接从效果入手——想要一个hover变色就搜“css hover”，想要居中就搜“css居中”，这种“面向搜索引擎编程”的方式在解决单点问题时效率很高，但长期来看很容易造成知识结构松散。遇到一个没搜过的新问题，就完全不知道从哪里下手。

我的建议是先花一周左右把基础语法过一遍，包括引入方式、选择器、优先级、继承、单位、颜色、字体、背景这些最基础的内容，再花一周左右把盒模型彻底吃透，包括标准盒模型与怪异盒模型的区别、box-sizing的作用、margin折叠、padding对尺寸的影响、border的细节、overflow的使用。这两块基础打牢之后，你再去看flex、grid、动画、响应式这些进阶内容，会顺畅得多。

我自己带过不少新人，凡是CSS学得快的，几乎都是基础语法和盒模型理解得透的人。相反，那些整天在flex和grid里面打转、却连margin和padding都分不清该用哪个的人，往往写出来的页面一碰边界情况就散架。这不是说flex和grid不重要，而是说没有稳的地基，上层建筑再漂亮也经不起推敲。

2. CSS3核心基础语法解析

2.1 CSS的三种引入方式与最佳实践

CSS要起作用，先得让样式和HTML建立联系。常用的方式有三种：行内样式、内嵌样式、外部样式表。

行内样式，就是直接写在元素的style属性里，比如<div style="color: red;">。这种方式优先级最高，但可维护性最差。工作中几乎不会这么写，除非是某些极端情况下需要动态覆盖样式，或者邮件模板这种特殊场景。

内嵌样式，是把CSS写在HTML文件head区域的<style>标签里。这种方式在写单页demo或者配合服务端模板渲染时比较方便，但项目大了样式和结构混在一起，依然很难维护。

外部样式表，是通过<link>标签引入独立的.css文件，这也是生产环境中最推荐的方式。比如<link rel="stylesheet" href="style.css">，这种方式的好处是样式和结构完全分离，一个样式文件可以供多个页面复用，浏览器还能对CSS文件做缓存，不用每次打开页面都重复下载。

实践中的通用做法是：项目里用外部样式表为主，配合CSS预处理器（如Sass、Less）做变量和嵌套，这样代码结构更清晰，后期维护成本更低。内嵌样式偶尔用于首屏关键CSS的加载优化，行内样式基本只在特殊场景使用。搞清楚三种方式的区别，你才算真正入了CSS基础语法的门。

2.2 选择器：如何精准命中你想要的元素

选择器是CSS基础语法中最重要的部分之一，它的作用就是告诉浏览器“我要给哪些元素应用这些样式”。CSS3提供了非常丰富的选择器体系，按功能可以分为几大类。

基础选择器包括标签选择器（如div、p）、类选择器（如.box）、ID选择器（如#header）、通配选择器（*）。标签选择器适合做全局的基础样式重置，类选择器是最常用的、可以复用的选择器，ID选择器只能用于页面唯一的元素，通配选择器因为性能开销和粒度太粗，实际项目中很少直接使用。

组合选择器包括后代选择器（如.container p，选中container内部所有p元素）、子元素选择器（如.container > p，只选中直接子元素）、相邻兄弟选择器（如h2 + p，选中紧跟在h2后面的p）、通用兄弟选择器（如h2 ~ p，选中h2后面所有的p）。这套组合选择器做复杂的页面结构定位时非常有用，可以减少很多额外的class。

CSS3还引入了大量伪类和伪元素选择器。伪类方面，:hover、:active、:focus是交互相关的，:first-child、:last-child、:nth-child(n)是结构相关的，:not()可以排除某些元素，:target可以配合锚点做选项卡效果。伪元素方面，::before和::after允许你在元素内容前后插入额外内容，配合content属性可以实现很多想不到的效果，比如图标、装饰线、气泡角标等等。

选择器写得好不好，直接决定了CSS代码的健壮性和可维护性。我的建议是优先用类选择器，保持选择器的层级尽量浅，避免写超长链式的选择器如#header .nav ul li a之类，这种选择器不仅性能差，而且耦合度高，改动一个地方很容易牵连到其他样式。

2.3 层叠、优先级与继承：样式冲突时的裁决规则

CSS全称是Cascading Style Sheets，Cascading就是“层叠”的意思。当多个规则作用于同一个元素时，浏览器需要一套裁决机制来决定最终生效的是哪一条。理解这套机制，是理解CSS基础语法的关键。

优先级（Specificity）的计算规则是这样的：ID选择器计为100，类选择器、伪类选择器、属性选择器计为10，元素选择器、伪元素选择器计为1，通配选择器计为0。!important是最高级别的标记，可以覆盖普通规则，但滥用会导致样式难以维护，一般只建议在覆盖第三方库样式或临时修复紧急bug时使用。

我之前用这种方式跟新人解释优先级，很多人还是有点懵。换一种说法可能更清晰：比如.nav .item是10+10=20，#nav .item是100+10=110，所以后者优先级更高。如果优先级相同，那么后写的规则覆盖先写的规则。内联样式优先级更高，是排在ID选择器之上的；!important则凌驾于一切普通规则之上。

继承是另一个容易忽略的概念。有些CSS属性具有继承性，比如color、font-family、font-size、line-height等，父元素设置了这些属性，子元素会自动继承。而另一些属性，比如padding、margin、border、width、height、background等，默认不继承。设置某个元素的背景色并不会自动传播到子元素里，除非子元素本身没设置背景色且出现了透明背景的效果。不过即便背景色不继承，子元素会默认透明从而透出父元素的背景，所以视觉上看起来像是继承了，实际上不是。

理解层叠、优先级、继承这三个概念，最大的意义在于，当你写了很多样式、某些效果就是出不来的时候，你能有一套系统性的排查思路，而不是靠肉眼去比对代码找差异。

2.4 CSS3单位体系：px、em、rem、百分比到底怎么选

CSS3的单位体系是非常基础语法的一部分，也是很多新手困惑的地方。

px是绝对单位，1px就是屏幕上1个物理像素的CSS换算值，稳定、可预期，使用最广泛。em是相对单位，相对于当前元素的font-size，如果当前元素没有显式设置font-size，就逐层向上继承。em的问题在于它可能受到多层嵌套的影响，一层套一层，很容易出现“em放大效应”。

rem是相对于html根元素的font-size，不受中间层级的影响，所以拿来处理全站字体缩放、响应式布局非常合适。百分比单位在设置width、height时相对于父元素的对应尺寸，在设置font-size时相对于父元素的font-size，在设置padding、margin时相对于父元素的宽度（注意，不是高度），在设置line-height时相对于自身的font-size，这个差异相当隐蔽，很多布局问题都出在这上面。

视口单位方面，vw是视口宽度的1%，vh是视口高度的1%，vmin是两者中较小值的1%，vmax是两者中较大值的1%。这套单位在做全屏背景、响应式字号、某些特殊布局时非常好用。

我的选择建议是：字体和间距优先用rem做全局统一，局部相对尺寸用em，简单稳定的场景直接用px，响应式布局中充分结合百分比和视口单位。工具千万个，搞清楚它们各自的相对基准是什么，才能在不同的场景里选对。

3. 盒模型：布局世界的底层逻辑

3.1 标准盒模型与怪异盒模型的本质差异

盒模型描述的是CSS如何计算一个元素占据的空间。标准盒模型（W3C盒模型）下，我们设置的width和height只代表内容区content的尺寸，padding、border是在这个尺寸之外额外增加的。也就是说，一个width为200px、padding为20px、border为1px的元素，实际占用的水平宽度是200+20+20+1+1=242px。

怪异盒模型（IE盒模型）下，width和height代表的是content+padding+border的总尺寸。同样width为200px、padding为20px、border为1px，内容区实际可用的宽度是200-20-20-1-1=158px。这就导致了同样一段CSS在标准模式和怪异模式下显示出来的宽度完全不同——这正是早年前端开发者最头疼的浏览器兼容性问题之一。

那为什么叫“怪异”模型？因为这种计算方式最早是IE浏览器自己搞出来的，和W3C标准不一致，所以被称为“怪异模式”。但随着时间推移，大家慢慢发现怪异模型其实有自己的优势——它在设定元素总宽度时更直观，不用在脑子里做加减法。所以后来CSS引入了box-sizing属性，让你可以主动选择。

现代浏览器默认用的是标准盒模型，也就是box-sizing的默认值是content-box。CSS3的box-sizing属性允许你指定border-box来使用怪异盒模型。实际开发中，绝大多数团队都会设置全局* { box-sizing: border-box; }，这样写布局时不用天天算尺寸，心智负担小很多。

3.2 box-sizing: border-box为什么是“救命稻草”

先看一个非常实际的场景。你要做一个两栏布局，左栏占50%，右栏占50%，然后给每个栏加10px的padding和1px的border。如果使用标准盒模型，左栏实际占用宽度是50%的宽度加上两侧的padding和border，右栏也是，两个加起来总宽度超过100%，结果就是第二栏被挤到下一行——你的两栏布局就崩了。

解决这个问题，最经典的方式就是border-box。把box-sizing设为border-box后，一个元素设定的width是多少，它占的总宽度就是多少，padding和border统统从宽度内部“挤”出来，不会外扩。这样左右两栏各占50%，加上padding和border也不会超出父容器。就是这个差别，让它在实际开发中变成了名副其实的“救命稻草”。

在具体操作上，建议把它做成全局默认。方式很简单，在CSS文件最前面写一段reset代码：

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

加上::before和::after，是为了让使用伪元素做的装饰性内容也遵循相同的盒模型规则。可能有人会担心这样改了之后影响已有的布局——确实会，如果你是在一个已经写了很多CSS的旧项目上加这段代码，那就要小心了，最好先充分测试，因为所有元素的尺寸计算方式都会改变。但如果你是在新项目里开始写CSS，强烈建议一开始就加上这句话，后期会省掉非常多尺寸计算的烦恼。

3.3 content、padding、border、margin各司其职

盒模型由四部分组成：content（内容区）、padding（内边距）、border（边框）、margin（外边距）。虽然统称为“盒模型四件套”，但它们各自的职责和影响范围完全不同。

content是元素内容的呈现区域，文本、图片、子元素都在这个区域里排布。width和height在content-box模式下就是设置content的尺寸。

padding是content和border之间的内边距，作用是给内容制造呼吸空间，防止文字直接“贴”在边框上。它有四个方向的子属性：padding-top、padding-right、padding-bottom、padding-left，也可以简写成padding: 10px 20px 30px 40px这样从上开始顺时针的写法。当只写两个值时，表示上下和左右；写三个值时，表示上、左右、下。padding设置的背景色会和content一起呈现，因为背景色默认就是从padding区域开始涂的。

border是盒子的边框，有三要素：宽度、样式、颜色。宽度border-width决定边框粗细，样式border-style必须设置成solid、dashed、dotted这些值（默认是none），否则边框不显示，颜色border-color决定边框颜色。border同样支持top、right、bottom、left四个方向的独立设置。

margin是盒子外部的间距，作用是控制元素与其他元素之间的空隙。它是透明的，不会显示背景色，也因为这一点，它和padding的“视觉感受”经常被新手混淆——padding是盒子内部的空间，背景会覆盖；margin是盒子外部的空间，背景不覆盖。

我常说一个比喻：盒模型就像一个带包装的商品。content是商品本身，padding是包装里的缓冲泡沫，border是外包装箱子的壁，margin是箱子和其他箱子之间留的过道。这个比喻虽然简单，但能帮你快速判断某个间距问题到底该用padding还是margin——你想让元素“内部”的空间变大，用padding；你想让元素和邻居“拉开距离”，用margin。

3.4 margin折叠：前端新手最容易忽视的坑

margin折叠（margin collapsing）是盒模型里一个非常经典的“反直觉”现象。简单说，两个垂直方向的margin相遇时，它们不会相加，而是取其中的较大值作为最终间距。具体触发条件有三个。

第一种情况是相邻兄弟元素之间的垂直margin折叠。第一个元素设置margin-bottom: 30px，第二个元素设置margin-top: 20px，你可能会以为这两个元素之间的间距是50px，但实际上浏览器只会取较大值max(30, 20)=30px。

第二种是父元素和第一个或最后一个子元素之间的margin折叠。如果子元素设置margin-top: 20px，且父元素没有padding-top或border-top来“隔断”，这个margin可能会“穿透”父元素的边界，导致父元素整体下移，而不是子元素在父元素内部下移。

第三种是空元素的上下margin折叠。一个没有content、padding、border、height的空元素，它的margin-top和margin-bottom也会发生折叠。

那这个坑怎么破？最简单的方式是不要依赖margin来撑开父元素内部的空间，而是在需要间距时改用padding，或者给父元素加padding-top/border-top来阻断折叠，也可以给父元素设置overflow: hidden。还有一个比较彻底的方式是使用flex或grid布局，在flex或者grid容器内，margin折叠的问题基本不会出现，这也是现代布局方式带来的一个额外好处。

我印象很深的一次踩坑是，一个兄弟元素明明设置了margin-top，页面怎么刷新都不生效，检查了很久才发现是前一个兄弟元素的margin-bottom在“捣乱”，折叠取的是较大值。所以以后遇到“margin好像没生效”的问题，第一反应就要想到margin折叠。

4. 盒模型核心属性的实操细节

4.1 padding和width的“此消彼长”关系

padding对元素尺寸的影响，在标准盒模型和border-box模型下表现完全不同。标准盒模型下，你给元素设置width: 200px，再设置padding: 20px，这个元素的实际总宽度就是240px。但如果你用的是border-box，width始终是200px，padding只会压缩content区域。

这在做“两端对齐的按钮”时尤其明显。比如一行有两个按钮，各占50%，按钮内部需要左右留白。如果你用标准盒模型，直接设width: 50%再设padding，两个按钮加起来的实际宽度就超出了容器宽度，第二个按钮会被挤下去。用border-box就不会有这个问题，50%的宽度各占一半，padding从内部“扣”掉，布局稳稳当当。

后来我学会了一个通用经验：在写“宽度固定但需要内边距”的组件时，一律用border-box，这样宽度是多少就是多少，不用在CSS里反复计算“宽度应该减掉多少padding”。

4.2 border的隐藏细节：圆角、阴影与自定义边框

border不只是“画个框”那么简单。CSS3给border增加了大量新能力，圆角border-radius就是其中之一。但border-radius有一个容易被忽略的细节：它设置的是半径，不只是一个数值，可以写成border-radius: 10px 20px 30px 40px分别控制左上、右上、右下、左下四个角，也可以写成border-radius: 50%来做圆形。百分比的半径是相对元素宽高计算的，所以给一个正方形元素设置50%的border-radius，它就变成圆形了；而给一个矩形设置50%，会得到椭圆形。

阴影box-shadow是另一个高频使用的border相关能力。box-shadow的语法是box-shadow: offset-x offset-y blur spread color，分别对应水平偏移、垂直偏移、模糊半径、扩散半径和颜色。水平偏移和垂直偏移容易理解；模糊半径越大，阴影边缘越柔和；扩散半径是正值时阴影扩大，负值时阴影缩小。有一个细节要注意：box-shadow并不占据布局空间，它不会影响元素的位置和尺寸，只会投射出视觉上的阴影效果。这意味着如果你想让阴影“悬空”在元素下方，通过调整offset-x和offset-y就可以实现不同的立体感。

还有一个小技巧是“多重边框”可以用box-shadow模拟，因为box-shadow可以同时写多组，用逗号分隔。比如box-shadow: 0 0 0 2px red, 0 0 0 4px blue;会得到红蓝两圈嵌套的边框效果，但它的本质是阴影，不会影响盒模型的尺寸计算。

4.3 margin取值的“负值魔法”与对齐技巧

margin不只有正值，负值在一些高级布局中非常好用。最典型的应用场景是“解决百分比和像素混合的居中问题”。比如你有一个宽度为50%的元素，想让它相对于父容器向右偏移一定像素，同时还要保证水平居中，手动计算百分比和像素的差值会很麻烦，这时用margin-right的负值结合一个相对定位就能巧妙解决。

margin负值另一个常见用途是实现“负margin三栏布局”。在flex和grid还没普及的时代，负margin是实现圣杯布局、双飞翼布局的标配技巧。虽然现在这些技术已经慢慢退居幕后，但理解负margin的机制，对深刻理解盒模型依然很有帮助。

在flex或grid布局里，margin的auto值也是一个非常实用的对齐工具。margin: 0 auto可以实现水平居中，margin: auto在flex容器里可以让子元素在主轴和交叉轴上都居中。理解这些细节，写CSS时的可选方案就多了很多。

4.4 overflow与盒模型的关系：裁切、滚动与块级格式化上下文

overflow属性控制的是元素内容超出content区域时的表现方式。常见的值有visible（默认，内容溢出可见）、hidden（溢出内容被裁切）、scroll（强制显示滚动条）、auto（内容溢出时自动出现滚动条）。这个属性对盒模型的影响体现在两方面：一是它改变了内容的呈现边界，二是它会影响元素的尺寸识别方式（是否形成BFC）。

BFC（块级格式化上下文）听起来高大上，简单理解它就是一套独立的“布局小世界”。一个元素形成了BFC之后，它的内部布局不会影响外部元素，外部元素也不会影响到它内部。很多margin折叠问题其实就是因为没有形成BFC，导致子元素的margin穿透到父元素外面。解决方式之一是给父元素设置overflow: hidden，这样它就形成了BFC，子元素的margin就不会再“穿透”出来了。

不过用overflow: hidden解决margin折叠问题时要注意，如果那个元素还需要展示溢出的内容（如下拉菜单的弹出层、tooltip这些），直接隐藏会导致内容被裁切，这时候可以考虑用其他触发BFC的方式，比如设置父元素的padding-top，或者改用display: flow-root——这是一个专门用来创建BFC而设计的display值，不存在副作用。

4.5 盒模型与定位、浮动的联动

盒模型不是孤立的概念，它和CSS的定位（position）以及浮动（float）机制是紧密相关的。

在定位方面，一个元素使用position: absolute之后，它的包含块就不再是它的父元素，而是最近的、设置了position且值不是static的祖先元素。如果没有这样的祖先元素，它会以html文档作为包含块。在计算使用absolute定位的元素的宽度时，百分比是相对于包含块的宽度计算的，这点和普通流中的计算基准一致。

在浮动方面，float的元素会脱离文档流，但仍然占据盒模型中的尺寸空间，并且它会缩小包裹其内容。浮动元素的margin不会在浮动方向上发生折叠，这也是浮动布局的容错性比普通文档流低的原因。现在用flex和grid基本不会碰到浮动布局了，但理解盒模型与浮动的相对关系，对阅读老代码和排查兼容性问题依然很有价值。

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

5.1 元素宽度超出预期？先查box-sizing

这是我在工作中遇到的最高频问题。定位栏、按钮、卡片，明明设了width，加上padding之后实际宽度就变了，导致布局被撑破。排查的方法很简单，打开浏览器开发者工具，选中出问题的元素，看Computed面板里width的实际计算值是多少，再对比你设置的width，很快就能确认是不是box-sizing的问题。

如果确认是box-sizing的问题，全局改成border-box通常能解决大部分尺寸溢出。但也要注意，改完之后所有元素的content区域都会被压缩，必须重新检查一遍padding较大的元素，看文字有没有被挤到换行或溢出。

5.2 两个元素间距不是margin之和？

这个问题十有八九就是margin折叠。确认方法同样是用开发者工具查看元素的计算盒模型，看它的margin区域和视觉距离是否一致。如果设置了margin-bottom: 30px和margin-top: 20px，但实用间距只有30px，那就是折叠了。

解决办法根据场景选：兄弟之间可以直接只设置一个方向的margin，避免两个方向相遇；父子之间可以给父元素加padding-top，或者用overflow: hidden、display: flow-root来阻断折叠。

5.3 百分比margin和padding的基准为什么不是高度？

这是一个比较冷门但面试常考的点。当你给一个元素设置margin-top: 10%或padding-bottom: 10%时，这个百分比是相对于父元素的宽度计算的，而不是高度。原因要从CSS的历史里找：在CSS2.1时代，如果百分比相对于高度计算，当父元素的高度没有显式设置时（默认auto），子元素的比例就无从计算了，所以规范选择“统一相对于宽度”来简化问题。CSS盒模型这个特性沿用至今，你要做“宽度为高度的百分比”这类响应式比例盒子时，绕不开这个规则。

如果不小心踩了这个坑，而且确实需要相对于高度设置padding，可以改用aspect-ratio属性，这是现代浏览器支持非常好的一个属性，直接设置元素宽高比即可。

5.4 边框加上去布局就崩，怎么根治？

这个问题是border-box最典型的价值体现。布局崩掉的根本原因是，在标准盒模型下，border占据的宽度是额外增加的，两个带边框的元素并排时总宽度超过容器，导致换行。根治方案就是全局设置box-sizing: border-box，让border和padding都从内部扣，布局宽度不再“外溢”。

另外，border本身还有一个细节：它会影响元素的可视尺寸，即使你用了border-box，它也照样会压缩content区域。所以在空间有限的场景下，宁可少加padding也不能让border太厚挤压内容。

5.5 快速排查盒模型问题的开发者工具技巧

Chrome开发者工具的Elements面板，选中元素后右侧Styles和Computed两个区域非常关键。Computed面板里可以直观看到content、padding、border、margin四层结构的示意图，哪一层有颜色就说明哪一层有值。直接在示意图上点某个区域，就能看到对应的CSS属性，非常高效。

我排查盒模型问题的惯用流程是：先选中元素看Computed，确认它的content、padding、border、margin各是多少；再对照预期值，如果总宽度不对，就看width和box-sizing；如果边框不显示，就看border-style是否设置成none；如果间距不对，就看是否触发了margin折叠。这套流程基本能覆盖绝大部分盒模型相关的布局问题。

还有一个技巧是，在Elements面板里可以直接勾选/取消box-sizing: border-box，通过实时对比两种模式下的布局效果来定位问题。这个操作比改代码刷新页面快得多，排查效率会高很多。

我在实际工作中使用的排查速查表如下：

5.6 移动端适配中的盒模型注意事项

移动端布局和PC端最大的区别在于屏幕宽度非常有限，每个像素都弥足珍贵。这种情况下，盒模型一不小心就会造成“横向溢出”的问题——元素总宽度超过viewport宽度，页面出现横向滚动条。这个问题的排查和前面类似，先找到哪个元素的宽度“外溢”，再看它的padding、border或margin是否把总尺寸撑大了。

移动端我还要特别提醒的是，不要用太大的padding，小屏设备上10px的padding可能就占据可用宽度的很大比例。另外，移动端的滑动容器如果不希望出现横向滚动条，通常需要配合overflow-x: hidden或overflow: auto来处理子元素溢出问题。

搞定了盒模型，你会发现很多“看起来诡异”的CSS现象都有了合理的解释。这些解释不是靠背下来的，而是当你亲自踩过几次坑、反复用开发者工具查看计算值之后，自然内化的经验。

CSS3基础语法和盒模型这两个主题，在很多人眼里是“入门内容”，枯燥、基础、不炫酷。但恰恰是这些基础内容，决定了你后续写CSS的高度和深度。把单位、选择器、优先级、继承这些语法细节吃透，把盒模型的尺寸计算、margin折叠、BFC这些底层机制弄明白，再去看flex、grid、动画、响应式，你会觉得豁然开朗，因为你终于知道那些“高级特性”解决的到底是一些什么样的基础问题。