手写笔记

---

一、盒模型应用（核心布局细节）

1.1 宽高与背景范围

• 默认规则：width/height 设置的是内容盒content-box的宽高；
• 精确计算：CSS3 中通过 box-sizing: border-box 可将宽高范围扩展至包含边框。
• 背景覆盖：默认背景覆盖边框盒（border-box），可通过 background-clip 修改覆盖范围（如 content-box/padding-box）。

1.2 文本与溢出处理

处理类型	属性示例	作用说明
溢出处理	overflow: hidden/scroll/auto	控制内容溢出边框后的显示方式
断词规则	word-break: normal/break-all/keep-all	控制英文/中文单词的换行断词规则
空白处理	white-space: nowrap	禁止文本换行，配合溢出省略使用

---

二、行盒的盒模型（重点易错点）

2.1 常见行盒元素

• 包含具体内容的行内元素：<span>、<strong>、<em>、<i>、<img>、<video>、<audio>等。

2.2 行盒核心特点

1. 盒子沿内容水平延伸，默认不独占一行；
2. 无法直接设置宽高（width/height 对行盒无效）；
3. 内边距（padding）：水平方向有效，垂直方向会显示但不实际占据空间；
4. 边框（border）：水平方向有效，垂直方向会显示但不实际占据空间；
5. 外边距（margin）：水平方向有效，垂直方向会显示但不实际占据空间。

2.3 行块盒（inline-block）

• 语法：display: inline-block
• 特点：
  1. 不独占一行，可与其他行内元素/行块盒同行排列；
  2. 盒模型所有尺寸（宽高/padding/border/margin）全部有效，是实现「同行排列+精确尺寸控制」的常用方案。

---

三、可替换元素与非可替换元素

3.1 核心区别

• 非可替换元素：页面显示结果由元素内容决定（如 <div>/<p>/<span>，占绝大多数元素）；
• 可替换元素：页面显示结果由元素属性决定（如 <img>/<video>/``/<input> 等）。

3.2 可替换元素的盒模型

• 可替换元素类似行块盒，盒模型中所有尺寸（宽高/padding/border/margin）均有效，可直接设置宽高控制显示尺寸。

---

四、块盒与包含块（常规流核心）

4.1 块盒基础规则

• 每个块盒的总宽度必须 = 包含块的宽度；
• 宽度默认值为 auto，margin 默认值为 0，auto 会将剩余空间吸收；
• 若宽度、边框、内边距、外边距计算后仍有剩余空间，该空间会被 margin-right 全部吸收；
• 在常规流中，块盒在其包含块中居中，可通过设置左右 margin: auto 实现。

4.2 百分比取值规则

• padding、width、margin 的百分比取值，均相对于其包含块的宽度计算；
• 以上所有百分比值，都受限于包含块的实际宽度，不会超出包含块范围。

---

五、常规流布局与外边距合并

5.1 常规流布局规则

• 块盒：独占一行，垂直依次排列；
• 行盒/行块盒：水平依次排列，遇自动换行。

5.2 包含块概念

• 每个盒子都有对应的包含块，包含块决定了盒子的可排列区域；
• 绝大多数情况下，盒子的包含块即其父元素的内容盒（content-box）。

5.3 上下外边距合并（高频坑）

• 触发条件：两个常规流块盒，上下外边距相邻时（如兄弟元素、父子元素嵌套）；
• 合并规则：两个外边距取最大值，而非相加；
• 影响：会导致垂直间距不符合预期，需通过 overflow: hidden、padding、border 等方式破坏相邻关系来避免。

---

六、核心总结

1. 盒模型应用：控制宽高/背景范围，处理文本溢出与换行；
2. 行盒：仅水平方向盒模型有效，垂直方向不占空间；
3. 行块盒：兼顾行盒的同行排列与块盒的尺寸控制；
4. 可替换元素：类似行块盒，可直接设置尺寸；
5. 块盒：宽度受包含块限制，margin: auto 可实现水平居中；
6. 常规流：默认布局方式，块盒垂直堆叠、行盒水平排列，存在上下外边距合并特性。