盒模型是什么？

前端必知：揭开在浏览器中CSS盒模型的不同渲染

在前端开发的 “宇宙” 里，CSS 盒模型可是一颗超级重大的 “星球”，它是网页布局的基础，理解它，就相当于掌握了网页布局的 “密码”。简单来说，我们可以把网页上的每个 HTML 元素都想象成一个矩形的盒子。就好比我们日常生活中的快递包装盒，一个完整的快递盒，最里面装着的物品，就相当于盒模型里的内容区域；物品与盒子内壁之间的那层缓冲材料，列如泡沫、气泡纸，对应的就是内边距；而盒子本身的那层硬纸板，就是边框；当我们把这个盒子放在一堆快递中时，它与周围其他盒子之间空出来的距离，就是外边距。这样是不是一下子就清楚啦！

下面详细讲讲盒模型的各个组成部分：

内容区域（Content）：这是盒子的 “核心地带”，存放着元素的实际内容，像文本、图片等。在 CSS 里，我们可以用width和height属性来设置它的宽度和高度。例如，我们创建一个<div>元素，并设置width: 200px; height: 150px;，那么这个<div>元素内容区域的宽度就是 200 像素，高度就是 150 像素。

内边距（Padding）：内边距处于内容区域和边框之间，是一片透明的 “隔离带” ，主要用来调整内容与边框的距离，让内容看起来不会紧贴着边框，更加美观。它有四个方向可以分别设置，padding-top（上内边距）、padding-right（右内边距）、padding-bottom（下内边距）、padding-left（左内边距），当然也可以使用padding简写属性一次性设置四个方向的内边距。假设我们给刚才的<div>元素再加上padding: 10px;，那就表明内容区域离边框四个方向都有 10 像素的距离。

边框（Border）：边框是围绕在内边距和内容区域外面的一圈线条，就像给盒子镶了个边，它可以有不同的样式、宽度和颜色。在 CSS 中，我们通过border-width设置边框宽度，border-style设置边框样式（如实线solid、虚线dashed、点线dotted等），border-color设置边框颜色，也有border这样的简写属性。列如border: 2px solid red;，就表明设置了一个宽度为 2 像素、样式为实线、颜色为红色的边框。

外边距（Margin）：外边距在边框之外，用于控制当前元素与相邻元素之间的间距，同样是透明不可见的。和内边距类似，它也有四个方向的属性margin-top、margin-right、margin-bottom、margin-left，以及简写属性margin。当我们设置margin: 15px;时，意味着这个元素与周围其他元素在四个方向上都保持 15 像素的距离。

标准盒模型与怪异盒模型

CSS 中的盒模型主要有两种，分别是标准盒模型（content-box）和怪异盒模型（border-box），它们在计算元素尺寸的方式上有所不同，理解它们的差异，能协助我们更好地进行网页布局。

标准盒模型（content-box）

标准盒模型是 CSS 规范中默认的盒模型。在这种盒模型下，width和height属性只表明内容区域的宽度和高度，元素的总宽度和总高度的计算公式如下：

总宽度 = width + padding-left + padding-right + border-left-width + border-right-width + margin-left + margin-right

总高度 = height + padding-top + padding-bottom + border-top-width + border-bottom-width + margin-top + margin-bottom

也就是说，当我们为元素设置了width和height后，如果再增加padding、border或者margin，元素实际占据的空间会相应增大。

列如下面这段代码：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>标准盒模型示例</title>
 <style>
 .box {
 width: 200px;
 height: 150px;
 padding: 20px;
 border: 10px solid black;
 margin: 30px;
 box-sizing: content-box;
 background-color: lightblue;
 }
 </style>
</head>

<body>
 <div class="box">这是一个使用标准盒模型的div元素</div>
</body>
</html>

在这个例子里，设置了.box元素的width为 200px，height为 150px，padding为 20px，border为 10px，margin为 30px 。按照标准盒模型的计算方式，该元素的总宽度为：200px（内容宽度） + 20px×2（左右内边距） + 10px×2（左右边框宽度） + 30px×2（左右外边距） = 320px；总高度为：150px（内容高度） + 20px×2（上下内边距） + 10px×2（上下边框宽度） + 30px×2（上下外边距） = 250px 。在浏览器中查看页面，就可以看到这个.box元素实际占据的空间大小符合我们的计算结果。

怪异盒模型（border-box）

怪异盒模型，也叫 IE 盒模型（由于它是老版本 IE 浏览器的默认盒模型）。在怪异盒模型中，width和height属性包含了内容区域、内边距和边框的尺寸，其总宽度和总高度的计算公式如下：

总宽度 = width + margin-left + margin-right

总高度 = height + margin-top + margin-bottom

其中，width和height已经包含了padding和border的大小，所以当我们设置padding和border时，元素的总尺寸不会再额外增加，而是内容区域的尺寸会相应缩小。

同样用代码示例来直观感受一下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>怪异盒模型示例</title>
 <style>
 .box {
 width: 200px;
 height: 150px;
 padding: 20px;
 border: 10px solid black;
 margin: 30px;
 box-sizing: border-box;
 background-color: lightgreen;
 }
 </style>
