网页里的两种盒子模型(W3C盒子模型、IE盒子模型)

下面就来详细讲解网页里的两种盒子模型。

什么是盒子模型

盒子模型是指在网页中，每个HTML元素都是一个矩形的盒子，包含内容、内边距、边框和外边距4部分。不同的盒子模型对这四部分的计算方式不同，也就影响到了页面元素的大小和布局。

W3C盒子模型

W3C盒子模型又称标准盒子模型，它是W3C标准规定的盒子模型。在W3C盒子模型中，元素的总宽度 = 内容宽度(width) + 左右内边距(padding) + 左右边框(border) + 左右外边距(margin)。

W3C盒子模型的计算十分简单，对于一个元素的宽度，你只需要将元素本身的宽度加上左右内边距、左右边框和左右外边距的值即可。比如下面这个示例：

<div id="box" style="width: 200px; padding: 20px; border: solid 2px black; margin: 10px;"></div>

这个DIV的总宽度 = 200 + 20x2 + 2x2 + 10x2 = 254px，其中20px是左右内边距，2px是左右边框，10px是左右外边距。

IE盒子模型

IE盒子模型是IE浏览器所采用的盒子模型，它的计算方式和W3C盒子模型有所不同，它将元素的宽度包括了边框和内边距，而不是像W3C盒子模型那样将它们加在元素本身宽度的基础上。在IE盒子模型中，元素的总宽度 = 本身宽度(width) + 左右外边距(margin)。

IE盒子模型的计算稍微有些复杂，但是我们可以通过CSS的box-sizing属性将盒子模型设置为IE盒子模型。如下所示：

box-sizing: border-box;
-moz-box-sizing: border-box;/*Firefox*/
-webkit-box-sizing: border-box;/*ios safari*/
-khtml-box-sizing: bordfer-box;/*khtml*/

接下来是一个使用IE盒子模型的示例：

<div id="box" style="width:200px; border: solid 2px black; padding: 20px; margin: 10px; box-sizing: border-box;"></div>

这个DIV的总宽度 = 200 + 10x2 = 220px，其中10px是左右外边距。

总结

以上就是W3C盒子模型和IE盒子模型的详细讲解。在实际的网页开发过程中，要根据具体情况选择不同的盒子模型，以便更好地控制元素的大小和布局。