一、盒模型包括哪些属性
定义：CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括内外边距、边框、填充、和实际内容。
包含属性：
Margin ：清除边框区域,Margin没有背景颜色，它是完全透明;
Border ：边框属性;
Padding ：清除内容周围的区域,会受到框中填充的背景颜色影响;
Content：盒子的内容,显示文本和图像;
下图为一个简单的盒子实例：
1.png
二、text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中
-
text-align: center的作用：
使元素文本内容水平居中，一般作用在块级元素上，使块级元素内部的行内元素在占据范围内居中显示，它居中是相对其父容器的空间范围居中的；
三、如果遇到一个属性想知道兼容性，在哪查看?
查询CSS属性的兼容性一般使用can i use网站；
如图，输入inline-block，查询结果，绿色块标示代表对应浏览器可以支持：
can i use
四、IE 盒模型和W3C盒模型有什么区别?
W3C盒模型（标准盒模型）：chrome， ie9+, ie678(添加 doctype) 使用标准盒模型， 宽度= 内容宽度，如下图：
标准盒模型
IE 盒模型：ie678怪异模式（不添加 doctype）使用 ie 盒模型，宽度=边框+padding+内容宽度，如下图：
ie盒模型
五、以下代码的作用？兼容性？
以下为代码及其作用备注：
*{
box-sizing: border-box;/*指定元素边框盒子，内边距和边框被包含在设定的宽高内部*/
}
兼容性：
box-sizing兼容性查询结果
六、写一个 btn 的class， 任何 a,span,div,button添加此class后后变成如下按钮的样式(鼠标hover背景色#c14d21, 鼠标按下背景色#e25f31)
<a class="btn" href="#">确定</a>
<span class="btn" >取消</span>
<div class="btn">提交</div>
<button class="btn"> 发送</button>
代码题
编写的代码及运行结果如下图：
代码题解答
声明：本博客版权归兰文聪和饥人谷所有，转载需说明来源！
