CSS3盒子模型的那些事儿(全要点+代码示例+效果展示)

一 box-sizing取值及用法

效果展示(代码在下方)：

1.1 box-sizing: content-box

默认取值，也就是当为元素设置宽度时，该元素设置的宽度为内容宽度，而不包括内边距，边框和外边距。

该元素的实际宽度为
$$设置的宽度(内容宽度)+内边距+边框+外边距$$

content-box是默认值，可以在上图中看到，该div溢出了两个边框的宽度，这是由于设置宽度时，设定的宽度不包含边框，所以在宽度与父元素可容纳宽度设置相同的情况下，边框的宽度溢出了，注意，这里没有设置内边距和外边距，如设置了，该div的溢出值为边框+内边距+外边距，因为此时的宽度未包括这三者。

1.2 box-sizing: border-box

当为元素设置宽度时，该元素设置的宽度为内容宽度+内边距+边框。注意，不包括外边距。

该元素的实际宽度为
$$设置的宽度(内容宽度+内边距+边框)+外边距$$
border-box，可以在上图中看到，该div未溢出，因为设置宽度包含了除外边距以外的宽度，所以在不设置外边距的情况下，子元素是不溢出的。

下文代码中包含了一些常用选择器，如感觉有所疑惑，可先阅读本专栏选择器部分：CSS3选择器（选择符）示例详解。

代码示例：

.par {
   height: 300px;
   width: 300px;
   border: solid black;
}
.par > div {
   height: 30px;
   width: 300px;
   border: solid red 10px;
}
.par > div:nth-child(1) {
   box-sizing: content-box;
   margin-bottom: 10px;
}
.par > div:nth-child(2) {
   box-sizing: border-box;
}

<div class="par">
    <div>我是content-box</div>
    <div>我是border-box</div>
</div>

二 盒模型的横向配置

(这里以标准盒模型，也就是content-box取值讨论)

盒模型从横向来讲，包括外边距，内边距，边框和内容区域。其中，边框只可以赋值为准确长度(此含义是其不可为百分比和auto)。而内边距不可为auto。

外边距和内容区域可为auto，这是我们接下来要讨论的内容。

2.1 单独的auto

左右边距和内容宽度，三个值，当设置两个值为定长一个值为auto，则auto可补全总和缺的尺寸，如果都设置定长，右边距自动设置为auto。

填满缺的尺寸，指填满父元素的容纳块。这里有一个公式。
$$外边距+边框+内边距+内容块=父元素的容纳块大小$$
现在可能还是有点抽象，但是下面的简单示例会对您有帮助。

此时，我们修改上文中的代码样式。

我们将外层div添加一个内边距，将子div设置为右边距固定，左边距auto，内容区域固定，得到的结果是子元素靠右，右侧与父元素外边框距离为30px，为自身右边距加父元素内边距，左侧空白部分是自适应的左外边距。

由此也可以看出，无论box-sizing的取值为何，上文中所说的容纳块始终为元素的内容区域。

效果展示(代码在下方)：

代码示例：

.par {
   margin-left: auto;
   margin-right: auto;
   height: 300px;
   width: 300px;
   border: solid black;
   padding: 30px;
}
.par > div {
   height: 30px;
   width: 200px;
   margin-right: 5px;
   margin-left: auto;
   border: solid red 10px;
}
.par > div:nth-child(1) {
   box-sizing: content-box;
   margin-bottom: 10px;
   padding: 2px;
}
.par > div:nth-child(2) {
   box-sizing: border-box;
   padding: 2px;
}

或者我们再次修改代码，使其左右边距固定，宽度自适应。

如果设置左右边距定长，宽度不做设置或者auto，则宽度自适应。

.par > div {
   height: 30px;
   width: auto;
   margin-right: 5px;
   margin-left: 5px;
   border: solid red 10px;
}

效果展示：

可以看到，无论如何，子元素与父元素之间的关系是满足上面的公式的，即子元素的实际宽度总是填满了父元素。注意，我们现在讨论的是块级元素。

2.1 多个auto的交叉作用

设置左右边距为auto，宽度定长的情况下，子元素则居中展示。

这个居中效果经常使用，效果也很好想象。也就是容纳块的大小会减去子元素边框大小后，剩下的宽度平均分配给子元素，相同的左右边距使它居中。

当外边距和宽度都为auto时，优先拉长宽度使得宽度公式成立，也就是说，此时auto的外边距为0。

下面的代码中，左边距和宽度都为auto，此时左边距为0，宽度被拉长到占满父元素容纳块为止。

效果展示(代码在下方)：

注意，为了效果这里将父元素的内边距去掉了。

代码示例(仅包含修改部分)：

.par > div {
    height: 30px;
    width: auto;
    margin-left: auto;
    margin-right: 30px;
    border: solid red 10px;
}

2.3 负数的外边距

负外边距可能导致子元素的溢出，或者当子元素宽度过大时，为了满足七等式原则，会自动设置负外边距。

在子元素宽度为auto时，负数的外边距会导致auto的子元素宽度变大，因为此时仍然要满足公式。
$$外边距+边框+内边距+内容块=父元素的容纳块大小$$
这体现到页面上就是子元素溢出的效果。

如果您只是想对元素的位置做移动而不是改变其宽度，就需要改变子元素宽度的值，取消其自适应，当然为了使公式成立，在左边距为负数，子元素边框大小确定，的情况下，右边距无论如何设置，都会被自动重置为auto。

对此前文中已提到，如果都设置定长，右边距自动设置为auto。

这体现到页面上就是子元素溢出的效果。

如果您只是想对元素的位置做移动而不是改变其宽度，就需要改变子元素宽度的值，取消其自适应，当然为了使公式成立，在左边距为负数，子元素边框大小确定，的情况下，右边距无论如何设置，都会被自动重置为auto。

对此前文中已提到，如果都设置定长，右边距自动设置为auto。

如图片等置换元素的宽度设置为auto时，指的是宽度为图片元素本身的宽度。