一、盒模型包括哪些属性？

CSS盒模型~即定义了Web页面中的元素是如何看做盒子来解析CSS盒模型属性有：
content~内容
- 盒模型的内容区，由width和height组成
padding~内边距
- 内边距是内容区和边框之间的空间，这个空间是透明的，没有颜色，没有装饰
- 单边内边距分别是：padding-top、padding-right、padding-bottom、padding-left
- 当padding的数值为百分数值时，其百分数值要相对于其父元素的width计算，而这里的padding包括了上下padding，即上下pading的百分数也会相对于元素宽度计算
border~边框
- border:[<border-width>] || [border-style] || [border-color] || inherit
- 单边边框简写分别是：border-top、border-right、border-bottom、border-left
margin~外边距
- 外边距是两个元素之间的距离，外边距也是透明的，没有颜色，没有装饰
- 单边外边距分别是：margin-top、margin-right、margin-bottom、margin-left
- 外边距可以使负值，如果垂直外边距都设置为负值，浏览器会取两个外边距绝对值的最大值；如果一个正外边距与一个负外边距合并，会从正外边距减去这个负外边距的绝对值
- 当margin的值设置为百分数时，其值相对于父元素的width；同时，这里的margin包括了上下margin
- 垂直外边距的合并（整理自CSS权威指南）：
  - 两个外边距中较小的一个会被较大的一个合并；
  - 如果相邻有多个外边距，也会出现合并，比如
```
ul{margin-bottom:20px;}
li{margin-bottom:25px;}
p{margin-top:30px;}
```
  外边距合并
  
  此时，列表的下外边距是20px;列表项的上外边距是25px；段落的上外边距是30px;那么当这些外边距合并时，最终段落的外边距能胜出，则li结尾到p开始之间的距离为30px
  - 如果在包含块上设置边框或内边距时，会使其子元素的外边距包含在包含块内，比如
```
ul{margin-bottom:20px;border:1px solid red;}
li{margin-bottom:25px;}
p{margin-top:30px;}
```
  外边距合并
  
  此时，当在ul中设置了边框之后，li的下外边距放在了其父元素ul内部，这里外边距的合并只有ul和p之间的外边距发生合并
CSS盒模型图

CSS盒模型

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

text-align:center的作用是让元素中文本水平居中对齐；它作用在块级元素上，会使块级元素的行内元素水平居中对齐

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

可以去Can I use···查询！！！

Can I use ··截图

四、IE 盒模型和W3C盒模型有什么区别?

IE盒模型width=border+padding+content（IE678的怪异模式，现在可以通过box-sizing:border-box来实现）

IE盒模型
W3C盒模型width=content（chrome， IE9+, IE678添加 doctype 使用标准盒模型）

W3C盒模型

五、以下代码的作用？兼容性？

*{ box-sizing: border-box;}

box-sizing是css3新增加的一个盒模型属性，能够事先定义盒模型的尺寸解析方式
语法为~box-sizing:content-box | border-box | inherit
content-box：默认值，让元素维持W3C的标准盒模型，即width=content
border-box：让元素维持IE传统的盒模型，即width=border+padding+content
比如

<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
        <style>
            *{
                box-sizing: border-box;
            }
            .box{
                width: 100px;
                height: 100px;
                background: red;
                border: 20px solid green;
                margin: 0 auto;
                padding: 20px;
            }
        </style>
    </head>
    <body>
        <div class="box"></div>
    </body>
</html>

效果图

border-box效果图

此时这里的100px(width)=20px(border-left)+20px(padding-left)+20px(content的width)+0px(padding-right)+20px(border-right)
兼容性如下图

box-sizing兼容性