登录  /  注册
首页 > web前端 > css教程 > 正文

CSS的margin边界叠加深度剖析图文演示_经验交流

php中文网
发布: 2016-05-16 12:07:06
原创
1507人浏览过

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

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


元素的顶边界与前面元素的底边界发生叠加


  当一个元素包含在另一个元素中时(假设没有填充或边框将边界分隔开),它们的顶和/或底边界也发生叠加,见图:


元素的顶边界与父元素的顶边界发生叠加


  尽管初看上去有点儿奇怪,但是边界甚至可以与本身发生叠加。假设有一个空元素,它有边界,但是没有边框或填充。在这种情况下,顶边界与底边界就碰到了一起,它们会发生叠加,见图:


元素的顶边界与底边界发生叠加


  如果这个边界碰到另一个元素的边界,它还会发生叠加,见图:


空元素中已经叠加的边界与另一个空元素的边界发生叠加


  这就是一系列空的段落元素占用的空间非常小的原因,因为它们的所有边界都叠加到一起,形成一个小的边界。

  边界叠加初看上去可能有点儿奇怪,但是它实际上是有意义的。以由几个段落组成的典型文本页面为例(见图2-8)。第一个段落上面的空间等于段落的顶边界。如果没有边界叠加,后续所有段落之间的边界将是相邻顶边界和底边界的和。这意味着段落之间的空间是页面顶部的两倍。如果发生边界叠加,段落之间的顶边界和底边界就叠加在一起,这样各处的距离就一致了


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


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

  边界叠加的问题
  边办叠加是一个如果误解就会导致许多麻烦的CSS特性。请参考div元素内嵌套段落的简单示例:
复制代码 代码如下:

 

this paragraph has a 20px margin.

 
 

div 框设置了10像素边界,段落设置了20像素的边界:

复制代码 代码如下:

#box{ 
margin:10px; 
background-color:#d5d5d5; 

p{ 
margin:20px; 
background-color:#6699ff; 


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


图1-1

  但是,产生的样式实际上像图1-2。

图1-2

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

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

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

  为了让前面的示例看起来像图1-1这样,只需在div周围添加补白或边框:
复制代码 代码如下:

#box{ 
margin:10px; 
padding:1px;/*或者border:1px solid color;*/ 
background-color:#d5d5d5; 

p{ 
margin:20px; 
background-color:#6699ff; 


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

  补充解决方案:
复制代码 代码如下:


    1.外层 padding 
    2.透明边框 border:1px solid transparent; 
    3.绝对定位 postion:absolute: 
    4.外层DIV overflow:hidden; 
    5.内层DIV  加float:left; display:inline; 
    6.外层DIV有时会用到zoom:1; 
智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号