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的标准；

                                                                                                 

                                                                                                                                                     内容摘自部分网页