CSS盒模型

CSS盒模型仅仅是一个形象的比喻。在HTML中所有的标签都可以看作盒子。
宽度/高度 width/height => 指定可以存放内容的区域
边框 border => 盒子本身
内边距 padding => 盒子边框与内容之间的间隙
外边距 margin => 盒子和盒子之间的间隙

标准盒子模型：

宽度 = margin-left + margin-right + border-left + border-right + padding-left + padding-right + content
高度 = margin-top + margin-bottom + border-top + border-bottom + padding-top + padding-bottom + content

IE盒子模型：

宽度 = margin-left + margin-right + width
(width=content+padding-left+padding-right+border-left+border-right）
高度 = margin-top + margin-bottom + height
(height= content+padding-top+padding-bottom+border-top+border+bottom)

box-sizing属性

该属性用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型。可以使用此属性来模拟不正确支持CSS盒子模型规范的浏览器的行为。

增加了padding之后，元素的宽高也会发生变化。所以如果增加了padding之后还想保持元素的宽高，就必须减去内容的宽高（width / height）。增加border属性宽高同理。CSS3新增的box-sizing属性，可以保证我们给盒子新增padding和border属性之后，盒子元素的宽度和高度不变。

取值：

• box-sizing：content-box；（默认值）
  如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
• box-sizing：border-box；
  告诉浏览器去理解你设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px,那么这100px会包含其它的border和padding，内容区的实际宽度会是width 减去 border + padding的计算值。大多数情况下这使得我们更容易的去设定一个元素的宽高。

注意：
1）如果两个盒子是嵌套关系，那么设置了里面一个盒子顶部的外边距，外面一个盒子也会被顶下来；
2）如果外面的盒子不想被一起顶下来，那么可以给外面的盒子添加一个边框属性；
3）一般情况下，如果需要考虑控制嵌套关系盒子之间的距离，应首先考虑padding，其次再考虑margin

盒子居中

margin：0 auto； 让盒子自己水平居中，对垂直方向无效

内容居中

text-align:center; 设置盒子中存储的文字/ 图片水平居中

在嵌套关系的盒子中，我们可以利用 margin：0 auto； 的方式来让里面的盒子在外面的盒子中水平居中