Css IE的盒子模型是什么？

什么是IE的盒子模型，我经常在网上看到的教程？但我始终无法清楚地理解它。

这与Internet Explorer解释和呈现CSS的方式有关，Internet Explorer不完全符合CSS标准，这导致您的页面可能会因您使用的浏览器而异。

---

做一点研究，你就会有想法，要解决这个问题，你需要一点实践，因为几乎每一次都会对你产生不同的影响。

在IE 5.5及更早版本中，以及在以怪癖模式渲染的IE更高版本中，

填充

放置在内容

宽度

内，而不是其周围

---

现在，只需使用触发Doctype的标准模式，就不用担心了。

因此在符合标准的浏览器中，box模型指的是浏览器如何计算元素的总宽度

考虑以下div：

<div id="zoidberg" style="width: 100px;"></div>

现在，在IE和符合标准的浏览器中，总宽度都是100像素。假设您在框中添加了10个像素的左右边距：

<div id="zoidberg" style="width: 100px; margin-left: 10px; margin-right: 10px;"></div>

现在，在IE和符合标准的浏览器中，总宽度都是120像素（100像素宽，加上左侧10像素的边距）。到现在为止，一直都还不错。这就是事情开始变得古怪的地方。让我们为这个无聊的div添加一个边框：

<div id="zoidberg" style="width: 100px; margin-left: 10px; margin-right: 10px; border: 1px black solid"></div>

现在我们有了一个很棒的带边框的div。不幸的是，由于IE没有遵循标准，IE和符合标准的浏览器中的总宽度是不同的。从这一点开始，IE的总宽度将是120像素（100像素宽，加上左右两侧10像素的边距）。但是，在符合标准的浏览器中，div的宽度将为122像素（100像素宽，20像素边距，2像素边框[1像素在边框的左侧，1像素在边框的右侧。]）您是否开始看到问题出现了

嘿，我们的div看起来很奇怪，文本碰到了边界。让我们添加一些填充：

<div id="zoidberg" style="width: 100px; margin-left: 10px; margin-right: 10px; border: 1px black solid; padding-left: 10px; padding-right: 10pxl"></div>

酷，现在看起来好多了。同样，IE中的总宽度是120（100像素的宽度加上20像素的边距）。但是，在符合标准的浏览器中，框的总宽度现在计算为142像素（100像素宽度、20像素边距、2像素边框和20像素填充[右侧10像素，左侧10像素]

---

为了回答你的问题，IE的盒子模型是IE如何计算元素的总宽度。它忽略边框和填充，只考虑边距和宽度。符合标准的浏览器通过添加元素的宽度、边距、边框和填充来计算总宽度。就个人而言，IE的方法更有意义，但它不是标准，所以我们不得不抱怨它。

你的问题是错误的。我会纠正它，我为你做了谷歌搜索，这里只需点击它