两种盒模型的介绍

一、概述

CSS有两种盒模型：W3C盒模型(标准盒模型)和IE盒模型，这两种盒模型，主要区别是在解释元素的width和height属性上。

二、W3C盒模型

W3C盒模型认为，元素的with和height属性仅仅指content area。就是元素的width不包括padding,border，margin。

width / height = content

三、IE盒模型

IE盒模型认为，元素的with和height属性由content area + padding + border组成。

width / height = content + padding + border

四、box-sizing

CSS3新增了box-sizing属性，定义了 user agent 应该如何计算一个元素的总宽度和总高度。

• content-box是默认值，代表W3C盒模型
• border-box代表IE盒模型