CSS 盒子模型 · 样式继承 · 用户代理样式 完整详解
这三个概念是 CSS 基础中的核心中的核心，理解它们能帮你彻底解决大多数样式问题和 bug。
1. CSS 盒子模型（Box Model）
每个 HTML 元素在页面上都是一个矩形盒子。
1.1 标准盒模型（W3C） vs 怪异盒模型（IE）
| 类型 | box-sizing 值 | 宽度计算公式 | 现代推荐 |
|---|---|---|---|
| 标准盒模型 | content-box（默认） | width = content（不包含 padding、border） | 推荐 |
| 怪异盒模型 | border-box | width = content + padding + border | 更实用 |
推荐写法（几乎所有现代项目都加上）：
*,
*::before,
*::after {
box-sizing: border-box; /* 全局使用 border-box */
}
1.2 盒模型组成（由内到外）
margin（外边距）
↓
border（边框）
↓
padding（内边距）
↓
content（内容区域） ← width / height 作用于此（content-box 时）
可视化示例：
.box {
width: 200px; /* content 宽度 */
height: 100px;
padding: 20px; /* 上下左右各 20px */
border: 5px solid #333;
margin: 30px; /* 外边距 */
}
实际占用空间（border-box 下）：
- 宽度 = 200px（包含 padding + border）
- 高度 = 100px（包含 padding + border）
1.3 关键属性
margin：支持auto（水平居中常用）padding：不支持负值border：可单独设置四边（border-top等）outline：不占用空间，常用于调试
2. 样式继承（Inheritance）
某些 CSS 属性会从父元素自动继承到子元素。
2.1 可继承属性（常用）
| 类型 | 可继承属性示例 |
|---|---|
| 文字 | color, font-family, font-size, font-weight, line-height, text-align, letter-spacing |
| 列表 | list-style, list-style-type |
| 表格 | border-collapse, empty-cells |
| 其他 | visibility, cursor, white-space |
不可继承属性（大多数盒模型属性）：width, height, margin, padding, border, display, position, background 等。
2.2 继承控制关键字
.child {
color: inherit; /* 主动继承父元素 */
color: initial; /* 重置为浏览器默认值 */
color: unset; /* 如果可继承则继承，否则重置为 initial */
color: revert; /* 回滚到用户代理或用户样式 */
}
实战技巧：
body {
font-family: "Microsoft YaHei", system-ui;
line-height: 1.6;
color: #333;
}
/* 所有文字相关样式自动继承，无需重复书写 */
3. 用户代理样式（User Agent Styles）
用户代理样式 = 浏览器默认样式。
每个浏览器都有自己的一套默认样式表（User Agent Stylesheet），这就是为什么 <h1> 很大、<ul> 有缩进、button 有边框的原因。
3.1 常见用户代理样式示例
<h1>~<h6>有较大的font-size和margin<p>、ul、ol有默认margin<a>有下划线和蓝色<button>、input有默认边框和背景<table>有border-collapse: separate
3.2 如何消除用户代理样式（Reset / Normalize）
现代推荐做法（2026 年）：
/* 1. 简单 Reset（推荐新项目使用） */
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 2. 更温和的 Normalize 方式 */
button,
input,
select,
textarea {
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
/* 移除列表默认样式 */
ul, ol {
list-style: none;
}
热门方案：
- modern-normalize（推荐）
- reset-css
- tailwind 的 Preflight（基于 modern-normalize）
4. 三者之间的关系与层叠顺序
CSS 最终样式计算顺序（从低到高）：
- 用户代理样式（浏览器默认）
- 用户样式（浏览器设置的样式，极少用）
- 作者样式（我们写的 CSS）
- 按层叠规则：
!important> 行内样式 > ID > 类 > 标签 > 通配符
- 继承样式
记忆口诀：
浏览器默认最弱，我们写的更强，!important 最强；可继承的属性不写也会出现。
5. 实战建议总结
- 全局设置
box-sizing: border-box（强烈推荐） - 用
inherit合理继承文字样式，减少重复代码 - 项目开始时务必处理用户代理样式（Reset/Normalize）
- 调试技巧：
- Chrome DevTools → Computed 面板查看最终样式来源
- 查看 “User agent stylesheet” 即可看到浏览器默认样式
练习题（建议立即动手）：
- 写一个卡片组件，分别用
content-box和border-box观察宽度差异 - 在不给子元素写
color的情况下，让所有文字变成红色 - 制作一个符合现代审美的表单，去除所有用户代理默认样式
需要我继续深入以下任意部分吗？
- 盒模型的
margin合并与塌陷 - 层叠上下文（Stacking Context）与
z-index - 自定义属性（CSS Variables）与继承
- 2026 年最新的 CSS Reset 方案对比
随时告诉我！
