您的位置:首页 > Web前端 > > 正文

margin属性设置4个参数(解决margin塌陷与margin合并margin清除浮动问题)

更多 时间:2022-04-02 16:14:18 类别:Web前端 浏览量:1003

margin属性设置4个参数

解决margin塌陷与margin合并margin清除浮动问题

**1、margin塌陷**

问题:垂直方向的父子关系的盒子使用不当会产生margin塌陷。给子级设置margin-top时,他不会相对父级一起动,只有他的margin超过父级的margin时,才会生效,但会带着父级一起动(作者总结,官方定义自己查看)。如:

  • <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    </head>
    <body>
    <li>
    <li>//20pxmargin-top
    </li>
    </li>
    </body>
    </html>
    
  • 效果:

    margin属性设置4个参数(解决margin塌陷与margin合并margin清除浮动问题)

    **解决方法:**  

    (1)给父级盒子加上边框border:1px silod black;(改变结构了,不推荐使用)

  • <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    </head>
    <body>
    <li>
    <li>
    </li>
    </li>
    </body>
    </html>
    
  • 效果:

    margin属性设置4个参数(解决margin塌陷与margin合并margin清除浮动问题)

    (2)触发盒子的BFC模型(不懂就去百度吧)  

    如何触发盒子的BFC呢?  

    1.Position:absolute; 2.display:inline-block; 3.float:left/right; 4.overflow:hiddle; 1.Position:absolute;给父级加上绝对定位,让子级相对父级动。

  • <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    </head>
    <body>
    <li>
    <li>
    </li>
    </li>
    </body>
    </html>
    
  • 效果:

    margin属性设置4个参数(解决margin塌陷与margin合并margin清除浮动问题)

    2.display:inline-block;让父级同时具有行级属性和块级属性。  

  • <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    </head>
    <body>
    <li>
    <li>
    </li>
    </li>
    </body>
    </html>
    
  • 效果:

    margin属性设置4个参数(解决margin塌陷与margin合并margin清除浮动问题)

    3.float:left/right;让父级产生浮动流

  • ```
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    </head>
    <body>
    <li>
    <li>
    </li>
    </li>
    </body>
    </html>
    ```
    
  • 效果:

    margin属性设置4个参数(解决margin塌陷与margin合并margin清除浮动问题)

    4.overflow:hiddle;溢出部分隐藏

  • ```
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    </head>
    <body>
    <li>
    <li>
    </li>
    </li>
    </body>
    </html>
    ```
    
  • 效果:

    margin属性设置4个参数(解决margin塌陷与margin合并margin清除浮动问题)

    **2、margin合并**  

    问题: 

    margin-left和margin-right区域不能共用。只会叠加。

  • ```
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    </head>
    <body>
    <span>1</span>
    <span>2</span>
    </body>
    </html>
    ```
    
  • 效果:

    margin属性设置4个参数(解决margin塌陷与margin合并margin清除浮动问题)

     两个兄弟结构垂直方向的margin共用。

  • ```
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    </head>
    <body>
    <span>1</span>
    <span>2</span>
    <li>3</li>
    <li>3</li>
    </body>
    </html>
    ```
    
  • 效果:

    margin属性设置4个参数(解决margin塌陷与margin合并margin清除浮动问题)

    解决垂直方向的margin合并问题也是触动盒子的BFC。  

    解决方法如下:(嵌套盒子:然后:overflower:hidden;)  

  • ```
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    </head>
    <body>
    <span>1</span>
    <span>2</span>
    <li>
    <li>3</li>
    </li>
    <li>3</li></body></html>```
    
  • 效果:

    margin属性设置4个参数(解决margin塌陷与margin合并margin清除浮动问题) 

    **总结:**  

    在实际开发时不解决这个问题,比如说要解决垂直方面200px,为什么不直接top200px呢,不用top100px,然后bottom100px。  

    **顺带说一下清除浮动的两种两种方法:**  

    (1)在有浮动的元素的后面加入一个标签。  

    下面我就简单举例了:  

    <li class = "clear"></li>  

    css中:  

    .clrar{clear:both;}

    (2)使用伪类元素,找到需要清除的标签,直接使用三件套:  

  • .warpper::after{
    content:"";
    clrar:both;
    display:block;
    }
    
  • 总结

    以上所述是小编给大家介绍的解决margin塌陷与margin合并(margin)清除浮动问题,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

    标签:浮动 塌陷 margin
    您可能感兴趣