CSS中margin边界叠加问题及解决方案

你对CSS的margin边界叠加的概念是否了解，这里和大家分享一下，当一个元素出现在另一个元素上面时，第一个元素的底边界与第二个元素的顶边界发生叠加。

CSS的margin边界叠加深度剖析

边界叠加简介

边界叠加是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。简单地说，当两个垂直边界相遇时，它们将形成一个边界。这个边界的高度等于两个发生叠加的边界的高度中的较大者。

当一个元素出现在另一个元素上面时，第一个元素的底边界与第二个元素的顶边界发生叠加，见图：

◆边界叠加在元素之间维护了一致的距离

只有普通文档流中块框的垂直边界才会发生边界叠加。行内框、浮动框或绝对定位框之间的边界不会叠加。

边界叠加的问题

边办叠加是一个如果误解就会导致许多麻烦的CSS特性。请参考p元素内嵌套段落的简单示例：

 
Thisparagraphhasa20pxmargin.
 

p框设置了10像素边界，段落设置了20像素的边界：

#box{  
   margin:10px;  
   background-color:#d5d5d5;  
}  
p{  
   margin:20px;  
   background-color:#6699ff;  
}

你会自然地认为产生的样式会像图1-1那样，在段落和p之间有20像素的距离，在p外边围绕着10像素的边界。

图1-1

这里发生了两个情况。首先，段落的20像素上边界和上边界与p的10像素边界叠加，形成一个单一的20像素垂直边界。其次，这些边界不是被p包围，而是突出到p的顶部和底部的外边。出现这种情况是由于具有块级子元素的元素计算其高度方式造成的。

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

为了让前面的示例看起来像图1-1这样，只需在p周围添加补白或边框：

#box{  
   margin:10px;  
   padding:1px;/*或者border:1pxsolidcolor;*/  
   background-color:#d5d5d5;  
}  
p{  
   margin:20px;  
   background-color:#6699ff;  
}

边l界叠加的大多数问题可以通过添加透明边框或1px的补白来修复。

补充解决方案：

1.外层padding

2.透明边框border:1pxsolidtransparent;

3.绝对定位postion:absolute:

4.外层poverflow:hidden;

5.内层p　加float:left;display:inline;

6.外层p有时会用到zoom:1;

以上就是本篇的全部内容，更多相关教程请访问 CSS基础视频教程， CSS3视频教程，bootstrap视频教程！

以上就是CSS中margin边界叠加问题及解决方案的详细内容，更多请关注 第一PHP社区 其它相关文章！