Html 为什么父边界和子边界不重叠？

我尝试使用纯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%;}

.container{高度：500px；背景色：#eeeeee；}
.left{float:left；宽度：49%；高度：80%；位置：relative；}
.right{float:right；宽度：50%；高度：80%；}
.带边框{边框：1px实心#aaaaa；边框半径：5px；}
.top{高度：20%；宽度：100%；位置：绝对；底部：0；}
.bott{高度：30%；宽度：100%；}

请看一看。 我希望两个底部边框（左侧和右侧）显示在同一高度。但正如你们所看到的，左边一个稍微高一点。通过调查，我发现，即使没有任何填充和边距，子边界也不会与父边界重叠。

---

所以问题是：为什么？

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

box-sizing:border-box;

---

（可能需要前缀：）

如果要将边框包括在盒子的高/宽范围内，应使用：

box-sizing:border-box;

---

（可能需要前缀：）

这正是默认CSS框模型（称为

内容框

）的工作方式。长方体的大小等于其指定的宽度/高度标注+填充+边框

框大小：边框框

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

* { box-sizing: border-box; }

无论框模型或上下文如何，边框都不会与相邻边框一起塌陷。您需要单独设置边框（即

边框顶部：1px solid#000

）来完成该操作

---

在某些特定情况下，相邻框在表外具有任何类型的折叠属性的唯一时间是相邻边距将折叠：。

这正是默认CSS框模型（称为

内容框

）的工作方式。长方体的大小等于其指定的宽度/高度标注+填充+边框

框大小：边框框

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

* { box-sizing: border-box; }

无论框模型或上下文如何，边框都不会与相邻边框一起塌陷。您需要单独设置边框（即

边框顶部：1px solid#000

）来完成该操作

---

只有在某些特定情况下，相邻框在表外具有任何类型的折叠属性时，相邻页边距才会折叠：。

非常感谢，这似乎是一个解决方案。但无论如何，我无法理解默认行为。如果我们有两个嵌套的div，那么inner的宽度/高度设置为100%。。。为什么它们有不同的边界？@doob，边界有大小。它总是站在外面。盒子大小告诉它是否包含在给定的大小内。可以使用框阴影在内部伪造边框或使用轮廓。你需要按照自己提供的链接学习。非常感谢，这似乎是一个解决方案。但无论如何，我无法理解默认行为。如果我们有两个嵌套的div，那么inner的宽度/高度设置为100%。。。为什么它们有不同的边界？@doob，边界有大小。它总是站在外面。盒子大小告诉它是否包含在给定的大小内。可以使用框阴影在内部伪造边框或使用轮廓。您需要按照提供的链接进行自学