前端两个经典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
??
???
總結
- 上一篇： tomcat9-jenkins：insu
- 下一篇： 浏览器的组成