1、盒模型包括哪些屬性

盒模型包括4個屬性：content,padding,border,margin.

• content是盒模型的內(nèi)容區(qū)。有width和height兩個屬性。
• padding是盒模型的內(nèi)邊距。有padding-top,padding-bottom,padding-left，padding-right屬性，即上下左右內(nèi)邊。
• border是盒模型的邊框。也有border-top,border-bottom,border-left，border-right,即上下左右邊框。
• margin是盒模型的外邊距。有margin-top，margin-bottom,margin-left,margin-right,即上下左右外邊距。

注意點:
1、margin屬性，margin: 10px 11px 12px 13px;這四個值分別是上、右、下、左，按順時針方向。
margin: 0 0 0 0;可簡寫成margin: 0;表示上右下左外邊距都是0px。
margin: 0 5px 0 10px;,可簡寫成margin: 0 5px;,表示上下外邊距是0px，左右外邊距是5px。
padding和border的編寫規(guī)則和margin相同。

2、邊距合并 外邊距合并指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者

3、關(guān)于行內(nèi)元素的margin、padding使用問題
width、height、margin-top、margin-bottom對行內(nèi)元素無效，padding-top、padding-bottom撐開空間，但不占用空間。margin-left、margin-right、padding-left、padding-right有效。

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

text-align:center的作用是使文本和行內(nèi)元素中。它作用在塊元素上，使塊元素內(nèi)部的圖片，文本等水平居中。

3、如果遇到一個屬性想知道兼容性，在哪查看?

在can i use上查看。

4、IE 盒模型和W3C盒模型有什么區(qū)別?

標準盒子模型

Paste_Image.png

IE盒子模型

Paste_Image.png

區(qū)別
W3C標準中padding、border所占的空間不在width、height范圍內(nèi)，大家俗稱的IE的盒模型width包括content尺寸＋padding＋border

并不是所有的IE都使用IE盒模型
早期IE6、IE7使用“IE盒模型”，后來更新了一次，更新后的IE6、IE7使用標準盒模型，IE8及以上版本使用標準盒模型
沒有DOCTYPE的情況下使用怪異模式，IE也使用“IE盒模型”

5、以下代碼的作用？兼容性？

* {
   box-sizing: border-box;
}

*是通配符，匹配頁面中所有元素。box-sizing: border-box;
box-sizing是CSS3的box屬性之一。
它具有“content-box”和“border-box”兩個值。
定義 box-sizing: content-box; 時，瀏覽器對盒模型的解釋遵從我們之前認識到的 W3C 標準；
定義 box-sizing: border-box; 時，瀏覽器對盒模型的解釋與 IE6 相同；

不加border-box

Paste_Image.png

加border-box

Paste_Image.png

兼容性:

Paste_Image.png

** 本教程版權(quán)歸作者和饑人谷所有，轉(zhuǎn)載須說明來源！ **