課程目標
- 掌握盒模型相關知識點
- 了解IE盒模型和 W3C 盒模型區(qū)別
課程任務
1. 盒模型包括哪些屬性
CSS盒模型本質上是一個盒子规惰，封裝周圍的HTML元素，它包括：邊距怨咪，邊框牍颈，填充插勤，和實際內容泳挥。
- margin - 清除邊框區(qū)域然痊。margin沒有背景顏色，它是完全透明的羡洁。
- border - 邊框周圍的填充和內容玷过。邊框是受到盒子的背景顏色影響。
- padding - 清除內容周圍的區(qū)域筑煮。會受到框中填充的背景顏色影響辛蚊。
- content - 盒子的內容，顯示文本和圖像真仲。
2. text-align: center 的作用是什么袋马，作用在什么元素上？能讓什么元素水平居中
讓塊級元素內的行內元素水平居中秸应。這個居中是相對于它的父容器而言的虑凛。
塊級元素水平居中 margin-left: auto; margin-right: auto;
(注意，這個方法只針對塊級元素软啼。所以桑谍，當改變 display ，令它不再是塊級元素時祸挪，這個方法會失效锣披。例如：display: table-cell; 此時，它不再是 block 了贿条。)
3. 如果遇到一個屬性想知道兼容性雹仿，在哪查看？
4. IE 盒模型和 W3C 盒模型有什么區(qū)別整以？
- 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 已經(jīng)被限死了。
若此時還指定 padding 佳晶、 border桅狠，也只能在指定的 width 和 height 里面。且 content的大小 會按 padding 和 border 而減小轿秧。即 此時的 width(已指定) = content + padding + border
還沒指定 padding (border: 1px;)時中跌，盒子 width: 100px; height: 100px;
指定 padding: 20px;（border: 1px;） 但盒子 width: 100px; height: 100px;
盒子寬高依然如此！
回顧：
對于行內元素菇篡，上下 margin 沒有意義漩符。（之前的任務有說過）
塊級元素，上下 margin 會合并（選取最大的）驱还。但是如果把 display 改為 inline-block 嗜暴，這個特性就會改變，畢竟已經(jīng)不算是塊級元素了议蟆。
