掌握盒模型相关知识点
了解IE盒模型和W3C 盒模型区别

问答

一、盒模型包括哪些属性？

  1. 内边距（上右下左）
  2. 外边距（上右下左）
  3. 边框（上右下左）
  4. 内容区

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

  • text-align CSS属性定义行内内容（例如文字）如何相对于它的块父元素对齐。
  • text-align作用在块级元素上。但是并不控制块元素自己的对齐（注意经试验发现display:inline-block的元素同样不行）
  • 能让行内元素水平居中，包括display:inline-block.且适用于继承属性。
  • 居中一个块元素且不居中它的行内内容的标准兼容的方法是将它的左、右margin设为auto。

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

caniuse

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

  • ie盒模型：ie678怪异模式（在ie678不声明文档类型 doctype）使用 ie盒模型，宽度=边框+padding+内容宽度。要想在其他支持css3的浏览器上体验ie盒模型，则使用box-sizing: border-box;（并不是所有元素都有默认padding margin值）
  • chrome， ie9+, ie678(添加 doctype)(ie5经试验div不设定margin值,该值会是auto，其他浏览器为0) 使用标准盒模型， 宽度= 内容宽度。

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

0_1478654197295_upload-bad56e5c-6cad-4784-962a-27a08ac85809
0_1478654197295_upload-bad56e5c-6cad-4784-962a-27a08ac85809
  • box-sizing:border-box: 以ie盒模型渲染页面，所有元素的宽度=内容宽+左右内边距+左右边框。高度=上下内边距+上下边框+内容高。便于计算

代码

JS Bin