課程目標(biāo)
- 掌握盒模型相關(guān)知識(shí)點(diǎn)
- 了解IE盒模型和 W3C 盒模型區(qū)別
課程任務(wù)
1. 盒模型包括哪些屬性
CSS盒模型本質(zhì)上是一個(gè)盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實(shí)際內(nèi)容。
- margin - 清除邊框區(qū)域。margin沒(méi)有背景顏色，它是完全透明的。
- border - 邊框周圍的填充和內(nèi)容。邊框是受到盒子的背景顏色影響。
- padding - 清除內(nèi)容周圍的區(qū)域。會(huì)受到框中填充的背景顏色影響。
- content - 盒子的內(nèi)容，顯示文本和圖像。
2. text-align: center 的作用是什么，作用在什么元素上？能讓什么元素水平居中
讓塊級(jí)元素內(nèi)的行內(nèi)元素水平居中。這個(gè)居中是相對(duì)于它的父容器而言的。
塊級(jí)元素水平居中 margin-left: auto; margin-right: auto;
(注意，這個(gè)方法只針對(duì)塊級(jí)元素。所以，當(dāng)改變 display ，令它不再是塊級(jí)元素時(shí)，這個(gè)方法會(huì)失效。例如：display: table-cell; 此時(shí)，它不再是 block 了。)
3. 如果遇到一個(gè)屬性想知道兼容性，在哪查看？
4. IE 盒模型和 W3C 盒模型有什么區(qū)別？
- W3C 盒模型的 width = content
- IE 盒模型的 width = content + padding + border
早期的 IE（5.5版本）用的是IE盒模型，而從IE6開(kāi)始，只要在文檔中聲明（添加 doctype ），就會(huì)兼容使用 W3C 盒模型。
如果IE6 7 8 未添加 doctype ，即怪異模式，那么也是用IE模型。
從IE9以后，不用填寫(xiě)聲名也用的是W3C模型。
5. 以下代碼的作用？兼容性？
* {
box-sizing: border-box;
}
*，通配符，指所有元素。
box-sizing: border-box, 指定的 width 和 height 是該元素的盒模型寬高。從名字也可以知道，border 已經(jīng)被限死了。
若此時(shí)還指定 padding 、 border，也只能在指定的 width 和 height 里面。且 content的大小 會(huì)按 padding 和 border 而減小。即 此時(shí)的 width(已指定) = content + padding + border
還沒(méi)指定 padding (border: 1px;)時(shí)，盒子 width: 100px; height: 100px;
指定 padding: 20px;（border: 1px;） 但盒子 width: 100px; height: 100px;
盒子寬高依然如此！
回顧：
對(duì)于行內(nèi)元素，上下 margin 沒(méi)有意義。（之前的任務(wù)有說(shuō)過(guò)）
塊級(jí)元素，上下 margin 會(huì)合并（選取最大的）。但是如果把 display 改為 inline-block ，這個(gè)特性就會(huì)改變，畢竟已經(jīng)不算是塊級(jí)元素了。
