1. 盒模型包括哪些属性？

盒模型是CSS中一个重要概念，文档中的每个元素被描述为矩形盒子。这个模型描述了一个元素所占的空间。
每一个盒子有四条边界：外边距边界margin edge，边框边界border edge，内边距边界padding edge与内容边界content edge。

content area内容区域：包含元素内容的区域，元素本身具有一定的大小，占用的就是该空间的大小，width和height可以调节内容区域的高度。
padding area内边距区域：是内容及可能的边框之间的空白区域扩展内容区域。它位于内边距边界内部，通常有背景——颜色或图片（不透明图片盖住背景颜色）。内边距与内容边界之间的空间可以由 padding-top,padding-right,padding-bottom,padding-left和简写属性 padding 控制。
border area边框区域：它是包含边框的区域，扩展了内边距区域。它位于边框边界内部。由border-top,border-right，border-bottom,border-left和简写属性border控制。
margin area外边距区域：它用空白区域扩展边框区域，以分开相邻的元素。外边距区域大小由 margin-top，margin-right，margin-bottom,margin-left及简写属性 margin 控制。
外边距合并：当两个或多个垂直边距外边距相遇时，它们将形成一个外边距，合并后的外边距的高度等于两个发生合并的外边距的高度中较大者。但是只有普通文档流中的块框的垂直外边距才会发生外边距叠加。行内框、浮动框或绝对定位框之间的外边距不会发生叠加。设置了display：inline-block的元素，垂直margin不会被合并。
一般来说， 垂直外边距叠加有三种情况：

• 元素自身叠加：当元素没有内容（即空元素）、内边距、边框时， 它的上下边距就相遇了， 即会产生叠加（垂直方向）。 当为元素添加内容、 内边距、 边框任何一项， 就会取消叠加。
• 相邻元素叠加：相邻的两个元素， 如果它们的上下边距相遇，即会产生叠加。
• 包含（父子）元素叠加：包含元素的外边距隔着 父元素的内边距和边框， 当这两项都不存在的时候， 父子元素垂直外边距相邻， 产生叠加。 添加任何一项即会取消叠加。

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

text-align: center作用是使元素中的文本水平居中。
作用在块级元素上。设置文本或者img标签等一些内联对象（或与之类似的元素）的居中。若要整个内容水平居中，需要在添加块级元素中添加text-align:center和margin：0 auto样式。或者说在块级元素中添加display：inline-block。

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

使用Can I use查看。

Paste_Image.png

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

ie678怪异模式（不添加 doctype）使用 ie 盒模型。chrome， ie9+, ie678(添加 doctype) 使用标准盒模型。

W3C盒模型和IE盒模型尺寸图

区别：
W3C盒模型总宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
IE盒模型总宽度=margin-left+width+margin-right
W3C盒模型总高度 = margin-top+ border-top + padding-top + height + padding-bottom+ border-bottom+ margin-bottom
IE盒模型总高度=margin-top+height+margin-bottom

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

<pre>
* { box-sizing:border-box; }
</pre>
作用：width与height包括内边距（padding）与边框（border），不包括外边距（margin）。这个时候内边距和边框将会包括在盒子中。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
width = border-right+padding-right+实际内容的宽度+padding-left+border-left，
height = border-top+padding-top+实际内容的高度+padding-bottom+border-bottom。

代码及运行结果

如图所示：
宽度 = 2+20+56+20+2=100，
height = 2+20+56+20+2=100。

在caniuse.com查询兼容性结果如下：

兼容性

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