CSS盒模型

盒模型包括哪些属性
内容区域
内边距 padding （在内容周围增加额外的空间）
边框 border
外边距 margin （提供元素之间的间距）
轮廓 outline （与border不同轮廓绘制在元素框上，不影响元素的大小或定位IE7以下不支持）

盒模型
text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中
作用是使行内元素居中，只能作用在行内元素上，而不能使块元素居中

只能使行内元素居中
如果遇到一个属性想知道兼容性，在哪查看?
http://caniuse.com/ 可以搜索属性兼容性。
http://caniuse.com/#search=new%20elements 搜索new elements可查看HTML5新增加的语义标签。
IE 盒模型和W3C盒模型有什么区别?
IE盒模型：IE早期版本在混杂模式中(不声明!DOCTYPE HTML)使用自己的非标准盒模型。在这些版本中width属性不是内容的宽度，而是内容+内边距+边框的总和宽度。
W3C盒模型：W3C盒模型是标准盒模型，width只为内容的宽度。
以下代码的作用？兼容性？

*{ box-sizing: border-box;}

为页面所有元素添加样式 box-sizing: border-box; ，使元素的内边距和边框不再会增加它的宽度。
下图可以看出div1设置了padding和border值但是宽高与div2一直可以看出box-sizing: border-box;的效果。

box-sizing: border-box;
box-sizing: border-box;兼容性

box-sizing兼容性

本博客版权归杨然和饥人谷所有，转载需说明来源