CSS盒子模型 - 技术栈

盒子模型的概念：

引入：盒子模型是指网页中的基本元素都是盒子；CSS网页布局是对每个盒子进行设置样式，摆放位置的一系列操作。

实例：例如稀土掘金的网页端：该网页布局均由红色矩形方框的盒子组成，在绝大多数网页中，我们可以清晰地看出其主体结构的组成部分，这是盒子模型最显著的特性。

盒子都具有一些属性。在之前的html学习及代码的调试中，可能有许多同学在网页代码检查时发现这样的一个彩色的矩形方框：

在代码检查的窗口中这个彩色的方框代表的是盒子模型的重要属性，分别是：margin、border、padding、content(图中蓝色部分)；这四个属性共同构成一个盒子，接下来，我们解释一下这些属性的含义及其在页面布局中的使用。

1.margin（外边距）

margin代表的是盒子与盒子之间的距离，故名"外边距"；在网页布局中，盒子与盒子并不是紧紧相连在一起的，为了美化页面，通常在同一区块的盒子之间使用相等的外边距，外边距可单独设置某个方位（margin-left/right/top/bottom），使页面更加和谐；margin属性的设置语法有以下几种：

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: 10px;
        }

        .box2 {
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: 10px 20px;
        }

        .box3 {
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: 10px 20px 30px;
        }

        .box4 {
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: 10px 20px 30px 40px;
            /* 当有四个值时，它们按顺序分别表示为上外边距  右外边距  下外边距  左外边距，四条边距同上以此类推，该写法是按照顺时针的方式进行排序，从上外边距开始执行相应的数据 */
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

我们分别看看这四个盒子在实际网页中的显示效果：

当div的类名为box1时：

我们在box1的类选择器中设置了margin：10px；在网页源代码检查窗口，我们可以看到右下方的盒子模型中，最外侧的橙色矩形框中的数值被设置为10，且四条边都为10；如上代码中，只给margin一个值表示的是将所有的外边距都设置为10像素宽（红色箭头处）。

当div类名为box2时：

box2的类选择器中margin有两个数值，它们按顺序分别表示：上下外边距左右外边距，即将类名为box2的盒子上下外边距设置为10像素，左右外边距设置为20像素（红色箭头处）。

当div类名为box3时：

box3的类选择器中margin有三个数值，它们按顺序分别表示：上外边距左右边间距下外边距，即将类名为box3的盒子上边距设置为10像素，左右外边距设置为20像素，下外边距设置为30像素（红色箭头处）。

同理，当div的类名为box4时：

box4的类选择器出现了四个数值，这四个数值按照从上开始，顺时针排序的顺序分队对应盒子的四个外边距。

margin的值还可以是一个特殊值：auto（自动）；盒子的外边距会随着页面大小动态调整，保持盒子水平（或垂直）居中，将左右margin设置为0，上下margin设置为auto；则会垂直居中；反之则水平居中。

2.border（边框）

盒子的边框在一些合理的设置下可能出现一些不错的效果，例如以下界面中，仅设置上下边框且设置单独的颜色和粗细就可实现该效果，可让一些长栏（例如导航栏）变得美观。

边框有三个属性：粗细border-width（以像素为单位）；样式border-style（常用：实线solid、虚线dashed、点线dotted）；以及边框的颜色border-color。border可以对四个边框单独设置；但需使用复合属性（简写样式）。border的简写语法为：border：10px（宽度），solid（样式），red（颜色）；这三个属性没有顺序遵循，但约定俗成为此顺序。border的一个特性是，它并不包括在盒子（内容）大小之中，加上边框后实际大小会变大（因为多了边框的宽度，视觉上盒子变大，实际上包含内容的部分大小不变），若需要整体的大小不发生改变，可将盒子的大小减去边框宽度的两倍，即可使最终的盒子在网页中占用的大小是不变的。

3.padding（内边距）

padding的写法与margin无异，这里不过多赘述，padding在布局中需要注意的是，它会撑大盒子的大小，在网页的检查页面的盒子模型我们可以看到，padding与content是两部分，不参与盒子的内容大小的组成，这导致实际盒子会偏大。这里我们用一段代码来演示padding引起的影响：

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .nav {
            width: 200px;
            height: 200px;
            padding: 10px 20px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="nav"></div>
</body>

</html>

我们给这个盒子设置了200像素的宽和高，并将上下内边距设置为10像素；左右外边距设置为20像素，我们看看其在网页中的实际效果：

通过检查工具，我们发现这个盒子的大小变成240·220；根据我们设置的内边距数据，很明显，这是因为内边距将盒子撑开了，而内容（蓝色方框部分）通过检查工具，我们发现这个盒子的大小变成240·220；根据我们设置的内边距数据，很明显，这是因为内边距将盒子撑开了，而内容部分（蓝色方框部分）依旧是我们设置的200·200；这在实际布局中可能出现排版与预期不符的情况，所以在使用padding时，我们通常将想要的盒子大小减去内边距的大小然后将此数值设为样式声明中的盒子大小，这样就可以保证实际的盒子保持在我们想要的大小。

4.对盒子模型的一些补充

1.嵌套盒子（块级元素）塌陷问题：

当有两个块级元素发生嵌套时，且子元素与父元素都设置了外边距（margin）时，父块级元素会出现塌陷，我们用实际案例来解释这一现象：

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .nav {
            width: 200px;
            height: 200px;
            margin: 10px;
            background-color: pink;
        }

        .box {
            width: 100px;
            height: 100px;
            margin: 20px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <div class="nav">
        <div class="box">

        </div>
    </div>
</body>

</html>

我们对子元素设置了一个比父元素还大的外边距，我们看看在网页中的显示效果如何，并借助检查工具来理解塌陷的现象：

尽管我们对父盒子设置了10像素的外边距，并且盒子模型中的margin值也为10，但父盒子与页面的上边缘实际距离似乎还有一段与橙色（外边距部分）部分等宽的距离；下面我们看看子盒子的情况：

由于子盒子的外边距大于父盒子的外边距，并且父盒子没有设置padding、border属性时，子盒子的外边距落在了页面的上边缘，而不是父盒子的上边缘，而且父盒子与页面上边缘的距离变成了子盒子的外边距，这就是塌陷的现象。塌陷只会出现在垂直方向上，并且父盒子的外边距倾向于较大的那一个。

出现塌陷问题会使布局发生改变，我们可以通过给父元素设置某些样式来解决这个问题；例如上面提到的padding、border，我们也可以在父元素的样式声明中加入一串代码：overflow：hidden；也可解决这个现象，至于这串代码的意义，我们在之后的学习会进一步了解。

2.清除内外边距

在html的许多标签中，都带有一些默认的内外边距，有时会影响我们对页面布局的绝对控制，所以我们在实际开发中，会在CSS代码的最开始；对所有的元素的内外边距进行清除，方便后续我们自己设定（也是一种层叠性的体现），这里使用通配符选择器最为合适，代码如下：

CSS 复制代码

* {
    margin: 0;
    padding: 0;
}

注意，此代码一定要在CSS的首要位置，才能确保后续设置的内外边距根据CSS层叠的特性确保其起效。