前端两个经典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; //手法不專業(yè)，太殘暴*/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容器相對(duì)于父級(jí)下移。
??????? bug原因：
??????? 1.wrapper容器已經(jīng)有一個(gè)margin-top:100px;content也設(shè)置一個(gè)margin-top:50px;結(jié)果是不會(huì)產(chǎn)生效果。
??????? 2.除非設(shè)置margin-top大于父級(jí)容器的這個(gè)值，才會(huì)看到效果，但父級(jí)容器隨它一起下移了，就好像父級(jí)容器設(shè)置了這個(gè)值一樣
??????? 逃避方式1：——//手法不專業(yè)，太殘暴，不推薦，產(chǎn)品經(jīng)理（它的像素眼）也不會(huì)同意
??????? 給父級(jí)容器加一個(gè)上邊，border-top: 1px solid red;
??????? 使得子容器能夠看到父級(jí)的上邊來(lái)下移。
??????? 逃避方式2：觸發(fā)BFC，讓特定的盒子遵循另一套規(guī)則
??????? 如何觸發(fā)一個(gè)盒子的bfc
- ??????? poosition:absolute;//假如內(nèi)容就是要擺在那，后面的內(nèi)容跟隨在它下面就不合適
- ??????? display:inline-block;//假如內(nèi)容就不要獨(dú)占一行時(shí)就不合適
- ??????? float:left/right;//假如需求
- ??????? overflow:hidden;//假如里面的內(nèi)容就是想要溢出盒子的一部分就不合適
??????? 但同時(shí)產(chǎn)生了新的問(wèn)題，需要看需求是否可以配合這些代碼使用。
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設(shè)置的值。
??????? bug原因：
??????? 1.box1的margin-right:100px和box2的margin-left:100px共用了100px的距離。
??????? 2.兩個(gè)容器，一個(gè)設(shè)置marign-bottom，一個(gè)設(shè)置margin-top也是這個(gè)問(wèn)題。
??????? 逃避方式1：也是觸發(fā)BFC規(guī)則
??????? 如果出現(xiàn)上下margin合并的話，在它們各自的外面再套一個(gè)觸發(fā)了bfc規(guī)則的容器
??????? 其實(shí)也不推薦，因?yàn)樾迯?fù)時(shí)添加了多余的html元素，改變了結(jié)構(gòu)。盡量不改變HTML結(jié)構(gòu)是原則。
??????? 合并的bug，真正解決方式是不解決，只是采用用數(shù)學(xué)方式，在一個(gè)元素上設(shè)置margin-right或者margin-left
??
???
總結(jié)
- 上一篇： tomcat9-jenkins：insu
- 下一篇： 浏览器的组成