您的位置:首页 > Web前端 > CSS

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

2017-10-15 15:40 549 查看

塌陷问题

 

当两个盒子在垂直方向上设置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; }

 

 

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: