问答

1. 盒模型包括哪些属性

答：

• content area - 内容区域
• 分别有 width 和 height 属性
• padding area - 内边距区域
• 分别有 padding-top,padding-right,padding-bottom,padding-left属性
• border area - 边框区域
• 分别有 border-top,border-right,border-bottom,border-left属性
• margin area - 外边距区域
• 分别有 margin-top,margin-right,margin-bottom,margin-top属性
• box-sizing - 用来改变标准盒模型对元素宽和高的计算方式

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

答：

• 作用于块级元素，使子元素为行内的元素水平居中。

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

答：

• caniuse

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

答：

• IE盒模型，即box-sizing为border-box，盒模型的宽和高等于padding加上border加上content的宽和高。
• W3C盒模型，即box-sizing为content-box，盒模型的宽和高等于内容的宽和高。
• IE6，IE7，IE8在 doctype 没有声明的情况下，会使用IE盒模型计算公式。声明的情况下，使用W3C盒模型。

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

    * {box-sizing: border-box;}

答：

• 针对所有元素使用IE盒模型的计算样式，即宽和高为整个盒模型的宽和高。
  • 举例：width = border-left + padding-left + content-width + padding-right + border-right

• 兼容性

  
  box-sizing兼容性.gif