CSS的边界边界叠加深度分析

边界叠加

边界的叠加是一个相当简单的概念，然而，在网页布局的实践中，它会引起许多混乱，简单地说，当两个垂直边界相遇时，它们就会形成一个边界，边界的高度等于两个叠加边界的高度。

当一个元素出现在另一个元素上时，第一个元素的底部边界被叠加在第二个元素的顶边界上，如图所示：


上、下边界边界单元-单元在叠加前出现

当一个元素包含在另一个元素中（假设没有边界被填充或边界分隔）时，顶部和/或底部边界也重叠。


顶层边界与母元素叠加边界元素

虽然一开始看起来有点奇怪，边界甚至可以叠加在自己的上面，假设有一个空的元素有边界，但没有边界或填充，在这种情况下，顶边界和底部边界是在一起相遇的，它们是叠加的。


上下边界元叠加

如果边界被另一个元素的边界所接触，它也将被叠加。


我们在边界上叠加了一个空元素，与另一个空元素边界叠加。

这就是为什么一系列空的段落元素占据一个很小的空间，因为它们的所有边界都堆叠在一起形成一个小的边界。

边界的叠加可能刚开始看起来有点奇怪，但它实际上是有意义的，一个由几段典型文本页的一个示例（见图2-8）。以上第一段的空间是相等的段顶界。如果没有边界重合，后续段落之间边界将相邻的上边界和底边界的总和。这意味着段落之间的空间是两次页面顶部。如果边界重合时，顶部边界和段落之间的边界是叠加的，所以从各个地方的距离是一样的。


我们保持了距离中元素之间的一致的边界叠加。

一般的文档流中，只有框帧的垂直边界将被边界叠加，内部帧、浮动帧或绝对定位帧之间的边界不重叠。

边界叠加问题

覆盖是一个CSS特性，如果被误解会导致很多麻烦。请参考嵌入在一组段落中的div元素的一个简单示例。



thisparagraphhasa20pxmargin。



div框设置一个10像素的边界，该段设置20像素的边界：


#箱{
保证金：10px；
背景颜色：# d5d5d5；
}
P {
保证金：20px；
背景颜色：# 6699ff；
}


你会很自然地认为，由此产生的风格将如图1-1，以20像素的距离段和div之间，大约10像素的外部边界

图1-1

然而，结果样式实际上类似于图1-2。

图1-2

有两种情况，第一，20像素的上边界和上边界的段落是叠加在DIV 10像素边界形成一个20像素的垂直边界，这些边界不被DIV，但伸出的部门这是由于对元素与块计算高度的顶部和底部的水平子元素。

如果元素没有垂直边框和填充，它的高度是子元素包含的顶部和底部边框边缘之间的距离。因此，顶部和底部的包含子元素的空白边突出的容器元素的外侧。然而，有一个简单的解决方案。通过添加一个垂直边框或填充，空白边不再折叠，和元素的高度是顶部和底部的边缘，它包含的子元素之间的距离。

为了让前面的示例看起来像图1-1，只需在div周围添加填充或边框：


#箱{
保证金：10px；
填料：1px； / * * /或边框：1pxsolidcolor；
背景颜色：# d5d5d5；
}
P {
保证金：20px；
背景颜色：# 6699ff；
}


大多数的问题是可以修复的重叠添加透明框架或1px填料。

补充方案：

1。外填料

2。透明边框：1pxsolidtransparent；

三.绝对定位：绝对定位：

4。外层divoverflow：隐藏；

5。内层div加浮点：左；显示：内联；

6。外层div有时使用缩放：1；

以上是本文的全部内容，希望本文的内容能给大家的学习或工作带来一定的帮助，同时也希望能给予更多的支持！