</head>

<body>
 <div class="box">这是一个使用怪异盒模型的div元素</div>
</body>
</html>

这里设置.box元素的width为 200px，height为 150px，padding为 20px，border为 10px，margin为 30px，且box-sizing为border-box。此时，元素的总宽度就是 200px（包含了内边距和边框） + 30px×2（左右外边距） = 260px；总高度是 150px（包含了内边距和边框） + 30px×2（上下外边距） = 210px ，内容区域的宽度则变为 200px – 20px×2（左右内边距） – 10px×2（左右边框宽度） = 140px，高度变为 150px – 20px×2（上下内边距） – 10px×2（上下边框宽度） = 90px 。通过浏览器预览，能清晰看到怪异盒模型下元素尺寸的变化规律与标准盒模型的不同。

在 CSS 中切换盒模型

box-sizing 属性

在 CSS 中，我们通过box-sizing属性来在标准盒模型和怪异盒模型之间进行切换，box-sizing属性有两个主要值：content-box和border-box。

content-box：这是box-sizing的默认值，表明使用标准盒模型。当我们将元素的box-sizing设置为content-box时，前面提到过，元素的width和height只表明内容区域的大小，元素的总尺寸会根据padding、border和margin的值相应增加。

border-box：将box-sizing设置为border-box，就启用了怪异盒模型。此时，元素的width和height包含了内容区域、内边距和边框的尺寸，增加padding和border不会改变元素的总尺寸，而是内容区域的尺寸会相应缩小。

例如，我们有一个<div>元素，初始设置如下：

div {
  width: 300px;
 height: 200px;
 padding: 20px;
 border: 5px solid black;
 margin: 10px;
}

如果我们希望它使用标准盒模型，不需要额外设置box-sizing属性，由于默认就是content-box；若要让它使用怪异盒模型，只需要添加box-sizing: border-box;即可：

div {
  width: 300px;
 height: 200px;
 padding: 20px;
 border: 5px solid black;
 margin: 10px;
 box-sizing: border-box;
}

通过修改box-sizing属性的值，我们就能轻松切换盒模型，以满足不同的布局需求。

全局设置盒模型

在现代前端开发中，为了简化布局计算，避免因内边距和边框导致的布局问题，一般会将box-sizing属性全局设置为border-box ，这样可以让所有元素的尺寸计算方式变得统一且更符合直观预期。

要全局设置box-sizing为border-box，我们可以使用 CSS 的通配符选择器* ，代码如下：

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

上述代码中，*选择器选中了所有元素，*::before和*::after分别选中了所有元素的before伪元素和after伪元素，通过这样的设置，页面上几乎所有元素都会使用怪异盒模型来计算尺寸。例如，在一个响应式布局中，我们有一个宽度为 50% 的容器，并且希望它内部有一些内边距和边框，如果不全局设置box-sizing: border-box;，那么当我们添加内边距和边框时，容器的实际宽度就会超过 50%，导致布局错乱；而设置了全局的box-sizing: border-box;后，容器的宽度始终保持为 50%，内边距和边框会包含在这 50% 的宽度内，使得布局更加稳定和可控。

当然，在某些特殊情况下，如果某个元素需要恢复使用标准盒模型，我们可以在该元素的样式中单独设置box-sizing: content-box;来覆盖全局设置。列如一些特定的图标元素，可能需要准确控制内容区域的大小，就可以通过这种方式恢复到标准盒模型。

盒模型在实际布局中的应用

布局控制

盒模型是网页布局的基石，通过对元素的宽度、高度、内边距、边框和外边距的准确控制，我们能够构建出各种复杂且精美的页面布局。以常见的两列布局为例，假设我们要创建一个左侧导航栏和右侧内容区域的页面结构。HTML 代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>两列布局示例</title>
 <link rel="stylesheet" href="styles.css">
</head>

<body>
 <div class="container">
 <div class="sidebar">
 <h3>导航栏</h3>
 <ul>
 <li><a href="#">首页</a></li>
 <li><a href="#">关于</a></li>
 <li><a href="#">服务</a></li>
 <li><a href="#">联系我们</a></li>
 </ul>
 </div>

 <div class="content">
 <h2>欢迎来到我的网站</h2>
 <p>这是一个使用盒模型创建的两列布局示例，左侧是导航栏，右侧是主要内容区域。</p>
 </div>
 </div>
</body>
</html>

对应的 CSS 样式如下：

.container {
  width: 100%;
 display: flex;
}

.sidebar {
 width: 200px;
 background-color: lightgray;
 padding: 10px;
 border-right: 1px solid #ccc;
 margin-right: 20px;
}

.content {
 flex: 1;
 background-color: white;
 padding: 10px;
}

在这个例子中，我们使用了display: flex来创建一个灵活的容器。.sidebar元素设置了固定的宽度为 200px，并通过padding设置内边距，border-right设置右边框，margin-right设置与右侧内容区域的外边距。.content元素使用flex: 1使其占据剩余的空间，同样通过padding设置内边距。通过这样的方式，利用盒模型的各个属性，我们成功实现了一个简单的两列布局。

