CSS选择器及盒模型2
约 1077 字大约 4 分钟
2026-03-14
手写笔记
.jpg)
一、盒模型应用(核心布局细节)
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 行盒核心特点
- 盒子沿内容水平延伸,默认不独占一行;
- 无法直接设置宽高(
width/height对行盒无效); - 内边距(padding):水平方向有效,垂直方向会显示但不实际占据空间;
- 边框(border):水平方向有效,垂直方向会显示但不实际占据空间;
- 外边距(margin):水平方向有效,垂直方向会显示但不实际占据空间。
2.3 行块盒(inline-block)
- 语法:
display: inline-block - 特点:
- 不独占一行,可与其他行内元素/行块盒同行排列;
- 盒模型所有尺寸(宽高/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等方式破坏相邻关系来避免。
六、核心总结
- 盒模型应用:控制宽高/背景范围,处理文本溢出与换行;
- 行盒:仅水平方向盒模型有效,垂直方向不占空间;
- 行块盒:兼顾行盒的同行排列与块盒的尺寸控制;
- 可替换元素:类似行块盒,可直接设置尺寸;
- 块盒:宽度受包含块限制,
margin: auto可实现水平居中; - 常规流:默认布局方式,块盒垂直堆叠、行盒水平排列,存在上下外边距合并特性。
