盒模型

一、盒模型包括哪些属性

盒模型包括哪些属性

• margin：外边距，控制元素周围空间的间隔,它永远是透明的。
• border：边框。
• padding：内边距，用来使元素与内容有一定的间隔。
• content：内容。
  在网页中，每个元素都被认为是一个矩形的盒子。

盒模型

CSS3中新增了一种盒模型计算方式：box-sizing熟悉。盒模型默认的值是content-box, 新增的值是padding-box和border-box，几种盒模型计算元素宽高的区别如下：
content-box（默认）
布局所占宽度 = width + padding-left + padding-right + border-left + border-right
布局所占高度 = height + padding-top + padding-bottom + border-top + border-bottom
padding-box
布局所占宽度= width(包含padding-left + padding-right) + border-top + border-bottom
布局所占高度= height(包含padding-top + padding-bottom) + border-top + border-bottom
border-box
布局所占宽度 = width(包含padding-left + padding-right + border-left + border-right)
布局所占高度 = height(包含padding-top + padding-bottom + border-top + border-bottom)

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

作用是使得文本或img标签等内联元素（或与之相似元素）水平居中，其可作用在块级元素中的文本或img标签等行内元素中，使其在其父元素中居中

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

想要知道一个属性的兼容性，可以在Can I Use上面查看。比如说输入text-align，就可以知道它的兼容性。

Can I Use

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

• 早期的IE（5.5版本）用的是IE盒模型。
• IE678怪异模式（不添加 doctype）使用IE盒模型。
• chrome， ie9+, ie678(添加 doctype) 使用标准盒模型。

W3C盒模型：总宽度=margin-left + border-left + padding-left + width +padding-right +borer-right + margin-right.
IE盒模型：总宽度=margin-left + width（padding和border的值算在width里） +margin-right.

参考IE浏览器和CSS盒模型

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

*{ box-sizing: border-box;}

• 作用：
  使设置的元素的宽度=border-right+padding-right+实际内容的宽度+padding-left+border-left。
  设置的元素的高度=border-top+padding-top+实际内容的高度+padding-bottom+border-bottom。

• 兼容：

  
  Paste_Image.png

• 使用：
  box-sizing:border-box;/Internet Explorer、Opera、Chrome/
  -moz-box-sizing:border-box; /* Firefox /
  -webkit-box-sizing:border-box; / Safari */