CSS 盒子模型 - 绿叶网

CSS 盒子模型，是用于定义元素如何在页面显示的模型，它规定了元素的宽度、高度、边框、内边距和外边距。

CSS 盒子模型简介

在 HTML 教程中，我们学习了一个很重要的理论：块级元素和行内元素。而在这一节中，我们将介绍 CSS 中极其重要的一个理论——CSS 盒子模型。

在 CSS 盒子模型理论中，页面中的所有元素都可以看成一个盒子，并且占据着一定的页面空间。下图为一个 CSS 盒子模型的具体结构。

CSS 盒子模型

一个页面由很多这样的盒子组成，这些盒子之间会互相影响，因此掌握盒子模型需要从两个方面来理解：

理解单独一个盒子的内部结构（往往是 padding）。
理解多个盒子之间的相互关系（往往是 margin）。

每个元素都看成一个盒子，盒子模型是由 4 个属性组成的：content（内容）、padding（内边距）、margin（外边距）和 border（边框）。此外，在盒子模型中，还有宽度 width 和高度 height 两大辅助性属性。记住，几乎所有的元素都可以看成一个盒子。

从上面我们可以知道，CSS 盒子模型的组成部分有 4 个，如下表所示。

CSS 盒子模型的组成
组成	说明
content	内容，可以是文本或图片
padding	内边距，用于定义内容与边框之间的距离
margin	外边距，用于定义当前元素与其他元素之间的距离
border	边框，用于定义元素的边框

1. 内容区

内容区是 CSS 盒子模型的中心，它呈现了盒子的主要信息内容，这些内容可以是文本、图片等多种类型。内容区是盒子模型必备的组成部分，其他 3 个部分都是可选的。

内容区有 3 个属性：width、height 和 overflow。使用 width 和 height 属性可以指定盒子内容区的高度和宽度。在这里注意一点，width 和 height 这两个属性是针对内容区 content 而言，并不包括 padding 部分。

当内容过多超出 width 和 height 时，可以使用 overflow 属性来指定溢出处理方式。

2. 内边距

在 CSS 盒子模型中，内边距指的是内容区和边框之间的空间，它可以看成是内容区的背景区域。

关于内边距的属性有 5 种：padding-top、padding-bottom、padding-left、padding-right 以及综合了以上 4 个方向的简写内边距属性 padding。使用这 5 种属性可以指定内容区与各方向边框之间的距离。

3. 外边距

在 CSS 盒子模型中，外边距指的是两个盒子之间的距离。它可能是子元素与父元素之间的距离，也可能是兄弟元素之间的距离。外边距使得元素之间不必紧凑地连接在一起，是 CSS 布局的一个重要手段。

外边距的属性也有 5 种：margin-top、margin-bottom、margin-left、margin-right 以及综合了以上 4 个方向的简写外边距属性 margin。

同时，CSS 允许给外边距属性指定负数值，当外边距为负值时，整个盒子将向指定负值的相反方向移动，以此可以产生盒子的重叠效果，这就是传说中的 “负 margin 技术”。例如，可以使用负 margin 来实现元素位置的调整、布局的微调或者创建一些特殊的视觉效果。

4. 边框

在 CSS 盒子模型中，边框属性有 border-width、border-style、border-color 以及综合了 3 类属性的简写边框属性 border 。

其中，border-width 指定边框的宽度，border-style 指定边框类型，border-color 指定边框的颜色。下面 2 种写法是等价的：

/* 写法 1 */
border-width: 1px;
border-style: solid;
border-color: gray;

/* 写法 2 */
border: 1px solid gray;

CSS 盒子模型示例

在 CSS 盒子模型中，内容区、内边距、边框、外边距这几个概念可能比较抽象，对于初学者来说，一时半会还没办法全部理解。不过没关系，待我们把这一章学习完再回来这里看一下就懂了。

示例：CSS 盒子模型的使用

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        div {
            /* 将块元素转换为行内块元素，使元素宽度由内容决定，便于观察盒子模型 */
            display: inline-block;
            padding: 40px;
            margin: 80px;
            border: 2px solid red;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div>绿叶网</div>
</body>
</html>

页面效果如下图所示（分析图）。

CSS 盒子模型的使用

分析：

在这个例子中，我们把 div 元素看成一个盒子，则 “绿叶网” 这几个字就是内容区（content），文本到边框的距离就是内边距（padding），而边框到其他元素的距离就是（margin）。此外还有几点要说明一下。

padding 是在元素内部，而 margin 是在元素外部。
margin 看起来不属于 div 元素的一部分，实际上 div 元素的盒子模型是包含 margin 的。

在这个例子中，我们使用 display 属性将元素转换为行内块元素（即 inline-block），其中 inline-block 元素的宽度是由内容区撑起来的。我们之所以在这个例子中将元素转换为 inline-block 元素，也是为了让元素的宽度由内容区撑起来，以便更好地观察。

CSS 盒子模型计算

在 CSS 盒子模型中，它的总宽度和总高度是通过以下公式来计算的。

总宽度 = 内容宽度 + 2 * 内边距 + 2 * 边框宽度 + 2 * 外边距
总高度 = 内容高度 + 2 * 内边距 + 2 * 边框宽度 + 2 * 外边距

例如，一个元素的宽度为 200px，高度 100px，内边距为 10px，边框为 2px，外边距为 20px，那么该元素的总宽度为：

总宽度 = 200px + 2 * 10px + 2 * 2px + 2 * 20px = 264px

而该元素的总高度为：

总高度 = 100px + 2 * 10px + 2 * 2px + 2 * 20px = 164px

提示: 如果你希望设置的 width 包含 “内容宽度” 和 “内边距” 而不包含 “边框宽度”，可以使用 box-sizing 属性来设置，也就是使用 box-sizing: border-box;。

浏览器控制台的使用

在实际开发中，为了更好地进行布局，我们需要获取某一个元素的盒子模型是怎样的，padding 是多少，margin 又是多少，然后再进行计算。那怎样才可以快速查看元素的盒子模型信息呢？我们可以通过浏览器自带功能 “审查元素” 来实现。

绝大多数主流浏览器操作是相似，下面我们以 Chrome 浏览器为例说明一下。

【第 1 步】：鼠标移到你想要的元素上面，然后按一下右键，选择 “检查”（或者按 Ctrl+Shift+I），如下图所示。

【第 2 步】：在弹出的控制台中，我们可以找到该元素的盒子模型，如图 21-19 所示。

浏览器控制台

浏览器提供的控制台功能非常强大，远不止这一个功能。使用浏览器控制台辅助开发，这是前端开发必备的一项基础技能。小伙伴们可以自行搜索一下这方面的使用技巧，深入学习一下。由于篇幅有限，这里就不详细展开介绍了。