盒模型

1.盒模型包括哪些属性

答：盒模型(box model)是CSS中的一个重要概念，它是元素大小的呈现方式。

box-model.png
盒模型的属性：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,即上下左右外边距。
注意点：

• margin属性， margin: 10px 11px 12px 13px;这四个值分别是上、右、下、左，按顺时针方向书写。
  margin: 0 0 0 0;,可简写成margin: 0;，表示上下左右外边距都是0px。
  margin: 0 10px 0 10px;,可简写成margin: 0 10px;,表示上下外边距是0px，左右外边距是10px。
  padding、border属性用法同上。
• 外边距叠加。当两个或更多个垂直边距相遇时， 它们将形成一个外边距。这个外边距的高度等于两个发生叠加的外边距的高度中的较大者。但是注意只有普通文档流中块级元素的垂直外边距才会发生外边距叠加。 行内框、 浮动框或绝对定位框之间的外边距不会叠加。
• 关于行内元素的margin、padding问题。行内元素设置width，height无效。行内元素上下margin无效，上下padding撑开空间，但不占用文档流。左右margin、padding有效。
• 设置背景色时，margin外边距没有颜色。

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

答：作用是使元素内的文本居中，作用在块级元素上，能让块级元素中的行内元素水平居中。

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

答：可以用 caniuse.com来查css属性的兼容性。

Paste_Image.png

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

Paste_Image.png Paste_Image.png
区别：W3C标准盒子模型padding、border所占的空间不在width、height范围内，大家俗称的IE的盒模型width包括content尺寸＋padding＋border；
注意：1.早期IE6、IE7使用“IE盒模型”，后来更新了一次，更新后的IE6、IE7使用标准盒模型IE8及以上版本使用标准盒模型；
2.没有DOCTYPE的情况下使用怪异模式，IE也使用“IE盒模型”
参考文档：盒模型

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

*{ box-sizing: border-box;}

答：作用： box-sizing属性用来改变默认的 CSS 盒模型 对元素宽高的计算方式。这个属性可以用于模拟那些非正确支持标准盒模型的浏览器的表现。box-sizing有两个值，content-box：w3c标准盒模型；border-box：“IE盒模型”。
例子：

QQ图片20160810140541.png
兼容性： QQ图片20160810141851.png