首頁 > web前端 > html教學 > 问题与对策:CSS的margin塌陷(collapse)_html/css_WEB-ITnose

问题与对策:CSS的margin塌陷(collapse)_html/css_WEB-ITnose

WBOY
發布: 2016-06-24 11:59:13
原創
1437 人瀏覽過

 

1:

   2: <html>
登入後複製
   3: <head>
登入後複製
   4:     <title></title>
登入後複製
   5:     <metaname=""content="">
登入後複製
   6: <style>
登入後複製
   7: *{
登入後複製
   8:     margin:0px;
登入後複製
   9:     padding:0px;
登入後複製
  10: }
登入後複製
  11:  
登入後複製
  12: #no1{
登入後複製
  13:     background:#808000;
登入後複製
  14:     width:300px;
登入後複製
  15:     height:300px;
登入後複製
  16:     margin:100px 0 0 100px;
登入後複製
  17:     }
登入後複製
  18:  
登入後複製
  19: #no2{
登入後複製
  20:     background:#c0c0c0;
登入後複製
  21:     width:150px;
登入後複製
  22:     height:150px;
登入後複製
  23:     margin-left:20px;
登入後複製
  24:     margin-top:30px;
登入後複製
  25: }
登入後複製
  26: </style>
登入後複製
  27: </head>
登入後複製
  28:  
登入後複製
  29: <body>
登入後複製
  30:  
登入後複製
  31: <div id="no1">
登入後複製
  32:     <div id="no2">Span2</div>
登入後複製
  33: </div>
登入後複製
  34:  
登入後複製
  35: </body>
登入後複製
  36:  
登入後複製
  37: </html>
登入後複製

如果您认为应该是这样的话:

那就错了。结果是这样的:

因为CSS中存在一个margin collapse,即边界塌陷或者说边界重叠。对于上下两个并列的div块而言,上面div的margin-bottom和下面div的margin- top会塌陷,也就是会取上下两者margin里最大值作为显示值,所以从这个意义上说:CSS及浏览器的设计者们希望我们在布局时,如果遇到上下两个并排内容块的安排,最好只设置其中每个块上或下margin的一处即可w3school也规定:当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

但对于父块DIV内含子块DIV的情况,就会按另一条CSS惯例来解释了,那就是:对于有块级子元素的元素计算高度的方式,如果元素没有垂直边框和填充,那其高度就是其子元素顶部和底部边框边缘之间的距离。所以对于代码:

   1: <div class="father"></div>
登入後複製

father这个div的高度为0,因为里面没有能够撑开div的内容。如果变为:

   1: <div class="father">I am here.</div>
登入後複製

则高度就是文字的高度,因为此时文字在撑着这个DIV。

话说回来,一个DIV和它的子DIV特别重视垂直边框或填充,也就好像是,一口锅,里面放个盆,能不能扣住里面的盆,主要看锅盖了,垂直边框或填充就是这个“锅盖”。于是解决的方式至少有以下三种:

1、需要给父div设置边框,当然可以设置边框为透明:

   1: border:1px solid transparent
登入後複製
   2: 或
登入後複製
登入後複製
   3: border-top:1px solid transparent
登入後複製

2、为父DIV添加padding,或者至少添加padding-top;

   1: padding:1px
登入後複製
   2: 或
登入後複製
登入後複製
   3: padding-top:1px;   /*必须大于0*/
登入後複製

3、为父DIV添加overflow:hidden

   1: over-flow:hidden;
登入後複製

 

来源:http://www.ido321.com/387.html

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板