盒模型详解
🎯 引言
在前端开发中，盒模型是理解网页布局的基石。每个 HTML 元素都可以看成是一个矩形的盒子，这个盒子由内容、内边距（padding）、边框（border）、外边距（margin）组成。掌握盒模型，能帮助我们更精准地控制元素的大小、位置和间距，从而实现更灵活的页面布局。
这篇文章将帮你全面理解盒模型的基本概念，介绍不同的盒模型类型，讲解 box-sizing 属性的视觉差异，以及 display 属性对盒模型的影响。无论你是刚入门的小白，还是想梳理基础的前端开发者，都能从中受益。
📦 什么是盒模型？
网页中的每一个元素都可以看成一个“盒子”，这个盒子由以下四个部分组成：
| 组成部分 | 说明 |
|---|---|
| 内容区（content） | 元素的实际内容区域，比如文字或图片所在的区域。 |
| 内边距（padding） | 内容区与边框之间的空间，用于给内容留白。 |
| 边框（border） | 围绕元素内容和内边距的边框，可以设置颜色、宽度和样式。 |
| 外边距（margin） | 元素与外部其他元素之间的距离，用于控制元素间的间距。 |
盒模型的计算决定了元素在页面中占用的实际空间大小。
举个例子：一个宽度为 200px 的盒子，如果给它设置了 10px 的内边距和 2px 的边框，再加 15px 的外边距，那么它占据的总宽度远远不止 200px。
🧱 盒模型有几种？
前端中常见的盒模型主要有两种：
| 盒模型类型 | 说明 | 计算宽度方式 |
|---|---|---|
| 标准盒模型（content-box） | 默认盒模型，宽度和高度只包含内容区，不包含 padding 和 border。 | 总宽度 = content 宽度 + padding + border + margin |
| IE 盒模型（border-box） | 宽度和高度包含内容区、内边距和边框，方便计算整体大小。 | 总宽度 = 设置宽度 + margin |
我们通常在 CSS 中通过 box-sizing 属性来切换盒模型类型：
/* 默认标准盒模型 */
.example1 {
box-sizing: content-box;
}
/* IE 盒模型 */
.example2 {
box-sizing: border-box;
}
在 border-box 模型下，我们设置的宽度就是元素的实际宽度，padding 和 border 会在内容区内扣除，不会让元素变得更宽。
box-sizing: border-box;，这样计算和布局更方便，样式更稳定。🎨 box-sizing 的视觉区别
来看个简单示例对比两种盒模型的视觉差异。
<style>
.box1,
.box2 {
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid #333;
margin: 20px;
background-color: lightblue;
}
.box1 {
box-sizing: content-box;
}
.box2 {
box-sizing: border-box;
}
</style>
<div class="box1">content-box</div>
<div class="box2">border-box</div>
.box1使用 content-box，实际占用空间是：
内容宽 200px + padding 40px (左右各20) + border 10px (左右各5) = 250px 总宽
高度类似计算。.box2使用 border-box，内容宽度被压缩，padding 和 border 包含在 200px 内。
浏览器渲染时你会明显看到 .box1 的盒子比 .box2 大，理解这点能帮助你避免布局崩溃。
🧱 display 属性详解
display 属性决定了盒子是如何在页面流中展示的，常见的取值：
| 值 | 说明 | 盒模型行为 |
|---|---|---|
| block | 块级元素，独占一行，宽度默认撑满父元素 | 盒子宽度受 width 控制，支持 margin/padding/border |
| inline | 行内元素，不独占一行，宽度由内容决定 | 盒子宽度受内容影响，不能设置宽高，padding/margin 只有左右生效 |
| inline-block | 介于 block 和 inline 之间，既可设置宽高，又能和其他元素同行显示 | 类似块级盒模型，但表现为行内元素 |
| none | 不显示元素，元素不会占据任何空间 | 盒子完全隐藏 |
不同 display 值对盒模型的表现影响很大，尤其是 inline 元素，设置宽高无效，但可以通过 padding/margin 调整间距。
display 值，有助于实现你想要的布局效果，比如导航菜单常用 inline-block，主内容区域常用 block。🧾 小节总结
- 盒模型由内容区、内边距、边框和外边距组成，决定元素的实际占用空间。
box-sizing有两种盒模型类型：content-box（默认）和border-box，后者更易于布局控制。display属性影响盒子在页面中的展示方式，常见值有block、inline、inline-block和none。- 理解盒模型和
display的配合应用，能帮助你精确控制页面布局和元素尺寸。
❓ 知识问答（Q&A）
Q：为什么设置了宽度和内边距后，元素宽度会变大？
A：默认盒模型是 content-box，宽度只包括内容区，内边距和边框会额外增加元素的总宽度。
Q：使用 border-box 后，宽度是如何计算的？
A：border-box 把宽度包含内容区、内边距和边框，这样设置的宽度就是元素的实际宽度。
Q：为什么 inline 元素不能设置宽高？
A：inline 元素是行内元素，宽高由内容决定，CSS 里的宽高设置对它们无效，只能通过 padding 和 margin 调整间距。
🧪 小练习
练习 1：切换盒模型体验
创建两个盒子，一个使用 content-box，一个使用 border-box，设置相同的宽度、内边距和边框，观察两者视觉差异。
<style>
.box1,
.box2 {
width: 150px;
height: 80px;
padding: 15px;
border: 3px solid #666;
margin: 10px;
background-color: #a0d8f0;
color: #333;
font-size: 14px;
text-align: center;
line-height: 50px;
}
.box1 {
box-sizing: content-box;
}
.box2 {
box-sizing: border-box;
}
</style>
<div class="box1">content-box</div>
<div class="box2">border-box</div>
请拷贝到编辑器中去尝试预览体验吧！
练习 2：理解 display 影响
写一个简单的导航菜单，使用 inline-block 让菜单项在一行显示，并给菜单项设置宽度、内边距和边框。
<style>
.nav {
background-color: #eee;
padding: 10px;
}
.nav-item {
display: inline-block;
width: 100px;
padding: 10px;
margin-right: 10px;
border: 2px solid #333;
text-align: center;
cursor: pointer;
}
</style>
<div class="nav">
<div class="nav-item">首页</div>
<div class="nav-item">产品</div>
<div class="nav-item">关于</div>
<div class="nav-item">联系</div>
</div>
请拷贝到编辑器中去尝试预览体验吧！
🎉 恭喜你已经掌握盒模型的基本概念、盒模型类型、box-sizing 属性和 display 属性的核心知识啦！继续练习，页面布局将变得更轻松！