盒模型包括哪些属性?
- 盒模型：
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
如果遇到一个属性想知道兼容性，在哪查看?
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
著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。
本文版权归本人和饥人谷所有，转载请注明出处
网友评论