task9-盒模型

盒模型包括哪些属性？

margin ：边距
border : 边框
padding ：填充
content : 内容

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

text-align : center 必须加在块级元素（父元素）上。
行内元素加text-align : center ,margin想设置居中是无效的。块级元素设置居中，在他自身设置margin和padding即可。text-align : center 是可继承的。块级元素一定要设置宽度，才能通过设置margin：0 auto；来设置居中。

如果遇到一个属性想知道兼容性，在哪查看?

查兼容caniuse

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

IE6/7/8 不写doctype，怪异模式
宽度=boder+padding+内容

chrome/IE9,IE6/IE7/IE8 著名doctype声明，那么是标准盒模型。
宽度就是内容自身占据的空间。

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

*{ box-sizing: border-box;}

1、content-box:此值为其默认值，其让元素维持W3C的标准Box Model，也就是说元素的宽度/高度（width/height）等于元素边框宽度（border）加上元素内边距（padding）加上元素内容宽度/高度（content width/height）即：Element Width/Height = border+padding+content width/height。

2、border-box:此值让元素维持IE传统的Box Model（IE6以下版本），也就是说元素的宽度/高度等于元素内容的宽度/高度。（从上面Box Model介绍可知，我们这里的content width/height包含了元素的border,padding,内容的width/height【此处的内容宽度/高度=width/height-border-padding】）。

** CSS3盒模型 **

box-sizing: content-box|border-box|inherit;

CSS3盒模型

box-sizing中content-box和border-box两者的区别，如下所示：

box-sizing

box-sizing现代浏览器都支持，但IE只有IE8版本以上才支持，虽然现在的浏览器支持box-sizing，但有些浏览器还是需要加上自己的前缀，Mozilla需要加上-moz-，Webkit内核需要加上-webkit-，Presto内核-o-,IE8-ms-，所以box-sizing兼容浏览器时需要加上各自的前缀：

/*Content box*/ 
Element {
 -moz-box-sizing: content-box; /*Firefox3.5+*/
 -webkit-box-sizing: content-box; /*Safari3.2+*/ 
-o-box-sizing: content-box; /*Opera9.6*/ 
-ms-box-sizing: content-box; /*IE8*/ 
box-sizing: content-box;
 /*W3C标准(IE9+，Safari5.1+,Chrome10.0+,Opera10.6+都符合box-sizing的w3c标准语法)*/
 } 
/*Border box*/ 
Element { 
-moz-box-sizing: border-box; /*Firefox3.5+*/ 
-webkit-box-sizing: border-box; /*Safari3.2+*/ 
-o-box-sizing: border-box; /*Opera9.6*/ 
-ms-box-sizing: border-box; /*IE8*/ 
box-sizing: border-box; 
/*W3C标准(IE9+，Safari5.1+,Chrome10.0+,Opera10.6+都符合box-sizing的w3c标准语法)*/ 
}

本题参考W3CPLUS