Wenn Sie HTML-Div-Blöcke verwenden und die Mitte der Blöcke nicht eng verbunden werden kann, kann nichts unternommen werden.
1. Sie können einen in den mittleren Inhalt von <head></head> einfügen
* {
Rand:0;
Polsterung:0;
}
Wenn Sie den Abstand zwischen allen Blöcken auf Null setzen, steht dies nicht in Konflikt mit dem Abstandsrand unten.
2. Es besteht ein Lückenproblem zwischen den oberen und unteren Divs
Ich habe 4 Divs geschrieben, die nach oben und unten verteilt sind und einen Abstand zwischen ihnen haben. Der Code und die Wirkung sind wie folgt:
.div1{
Höhe: 100 Pixel;
Hintergrundfarbe:blau;
Position:relativ;
}
.div2 {
Höhe: 100 Pixel;
Hintergrundfarbe:blauviolett;
Position:relativ;
}
.div3{
Höhe: 100 Pixel;
Hintergrundfarbe:rot;
Position:relativ;
}
.div4{
Höhe: 100 Pixel;
Hintergrundfarbe:gelb;
Position:relativ;
}
<Körper>
<div class="div1" ></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</body>
Dann habe ich versucht, margin:0 zu jedem Div hinzuzufügen, um den Abstand zwischen den Divs zu entfernen. Der Code lautet wie folgt:
.div1{
Höhe: 100 Pixel;
Hintergrundfarbe:blau;
Position:relativ;
Rand: 0;
}
.div2 {
Höhe: 100 Pixel;
Hintergrundfarbe:blauviolett;
Position:relativ;
Rand: 0;
}
.div3{
Höhe: 100 Pixel;
Hintergrundfarbe:rot;
Position:relativ;
Rand: 0;
}
.div4{
Höhe: 100 Pixel;
Hintergrundfarbe:gelb;
Position:relativ;
Rand: 0;
}
Das Ergebnis bleibt unverändert, es bestehen jedoch weiterhin Lücken, wie unten dargestellt:
Als nächstes habe ich Baidu durchsucht und eine Möglichkeit gefunden, die Schriftgröße festzulegen, wie im folgenden Code und Effekt gezeigt:
body{font-size:0;}
.div1{
Höhe: 100 Pixel;
Hintergrundfarbe:blau;
Position:relativ;
}
.div2 {
Höhe: 100 Pixel;
Hintergrundfarbe:blauviolett;
Position:relativ;
}
.div3{
Höhe: 100 Pixel;
Hintergrundfarbe:rot;
Position:relativ;
}
.div4{
Höhe: 100 Pixel;
Hintergrundfarbe:gelb;
Position:relativ;
}
Der obige Code konzentriert sich auf das Hinzufügen von body{font-size:0;} und hat folgende Auswirkung:
Sie können sehen, dass die Lücke zwischen der Ober- und Unterseite des Divs beseitigt wurde. Zwischen der Ober- und der linken Seite besteht jedoch immer noch eine Lücke.
Dies habe ich getan und body{margin:0px;} hinzugefügt. Der Code lautet wie folgt:
Körper{margin:0px;}
body{font-size:0;}
.div1{
Höhe: 100 Pixel;
Hintergrundfarbe:blau;
Position:relativ;
}
.div2 {
Höhe: 100 Pixel;
Hintergrundfarbe:blauviolett;
Position:relativ;
}
.div3{
Höhe: 100 Pixel;
Hintergrundfarbe:rot;
Position:relativ;
}
.div4{
Höhe: 100 Pixel;
Hintergrundfarbe:gelb;
Position:relativ;
}
Der Effekt ist wie folgt:
Wie Sie sehen, wurden alle Lücken beseitigt.
Es besteht jedoch immer noch ein Problem: Wenn Sie die Schriftgröße auf 0 setzen, verschwinden alle Schriftarten.
So habe ich dieses Problem gelöst: Fügen Sie ein Div innerhalb eines Divs hinzu und setzen Sie die Schriftgröße des inneren Divs zurück, zum Beispiel: Font-Size:30px;.
Perfekte Lösung!
3. DIV+CSS löschen: Beide beseitigen das Problem, dass nach dem Floating eine Lücke über dem Div entsteht.
Wir wissen, dass die Verwendung von CSS-Float manchmal zu CSS-Float führt. Zu diesem Zeitpunkt müssen wir das Float-Attribut bereinigen.
Nach der Verwendung von „clear:both“ zum Löschen der Floats erscheint jedoch häufig eine weiße Lücke über dem Div, auf das „clear:both“ angewendet wird.
Die Lösung besteht darin, overflow:hidden; zum Div über diesem Div hinzuzufügen.
<div class="a hid">
<div class="bms_2_1_1 fl">~Ich überquere den Ozean, um dich zu sehen,</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">Peking</div>
Stilbeschreibung:
.cle{clear:both;}
.hid{overflow:hidden;}
.fl{ float:left;}
.fr{ float:right;}
Dies ist der Weg, die Div-Lücke zu schließen, die heutzutage durch clear:both verursacht wird.
Warum clear:both in div verwenden? Hauptsächlich, weil der Text in div b nicht linksbündig ausgerichtet werden kann, selbst wenn text-align:left; in diesem Fall festgelegt ist.
Ein paar Fragen:
(1) Warum ist text-align:left; des chinesischen Textes in div ungültig?
(2) Warum kann die Verwendung von clear:both das Problem lösen, wenn text-align:left; ungültig ist?
(3) Warum entstehen durch die Verwendung von „clear:both“ Lücken?
(4) Warum löst die Verwendung von overflow:hidden; im obigen Div auf derselben Ebene das Lückenproblem unten?
Lassen Sie uns die oben genannten Themen im Detail untersuchen, wenn wir in Zukunft die Gelegenheit dazu haben.
Zusammenfassen:
Wenn ein Div „clear:both“ verwendet, um eine Lücke zu erstellen, müssen Sie „overflow:hidden;“ zum darüber liegenden Geschwister-Div hinzufügen, um die Lücke zu schließen.