一、盒模型包括哪些屬性

盒模型包括哪些屬性

• margin：外邊距，控制元素周?chē)臻g的間隔,它永遠(yuǎn)是透明的。
• border：邊框。
• padding：內(nèi)邊距，用來(lái)使元素與內(nèi)容有一定的間隔。
• content：內(nèi)容。
  在網(wǎng)頁(yè)中，每個(gè)元素都被認(rèn)為是一個(gè)矩形的盒子。

盒模型

CSS3中新增了一種盒模型計(jì)算方式：box-sizing熟悉。盒模型默認(rèn)的值是content-box, 新增的值是padding-box和border-box，幾種盒模型計(jì)算元素寬高的區(qū)別如下：
content-box（默認(rèn)）
布局所占寬度 = 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標(biāo)簽等內(nèi)聯(lián)元素（或與之相似元素）水平居中，其可作用在塊級(jí)元素中的文本或img標(biāo)簽等行內(nèi)元素中，使其在其父元素中居中

三、如果遇到一個(gè)屬性想知道兼容性，在哪查看?

想要知道一個(gè)屬性的兼容性，可以在Can I Use上面查看。比如說(shuō)輸入text-align，就可以知道它的兼容性。

Can I Use

四、IE 盒模型和W3C盒模型有什么區(qū)別?

• 早期的IE（5.5版本）用的是IE盒模型。
• IE678怪異模式（不添加 doctype）使用IE盒模型。
• chrome， ie9+, ie678(添加 doctype) 使用標(biāo)準(zhǔn)盒模型。

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;}

• 作用：
  使設(shè)置的元素的寬度=border-right+padding-right+實(shí)際內(nèi)容的寬度+padding-left+border-left。
  設(shè)置的元素的高度=border-top+padding-top+實(shí)際內(nèi)容的高度+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 */