主页 > 网站建设 >

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

网站建设 2023-01-28 21:38www.1681989.com免费网站

1、marg塌陷

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, itial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>
<div>//20pxmarg-
</div>
</div>
</body>
</html>

效果

解决方法  

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

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

效果

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

如何触发盒子的BFC呢？  

1.Positionabsolute； 2.display:le-block; 3.float:left/right; 4.overflow:hiddle; 1.Positionabsolute；给父级加上绝对定位，让子级相对父级动。

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

效果

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

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

效果

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

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

 

效果

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

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

效果

2、marg合并  

问题: 

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

```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, itial-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>
```

效果

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

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

效果

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

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

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

效果

 

 

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

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

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

狼蚁网站SEO优化我就简单举例了  

<div class = "clear"></div>  

css中  

.clrar{clear:both;}

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

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

以上所述是长沙网络推广给大家介绍的解决marg塌陷与marg合并（marg）清除浮动问题，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，长沙网络推广会及时回复大家的！

上一篇：使用 css3 transform 属性来变换背景图的方法 下一篇：css两种垂直居中对齐解决方案(小结)

网站设计

Copyright © 2016-2025 www.1681989.com 推火网 版权所有 Power by