Css 如何在使用边框时使布局相同

当我们使用border时，它应用于元素外部。如果我创建100px宽度的div并添加10px边框，那么它的整体宽度将是120px，这就是为什么布局会不好的原因，因为这个额外的不需要的宽度会导致浮动和流体布局出现问题

为了解决这个问题，如果我想用10px的边框创建100px的div，我会创建80px的div，而不是10px的边框，所以它的总宽度将是100，但这不是我想要的，因为如果我只想更改边框或div中的大小，我需要同时更改这两个

---

是否有任何方法可以创建div 100 px并应用10px边框，总宽度将为100px？

有。您可以在元素上使用

box size:border box

，宽度（和高度）将按照IE在quirksmode中的方式计算

有时它可能非常有用，但在我看来，最好先了解普通盒子模型的工作原理并习惯于使用它

Fwiw我已经建立了一个网站，在所有元素上使用默认的

框大小：border box

，实际上我并不推荐它。部分原因是我真的习惯了普通的盒子模型，但主要是因为在某些浏览器中，

box size

仍然存在错误（FF和百分比我记得搞糟了）

---

编辑：请注意，它在IE中不起作用。您可以在元素上使用

box size:border box

，宽度（和高度）将按照IE在quirksmode中的方式计算

有时它可能非常有用，但在我看来，最好先了解普通盒子模型的工作原理并习惯于使用它

Fwiw我已经建立了一个网站，在所有元素上使用默认的

框大小：border box

，实际上我并不推荐它。部分原因是我真的习惯了普通的盒子模型，但主要是因为在某些浏览器中，

box size

仍然存在错误（FF和百分比我记得搞糟了）

---

编辑：请注意，它在IE中不起作用这是一个经典的解决方法，使用CSS2/IE5,5/6兼容解决方案，将两个div放在彼此内部：

<div class="size">
    <div class="border">
        Give me some border ;)
    </div>
</div>

所以，即使你只知道标准的盒子模型，你也可以解决这个问题

请参阅以获取此功能的在线演示

---

在一些非常旧的浏览器中，有时甚至需要为外部元素设置一个零宽度的边框，以使其正常工作。请注意，如果您正在寻找向后兼容的解决方案。

这是一个经典的解决方案，使用CSS2/IE5,5/6兼容解决方案，将两个div放在彼此内部：

<div class="size">
    <div class="border">
        Give me some border ;)
    </div>
</div>

所以，即使你只知道标准的盒子模型，你也可以解决这个问题

请参阅以获取此功能的在线演示

---

在一些非常旧的浏览器中，有时甚至需要为外部元素设置一个零宽度的边框，以使其正常工作。请注意，如果您正在寻找向后兼容的解决方案。

+1我学到了一些东西：）我也同意您关于OP应该习惯于标准的建议。+1我学到了一些东西：）我也同意您关于OP应该习惯于标准的建议。这完全不利于将设计和内容分开，并添加了不必要的HTML元素。@powerbucket:不太可能，尤其是

元素不受这种说法的影响。对于CSS2，没有其他方法可以像上面所描述的那样以流线型（和稳定的）方式绕过浏览器的怪癖。如果您需要创建稳定的代码，它对许多其他与CSS相关的处理也很有用。为了将设计和内容分开，现在不应该单独使用HTML和CSS。这两个部分通常在中间步骤生成，以便更好地分离设计和内容。这使得你的论点更加没有意义。

div

没有语义意义——这并不意味着div:itus和class:itus不是问题。你的建议是div:itus。你的类名也与设计相关。当3退出时，使用CSS2有什么意义<代码>框大小调整适用于IE7以上的所有功能。您从这些示例性代码行中读取的内容太多了。仅供参考：它甚至可以在IE7下工作，试试看；）。这完全不利于分离设计和内容，并添加了不必要的HTML元素。@powerboulg:不太可能，尤其是

元素不受这种说法的影响。对于CSS2，没有其他方法可以像上面所描述的那样以流线型（和稳定的）方式绕过浏览器的怪癖。如果您需要创建稳定的代码，它对许多其他与CSS相关的处理也很有用。为了将设计和内容分开，现在不应该单独使用HTML和CSS。这两个部分通常在中间步骤生成，以便更好地分离设计和内容。这使得你的论点更加没有意义。

div

没有语义意义——这并不意味着div:itus和class:itus不是问题。你的建议是div:itus。你的类名也与设计相关。当3退出时，使用CSS2有什么意义<代码>框大小调整适用于IE7以上的所有功能。您从这些示例性代码行中读取的内容太多了。仅供参考：它甚至可以在IE7下工作，试试看；）。