任务九-CSS盒模型

1.盒模型包括哪些属性?

答：css和模型主要包括外边距（margin），内边距（padding），边框（border），内容（content）。一般来说，我们在对一个div写样式的时候添加的height和width只是针对内容本身，所以总的高度是要加上内外边距及边框的。

盒子模型示例

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

答：text-aling：center是针对内联元素的属性。控制内联元素在块级元素中位置居中。一般设置文本比较常见，或Img标签。用margin:0 auto 设置块元素（或与之类似的元素）的居中。

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

答：在 can i use这个网站上可以查看元素 属性在不同浏览器不同版本的兼容程度。

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

答：

• IE盒模型写出来的宽高是包括内容content和margin两者的。而这里的content也含有border和padding。
• W3C标准盒模型是写出来的宽高就是内容本身，我们可以在样式里在对Margin，padding，border进行定义。

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

*{ 
box-sizing: border-box;
}```
答：首先box-sizing这个属性它有三个值：content-box，border-box，padding-box。
border-box的意思是让border和padding合并在一起，定义的样式宽度直接就包括这些。后两者顾名思义content即是内容区域的宽高度就是盒子总宽高，padding-box是让内边距并入总宽高。

![box-sizing兼容性查询](http://upload-images.jianshu.io/upload_images/2349092-212108f5a7f7ed90.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

****本教程版权归饥人谷_鬼脚七和饥人谷所有，转载须说明来源****