Vergleich des CSS-Float-Attributs und der Position: absolut

Ich glaube, viele Leute haben diese Frage: Welches ist besser, Float oder Position: Absolut, im Seitenlayout? Da es sich um ein Layout handelt, ist es besser, Float zu verwenden. Dieser Float kann gelöscht werden und hat im Allgemeinen keinen Einfluss auf das Gesamtlayout. Und die Position und Positionierung unterliegt keinen Einschränkungen. Wenn Sie eine spezielle Positionierung oder schwebende Ebenen erstellen möchten, können Sie dies im Allgemeinen in Betracht ziehen. Für ein normales Seitenlayout empfehle ich persönlich die Verwendung des FLOAT

1.float-Attributs, um die Richtung zu definieren, in der das Element schwebt. In der Vergangenheit wurde diese Eigenschaft immer auf Bilder angewendet, wodurch der Text um das Bild herum umbrochen wurde. In CSS kann jedoch jedes Element schwebend dargestellt werden. Ein schwebendes Element erstellt eine Box auf Blockebene, unabhängig davon, um welchen Elementtyp es sich handelt. p ist ein typisches Element auf Blockebene, das allein eine Zeile einnimmt.

Sehen wir uns zunächst an, wie die grundlegendsten Elemente auf Blockebene angeordnet sind. HTML-Code, die folgenden Stile basieren darauf.

Code kopieren Der Code lautet wie folgt:

​​​box3"> ;
Frame 3
Frame 3
:


.boxBg{
margin: 0 auto;
width:500px;
height:200px;
border:2px solid #ccc

}

.box1{

width:100px;

height:50px;background-color:red }

.box2{

width:100px;
height:50px;
background-color:blue
}
.box3{
width:100px;
height:50px;
background-color :green
}


Ausführungsergebnis:




Da p ein Element auf Blockebene ist, werden die Boxen vertikal angeordnet. Im tatsächlichen Betrieb ist es häufig erforderlich, die Rahmen horizontal anzuordnen. Es gibt zwei Möglichkeiten, dies zu tun. Der erste ist display:inlin-block;


Code kopieren
Der Code lautet wie folgt:

.boxBg{

margin: 0 auto;

width:500px;

height:200px; border:2px solid #ccc

}

.box1{

width:100px;

height:50px; background -color :red; display:inline-block

}

.box2{
width:100px;
height:50px;
background-color:blue;
display :inline -block
}
.box3{
width:100px;
height:50px;
background-color:green;
display:inline-block
}


Ausführungsergebnis:




Was die Lücke in der Mitte betrifft, so wird der wesentliche Grund auf den Leerraum zwischen den Elementen zurückgeführt, also legen Sie fone fest - Bei der Größe des übergeordneten Elements können Sie die Größe des Leerraums anpassen.


Code kopieren
Der Code lautet wie folgt:

.boxBg{

margin: 0 auto;

width:500px;

height:200px ; border:2px solid #ccc;

font-size:34px;

}

Nach dem Ändern von font-size:34px wird die Lücke größer.

Ausführungsergebnis:

In ähnlicher Weise müssen Sie zum Entfernen der Lücke die Schriftgröße:0;


kopieren Code
Der Code lautet wie folgt:

.boxBg{
margin: 0 auto;
width:500px;
height:200px;
border:2px solid #ccc;
font-size:0
}

Ausführungsergebnis:

Auf diese Weise wird das gewünschte Layout erreicht und auch der Text im Feld verschwindet. Beweisen Sie, dass die Größe des Textes die Lücke beeinflusst. Setzen Sie es einfach im untergeordneten Element zurück. Natürlich steht das heute nicht im Mittelpunkt. Der gleiche Effekt float:left; kann auch leicht erreicht werden.

Code kopieren Der Code lautet wie folgt:

Ausführungsergebnis:

Nachdem Float zum Element hinzugefügt wurde, trifft das Floating-Element auf den Rand des übergeordneten Elements oder einen anderen Floating-Element-Rand. unmittelbar daneben angezeigt. Wenn beispielsweise im folgenden Beispiel die Gesamtbreite des schwebenden Elements größer als die des übergeordneten Elements ist, wird die Zeile umbrochen. Beim Umbrechen der Zeile wird das vorherige schwebende Element angetroffen und danach angezeigt

Code kopieren Der Code lautet wie folgt:

Ausführungsergebnis:

Was wird das Ergebnis sein, wenn Inline-Block verwendet wird?

Code kopieren Der Code lautet wie folgt:

Ausführung Ergebnis:

Unter normalen Umständen sehr häufiges Problem. Der graue Hintergrund sollte so hoch sein wie der Rahmen, aber die Realität ist immer nicht zufriedenstellend :)

Der Grund für diese Situation ist bekanntermaßen das Schweben an vielen Stellen sagte, dass schwebende Elemente vom normalen Fluss abbrechen, sodass gewöhnliche Elemente als nicht existierende schwebende Elemente behandelt werden können, sodass der Hintergrund hier nicht geöffnet wird. Aber Schüler, die sorgfältig lesen, werden sich daran erinnern, dass oben erwähnt wurde, dass schwebende Elemente vorhanden sind hat keinen Einfluss auf den Blockrahmen, also auf Text- oder Inline-Elemente. Unabhängig davon, ob es sich um ein Element auf Blockebene oder um ein Inline-Element handelt, gehört es zum normalen Fluss Warum wirkt sich der normale Fluss auf den Linienrahmen aus? Tatsächlich glaube ich nicht, dass es nötig ist, sich mit diesen konzeptionellen Dingen zu befassen. Nach meinem Verständnis befinden sich schwebende Elemente nicht im selben horizontalen Raum wie Elemente auf Blockebene, sondern im selben Raum wie Text-Inline-Elemente. Daher entspricht der Rand hier der Platzierung über dem Hintergrund und hat daher keine Auswirkungen auf den Hintergrundelemente. Was normalerweise als Löschen von Floats bezeichnet wird, bedeutet nicht, das Float-Attribut des Floating-Elements zu entfernen, sondern die Floating-Elemente um es herum zu löschen, sodass sich keine Floating-Elemente um es herum befinden Gehen Sie in die zweite Zeile. Sie können „clear:right;“ nicht in Feld 2 verwenden. Sie müssen „clear:left;“ verwenden.

Code kopieren

Der Code lautet wie folgt:

.box3{
float:left;
width:100px;
height:50px;
background-color:green;
clear:left
}

Ausführungsergebnis:

ok! Nachdem wir das verstanden haben, sprechen wir darüber, wie man den Hintergrund und den Rahmen auf die gleiche Höhe bringt Methode: Die direkteste Methode besteht darin, die Hintergrundhöhe direkt auf den Rahmen einzustellen. Dies ist natürlich nicht der Punkt, an dem es darum geht, den Float zu löschen. Schauen wir uns zunächst das Beispiel an:

Kopieren Sie den Code Der Code lautet wie folgt:

< html>