任务9-1

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

盒模型包括：边距、边框、填充和实际内容；

• margin：清除边框区域，无背景颜色，是完全透明。
• border：边框周围的填充和内容，边框受到盒子的背景颜色影响。
• padding：清除内容周围的区域，会受到框中填充颜色的背景色影响。
• content：盒子内容、显示文本和图像。

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

span是行内元素，定义span的样式为居中，但是浏览后的页面如下图所示：

但是如果我在行内元素span的样式里加一个display:bolok;块级元素，如下所示：

浏览后的页面：

我们发现样式居中生效了。

由此可以得出结论如下：
text-align:center

• 作用：使元素水平居中。
• 作用在块级元素上。
• 能块级元素内部的行内元素居中。

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

caniuse

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

IE 盒模型：

W3C盒模型

• IE 盒模型: 宽度=边框+padding+内容宽度。
• W3C盒模型: 宽度= 内容宽度。

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

在样式里设置 box-sizing: border-box; 时，此元素的内边距和边框不再会增加它的宽度。

兼容性：