前端两个经典bug

1、margin塌陷bug

<!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>
<style>*{margin: 0;padding: 0;}.wrapper{margin-left: 100px;margin-top: 100px;width: 100px;height: 100px;background-color: blue;/* border-top: 1px solid red; //手法不专业，太残暴*/overflow:hidden; /*推荐方式*/}.content{margin-left: 50px;margin-top: 50px;width:50px;height: 50px;background-color: green;}</style>
<body><div class="wrapper"><div class="content"></div></div></body>
</html>

我想要的效果：content容器相对于父级下移。
        bug原因：
        1.wrapper容器已经有一个margin-top:100px;content也设置一个margin-top:50px;结果是不会产生效果。
        2.除非设置margin-top大于父级容器的这个值，才会看到效果，但父级容器随它一起下移了，就好像父级容器设置了这个值一样
        逃避方式1：——//手法不专业，太残暴，不推荐，产品经理（它的像素眼）也不会同意
        给父级容器加一个上边，border-top: 1px solid red;
        使得子容器能够看到父级的上边来下移。
        逃避方式2：触发BFC，让特定的盒子遵循另一套规则
        如何触发一个盒子的bfc

poosition:absolute;//假如内容就是要摆在那，后面的内容跟随在它下面就不合适
display:inline-block;//假如内容就不要独占一行时就不合适
float:left/right;//假如需求
overflow:hidden;//假如里面的内容就是想要溢出盒子的一部分就不合适

但同时产生了新的问题，需要看需求是否可以配合这些代码使用。

2、magin合并bug

<!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>
<style>*{margin: 0;padding: 0;}.box1{background-color: red;margin-right: 100px;}.box2{background-color: green;margin-left:100px;/* overflow: hidden; */}.demo1{background-color: red;}.demo2{background-color: green;}.bfc{overflow: hidden;}
</style>
<body><span class="box1">123</span><span class="box2">456</span><div class="bfc"><div class="demo1">1111</div></div><div class="bfc"><div class="demo2">2222</div></div> 
</body>
</html>

我想要的效果：box1容器和box2容器不共用magin设置的值。
        bug原因：
        1.box1的margin-right:100px和box2的margin-left:100px共用了100px的距离。
        2.两个容器，一个设置marign-bottom，一个设置margin-top也是这个问题。
        逃避方式1：也是触发BFC规则
        如果出现上下margin合并的话，在它们各自的外面再套一个触发了bfc规则的容器
        其实也不推荐，因为修复时添加了多余的html元素，改变了结构。尽量不改变HTML结构是原则。
        合并的bug，真正解决方式是不解决，只是采用用数学方式，在一个元素上设置margin-right或者margin-left

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/413421.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！