解决margin塌陷与margin合并(margin)清除浮动问题
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
**1、margin塌陷**
问题:垂直方向的父子关系的盒子使用不当会产生margin塌陷。给子级设置margin-top时,他不会相对父级一起动,只有他的margin超过父级的margin时,才会生效,但会带着父级一起动(作者总结,官方定义自己查看)。如:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!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 > < div > < div >//20pxmargin-top </ div > </ div > </ body > </ html > |
效果:
**解决方法:**
(1)给父级盒子加上边框border:1px silod black;(改变结构了,不推荐使用)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!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> <div> <div> </div> </div> </body> </html> |
效果:
(2)触发盒子的BFC模型(不懂就去百度吧)
如何触发盒子的BFC呢?
1.Position:absolute; 2.display:inline-block; 3.float:left/right; 4.overflow:hiddle; 1.Position:absolute;给父级加上绝对定位,让子级相对父级动。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!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 > < div > < div > </ div > </ div > </ body > </ html > |
效果:
2.display:inline-block;让父级同时具有行级属性和块级属性。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!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 > < div > < div > </ div > </ div > </ body > </ html > |
效果:
3.float:left/right;让父级产生浮动流
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | ``` <!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> <div> <div> </div> </div> </body> </html> ``` |
效果:
4.overflow:hiddle;溢出部分隐藏
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | ``` <!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> <div> <div> </div> </div> </body> </html> ``` |
效果:
**2、margin合并**
问题:
margin-left和margin-right区域不能共用。只会叠加。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | ``` <!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共用。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | ``` <!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> <div> 3 </div> <div> 3 </div> </body> </html> ``` |
效果:
解决垂直方向的margin合并问题也是触动盒子的BFC。
解决方法如下:(嵌套盒子:然后:overflower:hidden;)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | ``` <!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> <div> <div> 3 </div> </div> <div> 3 </div></body></html>``` |
效果:
**总结:**
在实际开发时不解决这个问题,比如说要解决垂直方面200px,为什么不直接top200px呢,不用top100px,然后bottom100px。
**顺带说一下清除浮动的两种两种方法:**
(1)在有浮动的元素的后面加入一个标签。
下面我就简单举例了:
<div class = "clear"></div>
css中:
.clrar{clear:both;}
(2)使用伪类元素,找到需要清除的标签,直接使用三件套:
总结
以上所述是小编给大家介绍的解决margin塌陷与margin合并(margin)清除浮动问题,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
相关文章
- 这篇文章主要介绍了margin-top塌陷问题的现象与解决的具体方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-09-13
最新评论