前端基础5,css中常见margin塌陷难题之化解办法

文/Jack同学

塌陷难题


 

当多少个盒子在笔直方向上安装margin值时,会并发二个妙不可言的塌陷现象。

margin塌陷难点在布局开垦的进程中也是陆续蒙受,原理和平解决决措施都轻便。那margin塌陷是哪些啊?其实margin塌陷的乐趣正是:四个垂直方向的成分,他们的垂直方向的margin值是公私的,所以七个要素垂直方向都安装有margin的时候,就感到到短了成都百货上千,很像塌陷掉了同样。

①垂直并列

    首先设置三个DIV,并为其制定宽高

  1. 图片 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>    
    

    图片 2

     

          图片 3

     

     对box1我们为其设置margin-bottom:50px;

     对box2我们为其安装margin-top: 40px;

  1. 图片 4

     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>
    

    图片 5

    
 大家鲜明会很自然的显著那八个盒子之间的相距为90px,事实上其实不然.

     如下图所示:

          图片 6

   
 两盒子之间的离开仅是50px,也正是说两盒子之间的margin出现了重叠部分,故而大家能够得出:垂直之间塌陷的基准是以两盒子最大的异乡距为准。

 

看演示:

②嵌套关系(父级成分塌陷)

  1. 图片 7

     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>
    

    图片 8

     如图示

 

         图片 9

    当为子盒子加多margin-top:10px;时会发生如下情形:

          图片 10

    子盒子和父盒子之间并没出现期待的10px间隙而是父盒子与子盒子一齐与页面顶上部分发生了10px茶余餐后(即父级盒子往下塌陷了10px)。

 

<!--html代码--><div ></div><div ></div>

/*css代码*/ .box1 { width: 200px; height: 200px; background-color: #abcdef; } .box2 { width: 200px; height: 200px; background-color: #666; margin-top: 100px; }
化解形式:

获得的标准:

(1)为父盒子设置border,为外层增添border后老爹和儿子盒子就不是确实含义上的贴合  (能够设置成透明:border:1px solid transparent)。

发表评论

电子邮件地址不会被公开。 必填项已用*标注