什么是盒子模型？

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了盒子模型(Box Model)：

盒子模型.png

边框

border-color

属性	说明	示例
border-top-color	上边框颜色	border-top-color:#369;
border-right-color	右边框颜色	border-right-color:#369;
border-bottom-color	下边框颜色	border-bottom-color:#fae45b;
border-left-color	左边框颜色	border-left-color:#efcd56;
border-color	四个边框为同一颜色	border-color:#eeff34;
上、下边框颜色：#369 左、右边框颜色：#000	border-color:#369 #000;
上边框颜色：#369 左、右边框颜色：#000 下边框颜色：f00	border-color:#369 #000 #f00;
上、右、下、左边框颜色： #369、#000、#f00、#00	border-color:#369 #000 #f00 #00f;

边框粗细

border-width

thin
medium
thick
像素值

示列：

border-top-width:5px; 
border-right-width:10px; 
border-bottom-width:8px; 
border-left-width:22px; 
border-width:5px ; 
border-width:20px 2px;
border-width:5px 1px 6px;
border-width:1px 3px 5px 2px;

边框样式

border-style

none
hidden
dotted
dashed
solid
double

示列：

border-top-style:solid; 
border-right-style:solid; 
border-bottom-style:solid; 
border-left-style:solid; 
border-style:solid ; 
border-style:solid dotted;
border-style:solid dotted dashed;
border-style:solid dotted dashed double;

border简写

同时设置边框的颜色、粗细和样式

示列：

border:1px solid #3a6587;
border: 1px dashed red;

外边距

margin

margin-top
margin-right
margin-bottom
margin-left
margin

示列：

margin-top: 1 px
margin-right : 2 px
margin-bottom : 2 px
margin-left : 1 px
margin :3px 5px 7px 4px;
margin :3px 5px;
margin :3px 5px 7px;
margin :8px;

外边距的妙用

网页居中对齐

示列：

margin:0px  auto;

内边距

padding

padding-left
padding-right
padding-top
padding-bottom
padding

示列：

padding-left:10px; 
padding-right: 5px; 
padding-top: 20px; 
padding-bottom:8px; 
padding:20px 5px 8px 10px ; 
padding:10px 5px; 
padding:30px 8px 10px ; 
padding:10px;

box-sizing

语法：box-sizing: content-box|border-box|inherit:

值	说明
content-box	默认值。如果你设置一个元素的宽为 100px，那么这个元素的内容区会有 100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
border-box	告诉浏览器：你想要设置的边框和内边距的值是包含在 width 内的。也就是说，如果你将一个元素的 width 设为 100px，那么这 100px 会包含它的 border 和 padding，内容区的实际宽度是 width 减去(border + padding) 的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。注：border-box 不包含 margin。
inherit	指定 box-sizing 属性的值，应该从父元素继承

content-box 和 border-box 描述的太抽象了，这样更不好理解。

直观通俗的解释是：

content-box：指定盒模型为 W3C 标准模型，设置 border、padding 会增加元素 width与 height 的尺寸，即 border 与 padding 相当于是元素的“殖民地”，元素的“土地”、尺寸会增加，为向外延伸。

border-box：指定盒模型为 IE模型（怪异模式），设置 border、padding 不会影响元素 width 与 height 的尺寸，即 border 与 padding 由元素已设空间转变。即空间还是这个空间，只是将部分空余的地方，转变成了其他空间用法而已，为内部转变。

设置border与padding与被影响属性值的关系公式：

W3C标准盒模型（conten-box值）【width/height被改变，扩展】
width = content + border + padding;

// 其中，width 为浏览器视窗呈现尺寸，content 为在CSS中设置的元素的 width;

IE怪异盒模型（border-box值）【content被改变，压缩】
content = width - border - padding;

// 其中，width 为在CSS中设置的元素的width;


具体可用浏览器调试看看，多观察观察就懂了。
总之：

1.W3C标准盒模型（content-box），border、padding 的设置会破坏元素宽高，必须得重新计算，非常麻烦（除了在IE浏览器，默认就是标准盒模型，所以可以用 box-sizing 来转换）；

2.IE（怪异）盒模型（border-box），border、padding 的设置不会影响元素的宽高，这非常实用（且因为IE盒模型不是标准，所以才有 box-sizing 这个标准属性来设置，将它标准化）【IE6/5 是怪异模型，IE7开始是标准盒模型】

另外的小技巧：【行高的计算】

/* 默认, W3C标准盒模型、 box-sizing: content-box */
<style type="text/css">
    .box {
      width: 200px;
      height: 200px;
      text-align: center;
      border: 10px solid black;
      padding: 15px;
    }
</style>
/* 此时的行高：line-height = height = 200px;*/
/* 【因为行高即内容的高，而内容在这里即元素的高（边框和填充是扩展外部空间的）】 */

/* - - - - - - 分割线 - - - - - - */

/* IE怪异盒模型、box-sizing: border-box; */
<style type="text/css">
    .box {
      width: 200px;
      height: 200px;
      text-align: center;
      border: 10px solid black;
      padding: 15px;
      box-sizing: border-box;
    }
</style>
/* 此时的行高：line-height = height - border*2 - padding*2 = 200px - 10px*2 - 15px*2 = 150px; */
/* 【因为此时，内容的其余空间被边框和填充占用，所以是元素的高减去边框和填充的空间，剩余即为内容空间】 */

盒子模型