css3中的box-sizing属性
css中的盒模型分为两种,W3C的标准模型与IE的传统模型:
一、W3C的标准盒模型
外盒尺寸:
1、Element Height = content height + margin + padding + border
2、Element Width= content width+ margin + padding + border
内盒尺寸:
1、Element Height= content height+ padding + border
2、Element Width = content width + padding + border
二、IE的传统盒模型(IE6以下)
外盒尺寸:
1、Element Height = content height+margin (height包含了元素内容高度,边框高度,内边距高度)
2、Element Width= content width+margin (width包含了元素内容宽度,边框宽度,内边距宽度)
内盒尺寸:
1、Element Height = content height(height包含了元素内容高度,边框高度,内边距高度)
2、Element Width= content width(width包含了元素内容宽度,边框宽度,内边距宽度)
box-sizing语法:
box-sizing:content-box || border-box || inherit
box-sizing:content-box 维持了W3C标准(默认值);
box-sizing:border-box维持了IE的标准;
内容摘自部分网页