[分享]css3提供哪两种盒子模型

CSS3提供了两种盒子模型：标准盒子模型和IE盒子模型。标准盒子模型： 在标准盒子模型中，元素的尺寸仅包括内容区域，不包括边框和内边距。 实际上，元素的尺寸是由content + padding + ...

CSS3提供了两种盒子模型：标准盒子模型和IE盒子模型。

标准盒子模型：
在标准盒子模型中，元素的尺寸仅包括内容区域，不包括边框和内边距。
实际上，元素的尺寸是由content + padding + border组成的。

例如：

box-sizing: content-box;
width: 200px;
padding: 10px;
border: 1px solid black;
实际宽度 = 200px + 10px*2 + 1px*2 = 222px; 

IE盒子模型：
在IE盒子模型中，元素的尺寸包括内容区域、内边距和边框。
实际上，元素的尺寸是由content组成的。

例如：

box-sizing: border-box;
width: 200px;
padding: 10px;
border: 1px solid black;
实际宽度 = 200px; 

为了避免IE盒子模型的兼容性问题，我们通常使用标准盒子模型。