一、盒模型包括哪些属性
盒模型包括：内容、内边距（padding）、边框（border）、外边距（margin）
这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模式。
Paste_Image.png
两个盒子上下的外边距（margin）会合并，外边距小的那个会被大的覆盖。
举个栗子：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
.box{
box-sizing: border-box;
border: 10px solid #ccc;
width: 300px;
height:300px;
background-color: green;
padding: 10px;
margin-bottom: 50px;
}
.box2{
border: 10px solid #ccc;
width: 300px;
height:300px;
background-color: green;
padding: 10px;
margin-top:20px;
}
</style>
</head>
<body>
<div class="box">
<p>这里是盒子</p>
</div>
<div class="box2">
<p>
这是第二个盒子
</p>
</div>
</body>
</html>
Paste_Image.png
二、text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中
让块级元素里面的行内元素居中，是相对于父级元素为标准。比如盒模型中的内容、图片。
块级元素通过设置margin：0 auto；来居中。
三、如果遇到一个属性想知道兼容性，在哪查看?
在can i use网站上查看
四、IE 盒模型和W3C盒模型有什么区别?
ie盒模型(不添加doctype声明)，content=边框+padding+内容宽度
w3c盒模型（添加doctype声明），content=内容宽度
IE 盒子模型的 content 部分包含了 border 和 pading。
五、以下代码的作用？兼容性？
*{ box-sizing: border-box;}
盒模型以边框作为界限，便于计算。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
.box{
box-sizing: border-box;
border: 10px solid #ccc;
width: 300px;
height:300px;
background-color: green;
padding: 10px;
margin: 0px auto 50px auto;;
}
.box2{
border: 10px solid #ccc;
width: 300px;
height:300px;
background-color: green;
padding: 10px;
margin:0 auto ;
}
</style>
</head>
<body>
<div class="box">
<p>这里是盒子</p>
</div>
<div class="box2">
<p>
这是第二个盒子
</p>
</div>
</body>
</html>
QQ截图20160720122521.jpg
设置了box-sizing: border-box;后，padding(内边距)和border(边框)就计算入width之内了，跟上面的怪异模式一样。
兼容性：
Paste_Image.png
