1

我尝试使用纯 html 和 css 创建一个简单的布局：

<div class="container">
    <div class="left">
        <div class="top bordered"></div>
        <div class="bott bordered"></div>
    </div>
    <div class="right bordered">
    </div>
</div>

.container {height: 500px; background-color: #eeeeee;}
.left {float: left; width: 49%; height: 80%; position: relative;}
.right {float: right; width: 50%; height: 80%;}
.bordered {border: 1px solid #aaaaaa; border-radius: 5px;}
.top {height: 20%; width: 100%; position: absolute; bottom: 0;}
.bott {height: 30%; width: 100%;}

请看一下http://jsfiddle.net/SLfHf/。我希望两个底部边框（左侧和右侧）显示在相同的高度。但正如你所看到的，左边的要高一些。对此进行调查，我发现即使没有任何填充和边距，子边框也不与父边框重叠。所以问题是：为什么？

4

2 回答 2

4

如果你想在盒子的高度/宽度内包含边框，你应该使用：

box-sizing:border-box;

http://www.w3.org/TR/css3-ui/#box-sizing0 （可能需要前缀:)）

于 2013-07-19T13:40:32.210 回答
1

这就是默认的 CSS 盒子模型（称为content-box）的工作原理。框的大小等于其指定的宽度/高度尺寸 + 填充 + 边框。

box-sizing: border-box是一个改变盒子模型的 CSS 属性，以便填充和边框在指定的尺寸内而不是添加到它们（例如指定的宽度/高度 - 填充 - 边框）。在过去的几年里，使用它变得越来越流行，因为许多人认为它是一个更容易使用的盒子模型，并且可以说它使响应式设计更容易一些。您需要做的就是将其添加到您的样式表中：

* { box-sizing: border-box; }

无论盒子模型或上下文如何，边界都不会与相邻边界一起折叠。您需要单独设置边界（即border-top: 1px solid #000）来完成该行为。

唯一一次相邻的盒子在表格之外有任何类型的折叠属性是在某些特定情况下相邻的边距会折叠：更多信息在这里。

于 2013-07-19T13:50:20.257 回答