div与div之间有时间隙的处理方式

日期:2021-01-20 类型:科技新闻 

关键词:抠图换背景,免费的抠图软件,美图抠图,手机抠图软件哪个好,p图软件哪个好用

当你应用HTML div块与块的正中间不可以密不可分联接 如何都处理不上时

1、能够在<head></head>正中间內容里加1个

* {
margin:0;
padding:0;
}

使全部块与块之间的间隔为零 还不与下面的 padding margin 矛盾

2、左右div之间有间隔的难题

我写了4个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;
}
<body>
<div class="div1" ></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</body>

随后,我尝试在每一个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;
}

結果实际效果不会改变,仍然有空隙,以下图:

接下来我开展了百度搜索,寻找了1个方式,设定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;
}

上面编码关键加上了body{font-size:0;},其实际效果以下:

能够看到div左右之间的空隙清除了.但是,最上面和最左边仍然有空隙.

对此,我是这么做的,加上了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;
}

实际效果以下:

能够看到,间隔所有清除了.

但是,还存在1个难题,便是因为设定了font-size:0;.那末会致使全部的字体样式消退.

对此,我是这么处理的:在div中在加上div,再次设定内div的字体样式尺寸,例如:font-size:30px;.

完善处理!

3、DIV+CSS clear:both消除造成波动后,会在div上方造成间隙的难题

大家了解有时应用了css float波动会造成css波动,这个情况下就必须清除消除波动,大家就用clear款式特性便可完成。

可是在应用了clear:both消除造成的波动后,常常会在这个运用了clear:both的div的上方出現1个白色间隙。

处理方法是在这个div的上方的div再加overflow:hidden;

                <div class="a hid">
                    <div class="bms_2_1_1 fl">~漂洋过海看来你,</div>
                    <div class="bms_2_1_2 fl"><img src="__STATIC__/images/male.png" width="18" height="18"/></div>
                </div>
                <div class="b cle hid">北京</div>

款式表明:

.cle{clear:both;}
.hid{overflow:hidden;}
.fl{ float:left;}
.fr{ float:right;}

这是这几日处理clear:both所造成div间隙的方法。

为何要在div中应用clear:both?关键是由于div b中的文本即便在css中设定了text-align:left; 文本也没法居左,因此这类状况下应用了clear:both。

几个难题:
(1)为何div汉语字的text-align:left;失效?
(2)为何text-align:left;失效的状况下,应用clear:both能够处理?
(3)为何应用clear:both会造成间隙?
(4)为何在上方的同级div中,应用overflow:hidden;会处理正下方出現的间隙难题?

以上这些难题,之后还有机会再实际科学研究1下吧。

总结:

当div运用clear:both 造成间隙后,必须在其上方的同级div再加overflow:hidden;,便可清除间隙。