盒模型

盒模型包括那些属性

文档中的元素被描绘为矩形盒子。每一个盒子有四个边界，分别为外边距边界，边框边界，内边距边界，内容边界。

盒模型.png

1. 内边距区域：是内容于边框之间可能有的空白区域。位于内边距边界内部，通常有背景，大小为padding-box宽与padding-box高。
   该区域可以有padding-top padding-left padding-right padding-bottom和简写属性padding控制。
2. 边框区域：是包含边框的区域，位于边框界内部，大小为border-box的款和高。由border属性控制。
3. 外边距区域：用空白区域扩展边框区域，用于分开相邻元素。它的大小为margin-box的宽高。
   该区域由margin-top margin-right margin-bottom margin-left或简写的margin控制。
4. 内容区域：是真正包含元素内容的区域。

text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中

作用是让文本内容以及内联元素对象在块级元素中居中，主要是让内联元素居中。在有固定宽度的块级元素中，也可以通过设置 margin:0 auto让块级元素居中。

text-align.png

IE 盒模型和W3C盒模型有什么区别?

在ie678下ie怪异模式(不添加doctype说明)，使用ie盒模型，宽度=border+padding+内容宽度

怪异模式.png
在chrome，ie9，ie678(添加doctype)使用w3c盒模式，宽度=内容宽度 标准盒模型.png

以下代码的作用？兼容性？

*{
  box-sizing: border-box;
}

box-sizing属性用来改变默认的盒模型对元素宽高的计算方式
box-sizing:border-box：对width和height设置包括了元素的内边距与边框，不包括外边距，也就是ie的怪异模式。width=border+padding+内容宽度 height=border+padding+内容高度。
box-sizing:content-box：对width和heigit的设置只包括内容的宽和高，不包括边框和内边距，也就是标准盒模式。

box-sizing.png
浏览器兼容性： 浏览器兼容性.png

代码

github
在线预览