响应式设计

在当今移动设备多样化的时代，响应式设计至关重大。盒模型在响应式设计中发挥着关键作用，协助我们的网页适应不同设备的屏幕尺寸。通过使用百分比、弹性单位（如em、rem）和媒体查询，结合盒模型的属性，我们可以让页面元素在不同屏幕上合理布局和显示。

例如，我们有一个包含多个商品展示框的页面，HTML 结构如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>响应式商品展示</title>
 <link rel="stylesheet" href="styles.css">
</head>

<body>
 <div class="product-container">
 <div class="product">
 <img src="product1.jpg" alt="商品1">
 <h3>商品1</h3>
 <p>这是商品1的描述。</p>
 </div>

 <div class="product">
 <img src="product2.jpg" alt="商品2">
 <h3>商品2</h3>
 <p>这是商品2的描述。</p>
 </div>

 <div class="product">
 <img src="product3.jpg" alt="商品3">
 <h3>商品3</h3>
 <p>这是商品3的描述。</p>
 </div>
 </div>
</body>
</html>

CSS 样式如下：

.product-container {
  width: 100%;
 display: flex;
 flex-wrap: wrap;
 justify-content: space-around;
}

.product {
 width: 30%;
 margin-bottom: 20px;
 border: 1px solid #ccc;
 padding: 10px;
 box-sizing: border-box;
}

.product img {
 width: 100%;
 height: auto;
}

@media (max-width: 768px) {
 .product {
 width: 45%;
 }
}

@media (max-width: 480px) {
 .product {
 width: 100%;
 }
}

在上述代码中，.product-container使用display: flex和flex-wrap: wrap实现商品展示框的自动换行排列，justify-content: space-around使它们在容器中均匀分布。.product元素初始宽度设置为 30%，随着屏幕宽度的减小，通过媒体查询，在宽度小于 768px 时，将宽度调整为 45%，当宽度小于 480px 时，宽度变为 100%，从而实现了在不同屏幕尺寸下商品展示框的合理布局。同时，设置box-sizing: border-box确保在调整内边距和边框时，元素的总宽度不会超出预期，保证了布局的稳定性。

常见布局问题及解决方法

在使用盒模型进行布局时，我们可能会遇到一些问题：

元素尺寸超出预期：在标准盒模型下，当我们为元素设置了width和height，又添加了padding和border时，元素实际占据的空间会超出设定的width和height 。列如，一个设置了width: 300px; height: 200px; padding: 10px; border: 5px solid black;的元素，实则际宽度将变为 330px（300px 内容宽度 + 20px 左右内边距 + 10px 左右边框宽度），高度变为 230px（200px 内容高度 + 20px 上下内边距 + 10px 上下边框宽度）。解决方法是使用怪异盒模型，通过设置box-sizing: border-box;，让元素的width和height包含内边距和边框，这样在调整内边距和边框时，元素的总尺寸不会改变，内容区域的尺寸会相应缩小。

外边距合并导致布局错乱：在垂直方向上，相邻的块级元素的外边距会合并为较大的那个值。列如一个元素设置margin-bottom: 20px，紧挨着的下方元素设置margin-top: 30px，那么这两个元素之间的实际间距是 30px，而不是 50px。这可能会导致布局不符合预期。解决方法有多种，列如可以使用padding或border来替代margin来控制元素之间的间距；也可以通过创建块格式化上下文（BFC）来避免外边距合并，例如为父元素设置overflow: hidden;或display: flow-root;等。例如：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>解决外边距合并问题</title>
 <style>

 .parent {
 overflow: hidden;
 }

 .child1 {
 margin-bottom: 20px;
 background-color: lightblue;
 }

 .child2 {
 margin-top: 30px;
 background-color: lightgreen;
 }
 </style>
</head>

<body>
 <div class="parent">
 <div class="child1">这是第一个子元素</div>
 <div class="child2">这是第二个子元素</div>
 </div>
</body>
</html>

在这个例子中，通过为父元素.parent设置overflow: hidden;，创建了一个新的 BFC，使得子元素.child1和.child2的外边距不再合并，从而达到了预期的布局效果。

总结回顾

CSS 盒模型作为网页布局的基础，贯穿于前端开发的方方面面。从简单的元素样式设置，到复杂的页面布局搭建，再到响应式设计的实现，盒模型都发挥着不可或缺的作用。通过本文，我们深入了解了盒模型的组成部分，包括内容区域、内边距、边框和外边距，以及标准盒模型与怪异盒模型的区别和在 CSS 中切换盒模型的方法。同时，还探讨了盒模型在实际布局中的应用，以及如何解决常见的布局问题。

希望大家在今后的前端开发项目中，能够充分运用盒模型的知识，根据具体的设计需求，灵活选择合适的盒模型类型，合理设置元素的各项属性，打造出布局合理、美观且兼容性良好的网页。不断实践和总结经验，你会发现盒模型这一基础概念将成为你前端开发道路上的得力工具。

文章版权归作者所有，未经允许请勿转载。如内容涉嫌侵权，请在本页底部进入<联系我们>进行举报投诉!

THE END