CSS盒模型

• 盒模型包括哪些属性
• 内容区域
• 内边距 padding （在内容周围增加额外的空间）
• 边框 border
• 外边距 margin （提供元素之间的间距）

• 轮廓 outline （与border不同轮廓绘制在元素框上，不影响元素的大小或定位IE7以下不支持）

  
  
  

  盒模型
• text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中

• 作用是使行内元素居中，只能作用在行内元素上，而不能使块元素居中

  
  
  

  只能使行内元素居中
• 如果遇到一个属性想知道兼容性，在哪查看?
• http://caniuse.com/ 可以搜索属性兼容性。
• http://caniuse.com/#search=new%20elements 搜索new elements可查看HTML5新增加的语义标签。
• IE 盒模型和W3C盒模型有什么区别?
• IE盒模型：IE早期版本在混杂模式中(不声明!DOCTYPE HTML)使用自己的非标准盒模型。在这些版本中width属性不是内容的宽度，而是内容+内边距+边框的总和宽度。
• W3C盒模型：W3C盒模型是标准盒模型，width只为内容的宽度。
• 以下代码的作用？兼容性？

*{ box-sizing: border-box;}

• 为页面所有元素添加样式 box-sizing: border-box; ，使元素的内边距和边框不再会增加它的宽度。

• 下图可以看出div1设置了padding和border值但是宽高与div2一直可以看出box-sizing: border-box;的效果。

  
  
  

  box-sizing: border-box;

• box-sizing: border-box;兼容性

  
  
  

  box-sizing兼容性

本博客版权归 杨然和饥人谷所有，转载需说明来源