任务9-盒模型

课程目标

• 掌握盒模型相关知识点
• 了解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. 如果遇到一个属性想知道兼容性，在哪查看？

CanIUSe

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 ，这个特性就会改变，毕竟已经不算是块级元素了。