盒模型包括哪些屬性?
- 盒模型：
Paste_Image.png
Paste_Image.png
盒模型包括屬性有：
- margin：外邊距
- border：邊框
- padding：內(nèi)邊距
- 內(nèi)容的width和height。
其中padding、margin、border有一些屬性可以用如下圖方式表達(dá)：
Paste_Image.png
- 外邊距重疊：
Paste_Image.png
Paste_Image.png
text-align: center的作用是什么，作用在什么元素上？能讓什么元素水平居中?
- text-align:center的作用：文本水平居中。
- 作用在塊元素上。
- 塊元素中的內(nèi)聯(lián)元素水平居中。
Paste_Image.png
如果遇到一個(gè)屬性想知道兼容性，在哪查看?
IE 盒模型和W3C盒模型有什么區(qū)別?
- 寬度計(jì)算方式不同
- ie盒模型的寬度為border邊框值（包裹c(diǎn)ontent）來設(shè)置。
- w3c盒模型的寬度僅為content的寬度。
- 如果有DOCTYPE聲明，所有瀏覽器將用w3c盒模型來渲染。
- ie678怪異模式下使用ie盒模型。
- box-sizing:border-box;能使border寬度用ie盒模型的方式來計(jì)算。
以下代碼的作用？兼容性？
*{ box-sizing: border-box;}
-*{}為通配選擇器，匹配所有元素。
-
box-sizing:border-box; :將設(shè)置的寬度包裹c(diǎn)ontent以及padding和border。
Paste_Image.png - 兼容性 caniuse
Paste_Image.png
支持IE8以上瀏覽器。
Internet Explorer、Opera 以及 Chrome 支持 box-sizing 屬性。
Firefox 支持替代的 -moz-box-sizing 屬性。
box-sizing:border-box;/*Internet Explorer、Opera、Chrome*/
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
文／墨月千樓（簡書作者）
原文鏈接：http://www.itdecent.cn/p/808d3130457b
著作權(quán)歸作者所有，轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，并標(biāo)注“簡書作者”。
本文版權(quán)歸本人和饑人谷所有，轉(zhuǎn)載請注明出處
