Question

我尝试使用普通的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/。我希望两个底部边框（左侧和右侧）以相同的高度显示。但是你可以看到左边的一个更高一点。调查这一点我发现子边框不会与父边框重叠，即使没有任何填充和边距。所以问题是：为什么？

Answer 1

如果要在框的高度/宽度内包含边框，则应使用：

box-sizing:border-box;

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

Answer 2

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

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

* { box-sizing: border-box; }

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

相邻的方框在表格外面有任何类型的折叠属性的唯一时间是在某些特定情况下，相邻的边距会崩溃：more info here。

为什么父母和孩子的边界不重叠？

2 个答案: