码迷,mamicode.com
首页 > Web开发 > 详细

css中常见margin塌陷问题之解决办法

时间:2017-10-15 17:42:22      阅读:144      评论:0      收藏:0      [点我收藏+]

标签:gif   image   osi   外边距   问题   利用   box   ott   order   

塌陷问题


 

当两个盒子在垂直方向上设置margin值时,会出现一个有趣的塌陷现象。

①垂直并列

    首先设置两个DIV,并为其制定宽高
  1. 技术分享
     1 /*HTML部分*/
     2 <body>
     3     <div class="box1">box1</div>
     4     <div class="box2">box2</div>
     5 </body>
     6 /*CSS部分*/
     7 <style> 
     8     *{
     9          margin: 0; 
    10          padding: 0; 
    11     }
    12      .box1{ 
    13          width: 200px; 
    14          height: 200px; 
    15          background: yellowgreen;
    16      } 
    17     .box2{ 
    18          width: 200px; 
    19          height: 200px; background: gray; 
    20     }
    21 </style>    
    技术分享

     

          技术分享
     
     对box1我们为其设置margin-bottom:50px;
     对box2我们为其设置margin-top: 40px;
  1. 技术分享
     1 <style>
     2 *{
     3     margin:0;
     4     padding:0;
     5 }
     6 .box1{
     7     width:200px;
     8     height:200px;
     9     background: yellowgreen;
    10     margin-bottom: 50px;
    11 }
    12 .box2{
    13     width:200px;
    14     height:200px;
    15     background: gray;
    16     margin-top: 40px;
    17 }
    18 </style>
    技术分享
      我们肯定会很理所当然的认定这两个盒子之间的距离为90px,事实上并非如此.
     如下图所示:
          技术分享
     两盒子之间的距离仅是50px,也就是说两盒子之间的margin出现了重叠部分,故而我们可以得出:垂直之间塌陷的原则是以两盒子最大的外边距为准。
 

②嵌套关系(父级元素塌陷)

  1. 技术分享
     1 /*CSS部分*/
     2 <style>
     3 .box1{
     4     width:400px;
     5     height:400px;
     6     background: pink;
     7 }
     8 .box2{
     9     width:200px;
    10     height:200px;
    11     background: lightblue;
    12 }
    13 </style>
    14 /*HTML部分*/
    15 <body>
    16     <divclass="box1">
    17     <divclass="box2"></div>
    18 </div>
    19 </body>
    技术分享
     如图示
 
         技术分享
    当为子盒子添加margin-top:10px;时会发生如下情况:
          技术分享
    子盒子和父盒子之间并没出现期望的10px间隙而是父盒子与子盒子一起与页面顶端产生了10px间隙(即父级盒子往下塌陷了10px)。
 
解决方法:
(1)为父盒子设置border,为外层添加border后父子盒子就不是真正意义上的贴合  (可以设置成透明:border:1px solid transparent)。
(2)为父盒子添加overflow:hidden;
(3)为父盒子设定padding值;
(4)为父盒子添加position:fixed;
(5)为父盒子添加 display:table;
(6)利用伪元素给子元素的前面添加一个空元素
.son:before{ content:"";
             overflow:hidden; }

 

 

css中常见margin塌陷问题之解决办法

标签:gif   image   osi   外边距   问题   利用   box   ott   order   

原文地址:http://www.cnblogs.com/syp172654682/p/7671830.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!