css - 使用边框时如何使布局相同

Question

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

在此处输入图像描述

解决这个问题如果我想创建带有 10px 边框的 100px div，我会创建 80px 和 10px 边框的 div，所以它的总宽度将为 100，但它不是我想要的，因为如果我只想更改边框或 div 的大小，我需要改变两者

有什么方法可以创建 div 100 px 并应用 10px 边框，总宽度将为 100px 吗？

score 3 · Accepted Answer

有。您可以box-sizing: border-box在元素上使用，宽度（和高度）将按照 IE 在 quirksmode 中的方式计算。

有时它可能非常有用，但是学习普通盒子模型的工作原理并首先习惯使用它是很好的。

Fwiw 我已经建立了一个box-sizing: border-box默认使用所有元素的站点，实际上我不推荐它。部分是因为我真的习惯了普通的盒子模型，但主要是因为box-sizing在某些浏览器中仍然存在错误（我记得 FF 和百分比搞砸了）。

编辑：请注意，它在 IE<8 中不起作用。
Edit2：更多信息：http: //paulirish.com/2012/box-sizing-border-box-ftw/

score 1 · Accepted Answer

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

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

在 CSS 中，您使用size -div 设置大小和使用border -div 设置边框：

.size {width:200px; height:200px;}
.border {border:10px solid blue;}

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

在此处输入图像描述

请参阅http://jsfiddle.net/6K2vS/以获取此在线演示。

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

2 回答 2