有宽度的盒子与没有宽度的盒子

简介

之前有看到过 box-sizing 这个属性，一开始不是特别理解，后来在《CSS 设计指南 (第3版)》中阅读到一个章节，觉得解释地非常通俗易懂，所以就记录下来。

没有宽度的盒子

没有宽度：没有指定 width 属性。
我们先写一个 p 标签，它包含一些文字内容。(为了方便看到效果，需要将 body 和 p 标签自带的 margin 去掉)

    
        

            额我额我额我额我额我额我额我额我额我额我额我额我额我
额我额我额我额我额我额我额我额我额我额我额我额我额我额我额我额我额我
        
    

这里我为了方便测试，所以将浏览器调到一个较小的宽度 (此时 body 的宽度是 655px)，因为 p 标签是块元素，所以默认占满一行，此时它的宽度是 655px, 同时内容区的宽度也是 655px.

[email protected]

此时我们为这个 p 元素加上 padding 属性： padding: 0 20px.

nowidth-addpadding.png

可以看到 p 元素的整体宽度还是 655px, 只是文字内容的宽度较少了，目前内容区的宽度是 615px.
我们继续为 p 元素添加属性： border:6px solid red; borderwidth: 0 6px 0 6px;

nowidth-addborder.png

p 元素的宽度还是 655px, 文字内容的宽度再次减少，现在的宽度是 603px.
最后我们再为 p 元素增加 margin 属性： margin: 0 20px;, 再次改变它的宽度。
如果大家有用 Chrome 浏览器的话，可以根据调试工具给出的盒模型进行查看。

nowidth-addmargin.png

此时整个 p 元素的宽度是：563 + 20 * 2 + 6 * 2 + 20 * 2 = 655px. 这和我们一开始看到的宽度是一样的，但是内容区的宽度却由于各个属性而减少了，具体的情况是：总宽度减去外边距的宽度，减去边框的宽度，再减去内边距的宽度。( 655 - 20 * 2 - 6 * 2 - 20 * 2 )
所以我们的结论是： 在没有宽度的盒子上使用 margin, padding, border 属性只会改变内容区的宽度，而元素本身的宽度是不会发生变化的。

有宽度的盒子

有宽度：指定了 width 属性。
我们重新定义一个 p 标签，并为它指定宽度： width: 400px. 此时的 body 宽度是 655px.

width-400px.png

我们还是模仿之前的步骤，先给它加上 padding: 0 20px.

width-addpadding.png

这个时候出现了我们没有预料到的情况，根据之前的经验，应该会减少内容区的宽度才对，但是这次内容区的宽度并没有改变，反而整个元素的宽度改变了，变成了 440px.
我们再为这个元素加上 margin 与 border, 看看还会发生什么变化。

margin: 0 20px;
border: 6px solid red;
border-width: 0 6px 0 6px;

width-addborderandmargin.png

元素的内容区仍然没有发生改变，还是和一开始的 400px 一致，反倒整个元素的宽度变成了 400 + 内边距 (20 * 2) + 边框 (6 * 2) + 外边距 (20 * 2) = 492. 所以我们可以得出一个结论，即使我们给盒子指定了宽度，但是这个宽度却只是内容区的宽度，并不能限制整个盒子的宽度。

box-sizing

在实际开发中，有时候我们为一个盒子指定 width: 400px; 这个属性时，其实是想让它的整体宽度保持 400px 不变，而不是想指定它内容区的宽度，这个时候就可以使用 box-sizing 这个属性啦。这个属性可以改变有宽度的盒子的宽度变化行为。

• box-sizing: content-box; 默认值，当有 margin, padding 属性时，即使指定了 width: 400px;，仍然会改变元素的总宽度。
• box-sizing: border-box; 这个属性会让盒子像没有宽度的盒子那样，当你为它添加内边距或是外边距时，它就会改变内容区的宽度，而不会改变整个盒子的宽度。

最后

如果你对一个没有宽度的盒子使用 box-sizing 这个属性的话，无论是哪种值，元素的总体宽度不会发生改变，只会改变内容区的宽度。