您的位置：首页 > 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

上一篇：python樱花绽放代码（新年快乐! python实现绚烂的烟花绽放效果）

下一篇：云主机的作用和功能（云主机具备的特性有哪些？）

您可能感兴趣

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

margin属性设置4个参数

热门推荐

排行榜