课程目标
- 掌握盒模型相关知识点
- 了解IE盒模型和 W3C 盒模型区别
课程任务
1. 盒模型包括哪些属性
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
- margin - 清除边框区域。margin没有背景颜色，它是完全透明的。
- border - 边框周围的填充和内容。边框是受到盒子的背景颜色影响。
- padding - 清除内容周围的区域。会受到框中填充的背景颜色影响。
- content - 盒子的内容，显示文本和图像。
2. text-align: center 的作用是什么，作用在什么元素上？能让什么元素水平居中
让块级元素内的行内元素水平居中。这个居中是相对于它的父容器而言的。
块级元素水平居中 margin-left: auto; margin-right: auto;
(注意，这个方法只针对块级元素。所以，当改变 display ，令它不再是块级元素时，这个方法会失效。例如：display: table-cell; 此时，它不再是 block 了。)
3. 如果遇到一个属性想知道兼容性，在哪查看？
4. IE 盒模型和 W3C 盒模型有什么区别？
- W3C 盒模型的 width = content
- IE 盒模型的 width = content + padding + border
早期的 IE（5.5版本）用的是IE盒模型，而从IE6开始，只要在文档中声明（添加 doctype ），就会兼容使用 W3C 盒模型。
如果IE6 7 8 未添加 doctype ，即怪异模式，那么也是用IE模型。
从IE9以后，不用填写声名也用的是W3C模型。
5. 以下代码的作用？兼容性？
* {
box-sizing: border-box;
}
*，通配符，指所有元素。
box-sizing: border-box, 指定的 width 和 height 是该元素的盒模型宽高。从名字也可以知道，border 已经被限死了。
若此时还指定 padding 、 border，也只能在指定的 width 和 height 里面。且 content的大小 会按 padding 和 border 而减小。即 此时的 width(已指定) = content + padding + border
还没定padding的时候.png还没指定 padding (border: 1px;)时，盒子 width: 100px; height: 100px;
指定padding的时候.png指定 padding: 20px;（border: 1px;） 但盒子 width: 100px; height: 100px;
盒子宽高依然如此！
回顾：
对于行内元素，上下 margin 没有意义。（之前的任务有说过）
块级元素，上下 margin 会合并（选取最大的）。但是如果把 display 改为 inline-block ，这个特性就会改变，毕竟已经不算是块级元素了。