回答
- 盒模型包括哪些属性？1
- content：内容区域；
- padding：内边距；
- border：边框；
-
margin：外边距，透明存在的。
普通文档流中的块框的垂直外边距会叠加，叠加时，选取较大值。
CSS盒模型
-
text-align:center的作用是什么，作用在什么元素上？能让什么元素水平居中？居中
作用在块级元素上，可以使元素内的文本、图片、行内元素水平居中
.one {
text-align: center;
border: solid 1px red;
}
p{
border: 1px solid;
}
a{
text-decoration: none;
}```
效果：图中的段落没居中，但是段落中的文本居中显示。
如果要让其中的行内元素不受控制，`display: block`或者在其外部加一个块级元素，另设置对齐方式
```<body>
<div class="father">
很长的一段文字很长很长的，没了!
<p><a href="#" class="inline">这样挺好</a>我继承了父元素</p>
<p class="son"><a href="#" class="inline">我要做自己</a>我自己设置了对齐方式，不再继承</p>
</div>
</body>```
3. 如果遇到一个属性想知道兼容性，在哪查看？
[can I use](http://caniuse.com/)，
4. IE盒模型和W3C盒模型有什么区别？
* W3C盒模型：总宽度=margin-left + border-left + padding-left + width +padding-right +borer-right + margin-right.
* IE盒模型：总宽度=margin-left + width +margin-right.（padding和border的值算在width里）[more](http://www.osmn00.com/translation/213.html)
（给生活加点“料”：CSS3的box-sizing属性算法和IE盒模型是一样的？纠结了好一会，不是说IE盒模型不标准吗？就上网查“IE盒模型和W3C盒模型哪个好”结果看到了这个段子：
>IE：我觉得盒模型应该是这样的，blahblah。
W3C：明显应该是这样的才对，blahblah。
结果是 IE 在怪异模式下用了「不标准」的盒模型，标准模式下用了「标准」的盒模型。围观群众：听说 IE 的盒模型不标准。
……多年过去……
W3C：感觉还是 IE 的那个模型比较好。但我们已经回不去了……算了加个属性支持一下 IE 那种模式吧。
box-sizing
这货就是用来擦屁股的，我从来没见过有人用 border-box
的……
希望创建W3C盒模型的那个人不要太自责，人民大众和他在一起！）
5. 以下代码的作用？兼容性？
`*{box-sizing: border-box;}`
* 作用：元素的**内边距（padding）**和**边框（border）**不会增加它的**宽度**，width=border-left + padding-left + content +padding-right + border-right.
如果padding、border值增加，会减少相等的content的值，而width不改变。**（注意：当width一定时，总的宽度会随margin的改变而改变。）**
例如
.one {
width: 500px;
margin: 20px auto;
background-color: green;
}
.two {
width: 500px;
margin: 20px auto;
padding: 50px;
border-width: 10px;
background-color: red;
}```
上面代码，第二个元素的宽度的值要比第一个元素大，因为第二个的padding和border都有值。如果两个元素都加了box-sizing:border-box;属性，结果如下
.simple {
width: 500px;
margin: 20px auto;
box-sizing: border-box;
background-color: green;
}
.fancy {
width: 500px;
margin: 20px auto;
padding: 50px;
border-width: 10px;
box-sizing: border-box;
background-color: red;
}```
此时，两个元素的宽度相同。
* 兼容性：
