1、盒模型包括哪些属性

盒模型包括4个属性：content,padding,border,margin.

• content是盒模型的内容区。有width和height两个属性。
• padding是盒模型的内边距。有padding-top,padding-bottom,padding-left，padding-right属性，即上下左右内边。
• 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的编写规则和margin相同。

2、边距合并 外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者

3、关于行内元素的margin、padding使用问题
width、height、margin-top、margin-bottom对行内元素无效，padding-top、padding-bottom撑开空间，但不占用空间。margin-left、margin-right、padding-left、padding-right有效。

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

text-align:center的作用是使文本和行内元素中。它作用在块元素上，使块元素内部的图片，文本等水平居中。

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

在can i use上查看。

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

标准盒子模型

Paste_Image.png

IE盒子模型

Paste_Image.png

区别
W3C标准中padding、border所占的空间不在width、height范围内，大家俗称的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

** 本教程版权归作者和饥人谷所有，转载须说明来源！ **