浏览器如何组合两个块元素？

Question

我对元素的计算感到困惑。我知道浏览器如何计算the size of the element，但我不知道浏览器如何处理两个或更多元素。假设我有两个块元素，它们有填充，边距和边框。浏览器如何处理它们：

• 一个在左边，另一个在右边？
• 一个在顶部，另一个在底部？
• 一个在另一个里面？

Answer 1

您的问题有点含糊不清，所有元素都有唯一的ID或类，浏览器如何区别对待它们，您可以为每个元素添加不同的样式

<div id="container">
<div class="element1"></div>
<div class="element2"></div>
</div>

css styles

.element1 {
float:left;
background:red;
border-style: solid 2px
}
.element2{
float:right;
background:yellow;
border-style: solid 5px
}

Answer 2

我将假设块元素没有设置宽度。

让我们倒退......

一个在另一个内部： 所有边距，边框和填充都是累积的。除非另有说明，否则内部块将展开以填充外部块。除非另有说明，否则外部块将展开以填充其容器的宽度。 内部块的宽度将根据整个容器宽度减去外部块和内部块的组合边距，边框和填充来计算

一个在另一个之上： 在正常情况下顶部块的下边距和底部块的上边距< / em>将崩溃，以便您在两者之间的总体差距是两者中的较大者。边框和填充保持不变。除非另有说明，否则2个块元素将展开以占据其容器的可用宽度。

一个接一个： 基本上有两种方法可以实现：通过设置 显示 元素的属性为 内联块 或浮动两个元素。由于您的问题特别指出“块元素”，我不会处理内联块。就浮动而言，所有边距，边界和填充都保持不变。如前所述，除非另有说明，否则块元素将占用其容器的宽度。这意味着它们不会相互浮动，除非您设置每个块的宽度，以便两个块的组合宽度+边距+边框+填充等于或小于容器的宽度。

希望有所帮助。