今天在制作頁面的時(shí)候發(fā)現(xiàn)兩個(gè)div之間有空隙導(dǎo)致兩個(gè)本來應(yīng)該在一起的效果，這里結(jié)合一下解決方法。
當(dāng)你使用HTML div塊與塊的中間不能緊密連接 怎么都解決不了時(shí)
1、可以在中間內(nèi)容里加一個(gè)
* {
margin:0;
padding:0;
}
2、上下div之間有間距的問題
我寫了4個(gè)div,上下分布,均存在間距,代碼以及效果如下:
.div1{
height:100px;
background-color:blue;
position:relative;
}
.div2 {
height:100px;
background-color:blueviolet;
position:relative;
}
.div3{
height:100px;
background-color:red;
position:relative;
}
.div4{
height:100px;
background-color:yellow;
position:relative;
}
然后,我嘗試在每個(gè)div中加margin:0來去掉div之間的間距,代碼如下:
.div1{
height:100px;
background-color:blue;
position:relative;
margin: 0;
}
.div2 {
height:100px;
background-color:blueviolet;
position:relative;
margin: 0;
}
.div3{
height:100px;
background-color:red;
position:relative;
margin: 0;
}
.div4{
height:100px;
background-color:yellow;
position:relative;
margin: 0;
}
結(jié)果效果不變,依然有間隙,如下圖:
接下來我進(jìn)行了百度,找到了一個(gè)方法,設(shè)置font-size,如下代碼以及效果:
body{font-size:0;}
.div1{
height:100px;
background-color:blue;
position:relative;
}
.div2 {
height:100px;
background-color:blueviolet;
position:relative;
}
.div3{
height:100px;
background-color:red;
position:relative;
}
.div4{
height:100px;
background-color:yellow;
position:relative;
}
上面代碼重點(diǎn)添加了body{font-size:0;},其效果如下:
可以看到div上下之間的間隙消除了.然而,最上面和最左面依然有間隙.
對(duì)此,我是這么做的,添加了body{margin:0px;},代碼如下:
body{margin:0px;}
body{font-size:0;}
.div1{
height:100px;
background-color:blue;
position:relative;
}
.div2 {
height:100px;
background-color:blueviolet;
position:relative;
}
.div3{
height:100px;
background-color:red;
position:relative;
}
.div4{
height:100px;
background-color:yellow;
position:relative;
}
效果如下:
可以看到,間距全部消除了.
然而,還存在一個(gè)問題,就是由于設(shè)置了font-size:0;.那么會(huì)導(dǎo)致所有的字體消失.
對(duì)此,我是這么解決的:在div中在添加div,重新設(shè)置內(nèi)div的字體大小,比如:font-size:30px;.
完美解決!
3、DIV+CSS clear:both清除產(chǎn)生浮動(dòng)后，會(huì)在div上方產(chǎn)生空隙的問題
我們知道有時(shí)使用了css float浮動(dòng)會(huì)產(chǎn)生css浮動(dòng)，這個(gè)時(shí)候就需要清理清除浮動(dòng)，我們就用clear樣式屬性即可實(shí)現(xiàn)。
但是在使用了clear:both清除產(chǎn)生的浮動(dòng)后，往往會(huì)在這個(gè)應(yīng)用了clear:both的div的上方出現(xiàn)一個(gè)白色空隙。
解決辦法是在這個(gè)div的上方的div加上overflow:hidden;
樣式說明：
.cle{clear:both;}
.hid{overflow:hidden;}
.fl{ float:left;}
.fr{ float:right;}
這是這幾天解決clear:both所產(chǎn)生div空隙的辦法。
為什么要在div中使用clear:both?主要是因?yàn)閐iv b中的文字即使在css中設(shè)置了text-align:left; 文字也無法居左，所以這種情況下使用了clear:both。
幾個(gè)問題：
(1)為什么div中文字的text-align:left;無效?
(2)為什么text-align:left;無效的情況下，使用clear:both可以解決?
(3)為什么使用clear:both會(huì)產(chǎn)生空隙?
(4)為什么在上方的同級(jí)div中，使用overflow:hidden;會(huì)解決下方出現(xiàn)的空隙問題?
以上這些問題，以后有機(jī)會(huì)再具體研究一下吧。
總結(jié)：
當(dāng)div應(yīng)用clear:both 產(chǎn)生空隙后，需要在其上方的同級(jí)div加上overflow:hidden;，即可消除空隙。
文章轉(zhuǎn)自腳本之家，原文鏈接：https://www.jb51.net/web/716247.html
申請(qǐng)創(chuàng)業(yè)報(bào)道，分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處，共同探討創(chuàng)業(yè)新機(jī)遇！
