盒模型包括哪些属性?

• 盒模型：

Paste_Image.png

Paste_Image.png

盒模型包括属性有：

• margin：外边距
• border：边框
• padding：内边距
• 内容的width和height。
  其中padding、margin、border有一些属性可以用如下图方式表达：

Paste_Image.png

• 外边距重叠：

Paste_Image.png Paste_Image.png

---

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

• text-align:center的作用：文本水平居中。
• 作用在块元素上。
• 块元素中的内联元素水平居中。

Paste_Image.png

---

如果遇到一个属性想知道兼容性，在哪查看?

caniuse

---

IE 盒模型和W3C盒模型有什么区别?

• 宽度计算方式不同
• ie盒模型的宽度为border边框值（包裹content）来设置。
• w3c盒模型的宽度仅为content的宽度。
• 如果有DOCTYPE声明，所有浏览器将用w3c盒模型来渲染。
• ie678怪异模式下使用ie盒模型。
• box-sizing:border-box;能使border宽度用ie盒模型的方式来计算。

---

以下代码的作用？兼容性？

*{ box-sizing: border-box;}

-*{}为通配选择器，匹配所有元素。

• box-sizing:border-box; :将设置的宽度包裹content以及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.jianshu.com/p/808d3130457b
著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。

---

本文版权归本人和饥人谷所有，转载请注明出处