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

Question

我对元素的计算感到困惑。我知道浏览器如何计算元素的大小，但我不知道浏览器如何处理两个或更多元素。假设我有两个块元素，它们具有填充、边距和边框。浏览器在以下情况下如何处理它们：

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

Answer 1

您的问题有点模棱两可，所有元素都有唯一的 ID 或类，这就是浏览器对它们的不同处理方式，您可以为每个元素添加不同的样式

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

CSS 样式

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

Answer 2

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

让我们向后工作...

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

一上一：在正常情况下，顶部块的底部边距和底部块的顶部边距会塌陷，因此您在两者之间的整体边距是两者中较大的一个。边框和填充保持不变。除非另有说明，否则 2 个块元素将扩展以占用其容器的可用宽度。

一个在另一个旁边：基本上有两种方法可以实现这一点：将元素的显示属性设置为inline-block或浮动两个元素。由于您的问题具体说明了“块元素”，因此我不会处理内联块。就浮动而言，所有边距、边框和填充保持不变。如前所述，除非另有说明，否则块元素将占据其容器的宽度。这意味着它们不会彼此相邻浮动，除非您设置每个块的宽度，以便两个块的组合宽度 + 边距 + 边框 + 填充等于或小于容器的宽度。

希望有帮助。