主题
盒子模型 box model与样式继承和自带样式（Day7 2/3）
本页对应 Day07_CSS，共 7 段视频，约 1 小时 21 分。
学习目标
- 能够为元素分别或通过复合属性设置内边距，正确判断负值无效、百分比参照父元素内容宽度，并按 1/2/3/4 值规则还原四边内边距。
- 能够根据元素显示模式说明内边距差异，在行内元素上仅使用左右内边距避免上下内边距造成布局重叠，并在块级、行内块元素上完整设置四边内边距。
- 能够使用 border-style、border-color、border-width 及 border 复合属性设置边框，正确解释默认样式、默认宽度和默认颜色，并按方向或属性维度书写边框子属性。
- 能够为元素设置外边距，判断负值、百分比和 auto 的生效规则，并利用块级元素左右外边距 auto 实现水平居中。
- 能够识别父子元素间的外边距塌陷，说明其发生条件，并使用父元素边框、内边距或 overflow:hidden 中的至少一种方法消除塌陷。
- 能够识别相邻块级兄弟元素上下外边距合并，计算实际间距为较大值，并说明左右外边距不合并及通过单一方向设置规避合并。
知识点
本节回顾提纲与代码保留
本节是阶段回顾，先把知识地图摆出来，再沿着选择器、属性总结和调试现象把规则串起来。笔记未附图片，以下保留原提纲代码：
1. 选择器
1.1 基本选择器
1.2 组合选择器
后代元素选择器、子元素选择器、交集组合、并集组合
1.3 伪类选择器
:link :visited :hover :active
1.4 选择器权重
单个选择器权重
组合选择器权重
2. 属性总结
2.1 字体样式
font-size、font-weight、font-style、font-family、font
2.2 文字颜色
color
2.3 文本样式
letter-spacing、word-spacing、text-decoration、text-indent、text-align
vertical-align、line-height
2.4 背景样式
background-color、background-image、background-repeat
background-position、background-attachment、background
2.5 鼠标光标样式
cursor: pointer、move
2.6 列表样式
list-style-type、list-style-positoin、list-style-image、list-style
2.7 表格样式
table-layout、border-spacing、border-collapse、caption-side、empty-cells选择器回顾：先定位，再组合，最后算权重
为什么需要：页面元素多，样式不能靠给每个标签临时加行内样式。选择器解决“选谁”的问题，权重解决“冲突时听谁”的问题。
怎么想：先判断是单个元素、后代/子元素，还是交集/并集；伪类用于链接和交互状态；最后按单个选择器与组合选择器分别核算权重。
怎么做：基本选择器负责基础命中；组合选择器负责缩小或扩大范围；:link、:visited、:hover、:active 按链接状态书写；权重冲突时先看选择器组合，再看书写顺序。
易错点：后代选择器与子元素选择器混淆；交集组合写成并集；伪类顺序写乱；只看最后一条样式，忽略权重。转写稿中的调试也反复提醒：后写的规则不一定生效，先确认“值是否有效、选择器是否命中、权重是否被覆盖”。
属性总结：按“字体—文本—背景—交互—列表表格”归类
为什么需要：属性多，死记容易乱。按作用归类，写页面时才能快速定位。
怎么想：字体样式管字形字号粗细；color 管文字颜色；文本样式管字间距、词间距、装饰线、缩进、对齐、垂直对齐和行高；背景管颜色、图片、重复、位置、固定；cursor 管鼠标形状；列表和表格属性管结构表现。
怎么做：先写字体与文字颜色，再调文本排版，最后补背景和交互；列表用 list-style-* 及复合属性 list-style；表格用 table-layout、border-spacing、border-collapse、caption-side、empty-cells。
易错点：font、background、list-style 是复合属性，单写某个值可能把其他子属性重置为默认值；list-style-positoin 在原提纲中拼写有误，实际应为 list-style-position，复习时要纠正；文本对齐与元素居中不是一回事。
从转写稿调试反推属性规则：内边距、边框、外边距
为什么需要：只会背属性名不够，设置值是否有效、百分比参照谁、复合属性怎么展开，必须靠调试确认。
怎么想：先看盒模型和调试工具，再看值是否合法，最后看显示模式是否支持。转写稿中内边距负值无效；百分比上下左右都参照父元素内容宽度；复合属性按“一个值上下左右、两个值上下/左右、三个值上/左右/下、四个值上右下左顺时针”展开。边框风格默认 none，只写 solid 也有边框，因为宽度默认约 3px、颜色默认取文字颜色 color；边框复合属性多个值用空格分隔。外边距可为负值，方向效果与正值相反；块级元素左右外边距都为 auto 可横向居中，行内块不行。
怎么做：写内边距先判断方向，再决定单边还是复合；写边框先定风格，再补颜色和宽度，或直接用 border；写外边距先判断是影响自己还是挤动兄弟，再处理父子塌陷与兄弟合并。转写稿调试显示：父子之间最上面元素的上外边距、最下面元素的下外边距会塌陷到父元素；兄弟之间上下外边距会合并，取较大者；二者主要发生在块级元素上。解决塌陷可用父元素边框、父元素内边距或开启 BFC（如 overflow: hidden），但若不影响显示效果可不处理。
易错点：行内元素上下内边距效果不完美，上下外边距无效，左右可正常设置；外边距合并不要误以为会相加；边框、内边距、外边距的复合属性规则相似，但参照对象和负值规则不同，必须通过调试工具核对。
内边距：给内容留出呼吸空间
为什么需要：文字紧贴边框会很难看，内边距负责撑开“内容到边框”的距离。怎么想：先把盒子尺寸、背景、边框准备好，再分别调四个方向。怎么做：可单独设置 padding-left/right/top/bottom，也可用复合属性。转写中先写 .book { width:600px; background:#ccc; border:2px solid #099; }，再逐方向加内边距观察效果。
css
.book{
width:600px;
background:#ccc;
border:2px solid #099;
padding-left:20px;
padding-top:30px;
padding-bottom:25px;
}易错点：内边距不能写负值。转写中先写 padding-left:20px，再写 padding-left:-20px，刷新后仍是 20px，说明负值无效，不会覆盖前面的有效值。百分比也容易误判：padding-left:10% 不是参照自身 600px，而是参照父元素内容宽度。父元素宽 1000px 时，左内边距为 100px；上下左右内边距用百分比时，都参照父元素内容宽度。
css
.parent{width:1000px;}
.book{padding-left:10%;} /* 100px，参照父内容宽 */内边距复合属性：一值到四值
为什么需要：逐方向写四行太啰嗦，复合属性可一次设置。怎么想：记住“上右下左”顺时针。怎么做：
css
.item{padding:20px;} /* 四边都是20 */
.item{padding:40px 30px;} /* 上下40，左右30 */
.item{padding:10px 20px 30px;} /* 上10，左右20，下30 */
.item{padding:15px 25px 35px 45px;} /* 上15 右25 下35 左45 */易错点：两个值时不是“左右、上下”，而是“上下、左右”；三个值时中间值给左右。这个规则后面外边距、边框多值也会复用，必须熟。
行内元素的内边距：左右可靠，上下不完美
为什么需要：不同显示模式布局能力不同。怎么想：给 span 加背景和内边距，观察是否挤压相邻文字。怎么做：
css
span{background:#099;padding:20px;}
span{display:inline-block;} /* 上下左右都正常 */易错点：行内元素左右内边距可完美设置；上下内边距虽然视觉上有背景延伸，但布局不额外占空间，会与上下行文字重合。实际开发中行内元素尽量只用左右内边距；块级、行内块可正常设置。
边框：风格、颜色、宽度
为什么需要：边框用于划分区域。怎么想：边框有三项：border-style、border-color、border-width。怎么做：默认 style:none 时看不到边框；默认宽度约 3px，默认颜色取文字颜色 color。
css
.box{border:1px solid #080;}
.box{border-left:10px dotted #080;}
.box{border-color:#990 #099 #909;} /* 上、左右、下 */易错点：只写 border: solid 会使用默认颜色和宽度，可能覆盖你原先的设置。常用风格：solid 实线、dashed 虚线、dotted 点线、double 双实线。单方向可写 border-left 等；四方向颜色、宽度、风格多值时，规则同内边距复合属性。
外边距：与兄弟或父内容边界的距离
为什么需要：控制盒子之间的间距。怎么想：有相邻兄弟时，外边距是与兄弟的距离；没有兄弟时，是与父元素内容边界的距离。左、上外边距主要影响自己位置；右、下外边距主要影响后面兄弟的位置。怎么做：
css
.book{margin-left:20px;margin-top:20px;margin-bottom:20px;}
.book{margin-left:-30px;} /* 可负，方向相反 */
.book{margin:0 auto;} /* 块级元素水平居中 */易错点：外边距可为负值；百分比上下左右都参照父元素内容宽度；margin-left:auto 与 margin-right:auto 只对块级元素做横向居中，纵向 auto 无效，行内块也不行。行内元素左右外边距有效，上下外边距无效。
外边距塌陷：父子之间
为什么需要：理解父子间距异常。怎么想：给子元素设上外边距，结果父元素被带着下移，看起来像父元素有了外边距。怎么做：最上子元素的上外边距、最下子元素的下外边距会塌陷到父元素上，只发生在块级元素。解决可用父元素加边框、加内边距，或 overflow:hidden 开启 BFC。
css
.wrapper{width:800px;height:400px;background:#ccc;}
.books{width:600px;height:100px;margin-top:60px;background:#900;}
.wrapper{border:1px solid transparent;} /* 或 padding:10px; 或 overflow:hidden; */易错点：不影响显示效果时可不处理；行内块不会出现该塌陷。
外边距合并：兄弟之间
为什么需要：解释兄弟间距为什么不叠加。怎么想：上面兄弟的下外边距与下面兄弟的上外边距会合并，取较大值。怎么做：
css
.book01{margin-bottom:30px;}
.book02{margin-top:40px;} /* 实际间距40，不是70 */易错点：只发生在块级的上下外边距，左右不合并；行内块没有该问题。实际开发中同一方向统一设置即可，通常不需要“解决”。
先说明：标题与转写稿不一致
给定笔记标题是“3 样式继承和自带样式”，但转写稿实际讲的是内边距、边框、外边距，以及外边距塌陷和合并，并未出现“样式继承”和“元素自带样式”的内容。为避免编造，下面只按转写稿可确认的内容扩写；若需“继承与自带样式”，需要另给对应材料。转写稿未提供图片，故无图片可保留，代码按转写稿中的示例整理。
内边距：为什么需要与设置规则
为什么需要：文字紧贴边框会很难看，内边距用于在内容与边框之间留白。
怎么想：padding 分上、右、下、左四个方向，可单独设置，也可用复合属性一次设置。
怎么做：
css
.book {
width: 600px;
background: #ccc;
border: 2px solid #099;
padding-left: 20px; /* 只设左内边距 */
}易错点：内边距不能写负值，负值无效；百分比不是参照自身宽度，而是上下左右都参照父元素内容宽度。转写稿实验：父元素宽 1000px 时，padding-left:10% 为 100px；padding-top:5% 也是 50px。父元素再加 padding 不改变这个参照结果，因为参照的是父元素内容宽，不是总宽。
内边距复合属性
为什么需要：四个方向逐个写太啰嗦。怎么想：复合属性按值的个数分配方向。怎么做：
css
.item {
width: 600px;
background: #900;
color: #fff;
padding: 20px; /* 四边都是20 */
/* padding: 40px 30px; 上下40，左右30 */
/* padding: 10px 20px 30px; 上10，左右20，下30 */
/* padding: 15px 25px 35px 45px; 上右下左，顺时针 */
}易错点：三值规则是“上、左右、下”，不是“上、左、右”；四值顺序是上右下左。这个规则后面学 margin、border 复合属性还会反复用，必须熟记。
不同显示模式的内边距
为什么需要：行内元素和块级元素对上下内边距的处理不同。怎么想：块级、行内块可较完整设置；行内元素左右内边距正常，上下内边距虽能画出效果，但浏览器排列时不会给上下留出更多空间，容易与相邻行文字重合。怎么做：
css
span {
background: #099;
padding: 20px; /* 行内元素上下效果不完美 */
}
span { display: inline-block; } /* 改为行内块后四周正常 */易错点：行内元素不要依赖上下 padding 撑开布局；需要完整内边距时改 display 为 inline-block 或 block。
边框：三要素与复合写法
为什么需要：边框用于勾勒元素轮廓。怎么想：边框有风格、颜色、宽度三个子属性。默认 border-style:none，所以看不到；默认宽度约 3px；默认颜色取文字颜色 color。常用风格有 solid 实线、dashed 虚线、dotted 点线、double 双实线。
css
.book1 {
border: 1px solid #080; /* 宽度 风格 颜色 */
}
.book2 {
border-left: 10px dotted #080; /* 单独左边框 */
}易错点：只写 border:1px solid 不写颜色，会用文字颜色；border:0 或 border:none 表示无边框；单独方向可用 border-left、border-top 等。转写稿还提到高分辨率屏幕下边框可能显示小数像素，属于屏幕精度问题，不影响视觉效果。
外边距：与谁的距离
为什么需要：外边距用于控制元素之间、元素与父元素内容边界之间的距离。怎么想：有相邻兄弟时，与兄弟元素产生距离；没有兄弟时，与父元素内容边界产生距离。上、左外边距主要影响自己位置；下、右外边距主要影响后面兄弟位置。
css
.wrapper {
width: 800px;
height: 400px;
background: #ccc;
}
.box {
width: 600px;
margin-left: 50px;
margin-top: 60px;
}易错点：外边距百分比上下左右也都参照父元素内容宽度；外边距可以写负值，方向与正值相反；块级元素左右 margin:auto 可横向居中，但纵向 auto 不居中；行内元素上下外边距无效，inline-block 也不适用左右 auto 居中。
外边距塌陷与合并
为什么需要：理解这两个现象，才能解释“明明给子元素设了 margin，父元素却跟着动”以及“兄弟间距没有相加”。
塌陷：父子元素之间，最上面子元素的上外边距、最下面子元素的下外边距会塌陷到父元素上；只发生在块级元素。解决可用父元素加边框、加内边距，或给父元素设 overflow:hidden（转写稿说明这是开启 BFC 的一种方式，先记用法）。
css
.wrapper { overflow: hidden; } /* 解决子元素上外边距塌陷 */合并：相邻兄弟元素，上面元素的下外边距与下面元素的上外边距会合并，实际距离取较大值；只发生在块级元素，左右外边距不合并。易错点：不要同时给相邻兄弟设上下 margin 期待相加，设一个方向即可。
课堂画面
代码示例
示例一：内边距的设置规则与复合属性
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>内边距</title>
<style>
.wrapper { width: 1000px; background: #eee; }
.book {
width: 600px;
background: #ccc;
border: 2px solid #099;
padding-left: 20px; /* 单方向设置 */
padding-top: 30px;
/* padding-left: -20px; 负值无效，浏览器忽略，生效的仍是上面的 20px */
/* padding-left: 10%; 参照父元素 .wrapper 的内容宽度 1000px → 100px */
/* padding-top: 5%; 上下也参照父元素内容宽度 → 50px，不是参照高度 */
}
.item {
width: 600px;
background: #900;
color: #fff;
/* padding: 20px; 一个值：上下左右都是 20 */
/* padding: 40px 30px; 两个值：上下 40，左右 30 */
/* padding: 10px 20px 30px; 三个值：上 10，左右 20，下 30 */
padding: 15px 25px 35px 45px; /* 四个值：上 15、右 25、下 35、左 45 */
}
.s1 {
background: #099;
padding: 20px; /* 行内元素：左右完美生效，上下会与相邻行文字重合 */
}
</style>
</head>
<body>
<div class="wrapper">
<div class="book">book：单方向内边距 / 百分比</div>
<h2>复合属性</h2>
<div class="item">item：一个值到四个值</div>
</div>
<h2>行内元素的内边距</h2>
<p>上一行文字</p>
<span class="s1">行内元素</span><span class="s1">行内元素</span><span class="s1">行内元素</span>
<p>下一行文字</p>
</body>
</html>关键行与易错点
padding-left / padding-top等四个方向可单独设置，互不影响；padding-left: -20px是无效值，它不会覆盖前面的20px，生效的仍是原值——内边距任何方向都不能为负。- 百分比参照的是父元素的内容宽度，上、下、左、右四个方向全都参照宽度，不是参照高度。所以
padding-top: 5%在width:1000px的父元素里是 50px。父元素加内边距不影响这个参照值（参照的是内容宽）。 - 复合属性
padding的规则必须背熟：一个值→上下左右；两个值→上下、左右；三个值→上、左右、下；四个值→上右下左（顺时针）。这套规则后面margin、border-color、border-width、border-style全都通用。 - 行内元素（
span）的左右内边距可以完美生效，上下内边距虽然能画出来，但不占布局空间，会和相邻行文字重合。结论：行内元素别用上下内边距，或改成display: inline-block / block。
示例二：边框的三个特性与方向设置
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>边框</title>
<style>
.book {
width: 600px;
padding: 20px;
background: #ccc;
margin-bottom: 10px;
}
/* 一、四个方向一起设置 */
.book01 {
/* border-style: solid; 只写风格也有边框：默认宽度 3px，默认颜色 = color */
border: 1px solid #080;
/* 常用风格：solid 实线 / dashed 虚线 / dotted 点线 / double 双实线 */
}
/* 二、单独设置某个方向 */
.book02 {
border-left: 10px dotted #080;
border-top: 2px solid #999;
border-bottom: 2px solid #999;
/* 不写颜色 → 用文字颜色；不写宽度 → 3px；不写风格 → none，看不见 */
}
/* 三、每个方向颜色 / 宽度 / 风格都不同 */
.book03 {
/* border-color: #990 #099; 上下黄、左右蓝 */
/* border-color: #990 #099 #909; 上黄、左右蓝、下紫 */
border-color: #990 #099 #909 #333; /* 上右下左 */
border-width: 10px 15px 12px 20px;
border-style: solid dashed dotted double;
}
</style>
</head>
<body>
<div class="book book01">book01：border: 1px solid #080</div>
<div class="book book02">book02：单独设置左 / 上 / 下边框</div>
<div class="book book03">book03：四个方向颜色、宽度、风格各不相同</div>
</body>
</html>关键行与易错点
border-style默认值是none，所以只写border-width或border-color是看不到边框的；但只写border-style: solid就能看到，因为宽度默认 3px、颜色默认取color（文字颜色）。- 复合属性
border: 1px solid #080三个值用空格分隔，顺序任意；如果只写border: solid，宽度和颜色会被重置为默认值（3px、文字色），会覆盖掉你之前单独写的border-color。 - 分方向属性
border-left / border-top / border-right / border-bottom各自又是复合属性，也有border-left-color、border-left-style、border-left-width子属性；同理border-color也能按方向拆成四个值，遵循“上右下左”顺时针规则。 border-color / border-width / border-style多值规则和padding完全一致：一个值全一样，两个值上下+左右，三个值上+左右+下，四个值上右下左。- 高分辨率屏幕下边框可能显示成
1.5px之类带小数的值，这是浏览器计算精度问题，不影响视觉效果，不用管。
示例三：外边距塌陷与外边距合并
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>外边距塌陷与合并</title>
<style>
body { margin: 0; }
.wrapper {
width: 800px;
/* height: 400px; 注释掉高度，让子元素撑开，才看得到下外边距塌陷 */
background: #ccc;
/* 解决塌陷方案一：border: 1px solid red; （不能是 border: 0） */
/* 解决塌陷方案二：padding: 10px; （不能是 0） */
/* 解决塌陷方案三：overflow: hidden; 开启 BFC，且不改变元素尺寸 */
}
.books {
width: 600px;
height: 100px;
line-height: 100px;
font-size: 40px;
background: #900;
color: #fff;
}
.books01 { margin-top: 60px; } /* 塌陷：父元素被一起拖下来 */
.books01 { margin-bottom: 30px; } /* 与 books02 的 margin-top 合并 */
.books02 { margin-top: 40px; } /* 合并结果取较大值 40px，不是 70px */
.books02 { margin-left: 20px; }
.books03 { margin-bottom: 100px; } /* 塌陷：父元素高度不含这 100px */
</style>
</head>
<body>
<div>前面的文字</div>
<div class="wrapper">
<div class="books books01">books01</div>
<div class="books books02">books02</div>
<div class="books books03">books03</div>
</div>
<div>后面的文字</div>
</body>
</html>关键行与易错点
- 外边距塌陷只发生在父子元素之间，且只发生在块级元素上，只影响第一个子元素的上外边距和最后一个子元素的下外边距：它们会“塌”到父元素身上，看起来像是父元素的外边距。
- 三种解决方案：① 父元素加边框（值不能为 0）；② 父元素加内边距（值不能为 0）；③ 父元素
overflow: hidden开启 BFC。前两种会改变父元素尺寸，第三种不会，是更“干净”的做法。 - 如果塌陷后视觉上看不出差别（父元素没有背景色、没有边框），可以不解决。
- 外边距合并发生在兄弟元素之间：上面的
margin-bottom与下面的margin-top会合并，实际距离取较大的那个（30 与 40 合并后是 40，不是 70）。左右外边距不会合并。 - 合并同样只发生在块级元素上；改成
display: inline-block后，上下外边距就会正常相加。 - 避免合并最简单的办法：只给一个方向设外边距（要么全设
margin-top，要么全设margin-bottom），别上下同时设置。 - 与内边距不同，外边距可以是负值：
margin-left: -30px会让元素向左移，margin-top: -100px会与上一个元素重叠；负值影响方向与正值相反。 - 块级元素左右
margin: auto可以在父元素中横向居中，上下auto无效；且仅限块级元素，inline-block不行。
常见错误
给行内元素设置上下
padding/margin想撑开行距
现象：左右间距正常，上下内边距看起来画出来了，但与相邻文本重叠；上下margin基本无效。
原因：行内元素不按块级盒模型参与垂直尺寸计算。
修法：改为inline-block/block；或只设左右间距，用line-height调行高。百分比
padding/margin按自身高度或自身宽度估算
现象：上下方向的百分比值与预期不符，布局被撑得很大或位置异常。
原因：上下左右百分比都参照包含块的内容宽度，不是自身高度。
修法：需要精确控制时改用px/rem；用百分比前先确认包含块内容宽。把负
padding和负margin当成同一类规则使用
现象：负padding不生效；负margin生效后元素重叠、位置跑偏。
原因：padding不允许负值，margin允许负值但会改变布局位置。
修法：padding只用非负值；负margin仅用于明确的重叠/偏移场景，并配合 DevTools 检查。border简写漏写子属性，误以为会保留原边框样式
现象：只写border: 1px solid后颜色变成文字色；或写border后原有border-color/border-width被重置。
原因：border是复合属性，未写出的部分会取默认值或重置相关子属性。
修法：实际项目写完整border: 1px solid #xxx；分方向设置时用完整的border-left/border-top等。父子元素
margin-top塌陷，误判为子元素margin失效
现象：给子元素设上外边距，结果父元素整体下移，子元素仍贴父元素顶部。
原因：块级父子元素顶边距发生塌陷。
修法：父元素加非零border/padding，或overflow: hidden开启 BFC；不影响视觉时可不处理。相邻兄弟同时设置上下
margin，期待间距相加
现象：上元素margin-bottom: 30px、下元素margin-top: 40px，实际间距是 40px 而不是 70px。
原因：块级元素垂直外边距发生合并，取较大值。
修法：统一只给一个方向设间距；或改用flex/grid的gap、父级padding控制。对非块级元素使用
margin: auto做横向居中
现象：左右margin都设为auto，元素没有居中。
原因：margin: auto横向居中主要适用于定宽块级元素。
修法：改为display: block并给宽度；或用flex/grid居中。
练习
父容器内容宽
1000px，子元素设置padding-left: 10%; padding-top: 5%; margin-top: 10%;，先计算实际值，再用 DevTools 验证，并写出每个百分比参照的是谁。用
padding复合属性分别写出 1 个值、2 个值、3 个值、4 个值的四组规则，并在页面上标注上、右、下、左，截图或记录 DevTools 盒模型结果。用
border简写和分方向属性各做一组四边不同颜色、不同宽度、不同样式的边框；再用 DevTools 检查是否发生子属性覆盖。复现父子
margin-top塌陷，分别用border、padding、overflow: hidden三种方案修复，并说明哪种方案不额外改变盒子尺寸。复现相邻兄弟上下
margin合并：先给上元素设margin-bottom、下元素设margin-top，观察实际间距；再改成只设单方向间距或父级flex + gap，比较两种做法的可控性。
原视频对照
| # | 视频 | 时长 |
|---|---|---|
| 1 | 内边距属性值设置规则 | 05:23 |
| 2 | 内边距复合属性 | 04:58 |
| 3 | 不同显示模式的元素的内边距 | 05:47 |
| 4 | 边框 | 20:29 |
| 5 | 外边距 | 21:10 |
| 6 | 外边距塌陷 | 16:24 |
| 7 | 外边距合并 | 07:00 |
小结
padding和margin的百分比都不要按自身高度想当然计算，先确认包含块内容宽度。- 行内元素的垂直盒模型能力有限；需要可靠控制上下间距时，优先改显示模式或换布局手段。
border简写会重置未写子属性，实际开发中写完整简写更稳，分方向边框要保持规则一致。- 块级父子顶/底
margin会塌陷，兄弟垂直margin会合并；这不是选择器或属性写错。 - 解决塌陷时，优先考虑不改变盒子尺寸的 BFC 方案；需要视觉边框或内边距时再用
border/padding。 - 兄弟间距不要同时依赖上下
margin，统一单方向或用flex/grid的gap更可控。 margin: auto横向居中只对定宽块级元素可靠；其他显示模式用flex/grid更直接。- 盒模型问题以 DevTools 的 computed 和盒模型图为准，肉眼判断很容易把塌陷、合并误判成“代码没生效”。