盒模型详解

盒模型，英文名：“box model”。所有的html元素都可以被看作一个盒子，而盒模型描述了元素所占空间的内容。每个盒子包括有外边距(margin)、边框(border)、内边距(padding)和实际内容(content aera)。

如图所示：

Box.png

下面，来介绍具体一下盒模型中的基本元素

content area

盒子的中心是内容content，content可以是任何元素，我们可以给content设定宽度width和高度height等属性来确定内容大小。

border

有了内容，可以给内容设定一个边框border将里面的内容包裹住。给元素设定border是比较常见的方法。如果当你在做布局时，写了几组块级元素而又搞不清楚他们互相嵌套的关系，或者想要知道一些元素实际的空间，可以给加上给他们加上border: 1px solid red;1像素的红色实线边框，就一目了然了。
值得一提，如果要让盒模型显示边框，一定会占用元素的空间。如果不想占用元素的空间，可以给元素设定outline，既可以显示元素的边框，又不会占空空间。

padding

padding是盒模型中的内边距，顾名思义，就是内容距离边框的内部距离。padding的值不能为负。我们可以给padding分别设定padding-top、padding-bottom、padding-left、padding-right四个属性来设定元素的上下左右内边距，也可以将padding的四个属性都写在一个padding中来表示。根据padding中值的指定个数，有如下四种情况，可以视情况而定。

• 指定一个值时 该值指定四个边的内边距
• 指定两个值时 第一个值指定上下两边的内边距 第二个指定左右两边的内边距
• 指定三个值时 第一个指定上边的内边距.第二个指定左右两边 第三个指定下边
• 指定四个值时分别为上 右 下 左（顺时针顺序）

margin

margin是盒模型中的外边距。在网页中看到的相邻元素间分隔的距离，呈现出的优美效果，通常都是给元素设定的margin属性起的作用。我们同样给margin设定margin-top、margin-bottom、margin-left、margin-right四个属性来确定四个方向的边距。具体的用法可以参照上述padding的用法。
有趣的是，我们可以给元素设定负margin，而这在css规范中是被允许的，并且是很常见的。可以增加块状元素宽度，在不给元素设定浮动或定位的情况下，就能让元素进行位移。

box-sizing

box-sizing属性是用于更改用于计算元素宽度和高度的默认的CSS盒模型。box-sizing有两个值，content-box和border-box ,那两者都有什么区别呢？

• content-box是默认值，就是标准的盒子属性。其中元素的宽度width和高度height在计算时只是包括内容content的width和height，并不包含border、margin、padding这些元素。
• border-box则不同，元素的宽度width和高度height在计算时不但包括内容content的width和height，还包括了border和padding三样东西加在一起构成的，等于是元素的宽高等价于包括border内部的宽高。

所以在CSS中我们经常会设定这样一条属性box-sizing: border-box;，便于计算盒模型的宽高。

总结

知道了上述有关盒模型的基本概念，我们可以自己动手，在浏览器中检查元素，在样式中就可以看到所选元素的盒模型了，如下图所示chrome浏览器的盒模型，一起来试一下吧。

chrome.png