层叠、继承与盒模型

约 839 字大约 3 分钟

布欧-Lewyon

2026-05-16

首页 › CSS › CSS 基础 › 层叠、继承与盒模型

层叠（Cascading）

CSS 全称中的"层叠"指多个规则冲突时的裁决机制。三个因素决定最终生效的样式：

1. 来源与重要性

浏览器默认样式 < 用户样式 < 作者样式 < !important

2. 特异性（前文已讲）

3. 顺序

/* 后写的覆盖先写的 */
p { color: red; }
p { color: blue; }   /* ✅ 生效 */

继承

子元素自动继承父元素的某些属性：

body {
  font-family: sans-serif;
  color: #333;
  font-size: 16px;
}
/* 所有后代元素默认继承这些属性 */

可继承 vs 不可继承

可继承	不可继承
`color`	`margin`
`font-*`（family, size, weight）	`padding`
`line-height`	`border`
`text-align`	`background`
`visibility`	`width` / `height`
`cursor`	`position` / `display`
`opacity`	`overflow`

控制继承的值

.parent {
  color: red;
}

.child {
  color: inherit;   /* 强制继承父级值 → red */
  color: initial;   /* 使用浏览器默认值 */
  color: unset;     /* 可继承属性 → inherit，否则 → initial */
  color: revert;    /* 恢复到浏览器的默认样式 */
}

盒模型

每个 HTML 元素都是一个"矩形盒子"：

.box {
  width: 200px;
  padding: 20px;
  border: 2px solid #333;
  margin: 10px;
}

content-box（默认）

.box {
  box-sizing: content-box;  /* 默认 */
  width: 200px;
  padding: 20px;
  border: 2px solid #333;
}
/* 实际占用宽度 = 200 + 20*2 + 2*2 = 244px */
/* padding 和 border 在外面撑大 */

border-box（推荐）

.box {
  box-sizing: border-box;   /* ✅ 推荐 */
  width: 200px;
  padding: 20px;
  border: 2px solid #333;
}
/* 实际占用宽度 = 200px */
/* padding 和 border 向内挤压内容区 */

全局设置：

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

绝大多数现代项目都使用 border-box，因为它更符合直觉——设定的宽度就是最终宽度。

display

display 决定元素的外部表现类型：

值	行为
`block`	独占一行，可设宽高
`inline`	不换行，宽高由内容决定
`inline-block`	不换行，可设宽高
`flex`	弹性容器
`grid`	网格容器
`none`	隐藏（不占空间）

.block  { display: block; }       /* div, p, h1-h6 */
.inline { display: inline; }      /* span, a, strong, em */
.inline-block { display: inline-block; }

/* inline-block 典型场景 */
.icon {
  display: inline-block;
  width: 24px;
  height: 24px;     /* 内联元素不能设宽高，inline-block 可以 */
}

外边距折叠

垂直方向上相邻的 margin 会合并（取较大值）：

<div style="margin-bottom: 30px;">A</div>
<div style="margin-top: 20px;">B</div>
<!-- 实际间距 = 30px（取较大值，非 50px） -->

触发条件：

相邻兄弟元素
父元素与第一个/最后一个子元素（无 border/padding 分隔）
空块元素

解决方案：

/* 1. 给父元素加 overflow: hidden */
.parent { overflow: hidden; }

/* 2. 用 padding 替代 margin */
.parent { padding: 1px; }

/* 3. 用 Flexbox/Grid */
.parent { display: flex; flex-direction: column; }

小结

概念	要点
层叠顺序	特异性 → 顺序 → !important
继承	字体/颜色/行高会继承
`inherit` / `initial` / `unset`	控制继承行为
content-box	width = 内容区（不算 padding/border）
border-box	width = 内容+padding+border（推荐）
外边距折叠	垂直相邻 margin 取较大值
display	block / inline / inline-block / flex / grid