Sprechen Sie kurz über das Verständnis des CSS-Box-Modells? Einführung in das CSS-Boxmodell

Der Inhalt dieses Artikels besteht darin, kurz über das Verständnis des CSS-Box-Modells zu sprechen? Eine Einführung in das CSS-Box-Modell. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Der Aufbau jeder Webseite ist untrennbar mit dem Stapeln von Boxmodellen verbunden. Es sollte gesagt werden, dass das CSS-Modell eine Grundlage des Webs ist. Der Unterschied im Endeffekt ist nichts anderes als der Unterschied in Höhe und Breite, Inhalt und Hintergrundlöschung.

Was wissen Sie also über CSS-Modelle?

Zunächst einmal: Wie viele Arten von CSS-Box-Modellen gibt es? Zwei Arten.

1. Standardmodell 2. IE-Modell

Lassen Sie uns zunächst über den Unterschied zwischen diesen beiden Boxmodellen sprechen:

Der größte Unterschied zwischen dem Standardmodell und dem IE-Modell ist der Unterschied in den Berechnungsmethoden. Die Höhe und Breite des Standard-Box-Modells sind die Höhe und Breite des Inhalts. Die Berechnung der Höhe und Breite des IE-Modells umfasst die Breite und Höhe von Polsterung und Rand. Beim Einrichten können wir zwischen beiden unterscheiden, indem wir die Boxgröße festlegen.

Der Wert der Boxgröße

content-box: Standard-Boxmodell.

border-box: IE-Boxmodell.

Wann sollte ich also das IE-Box-Modell verwenden? Das Gefühl des Autors wird an vielen Stellen nicht genutzt, aber es gibt eine Situation, in der es sehr notwendig ist. Wenn Sie ein Element so einstellen, dass es schwebt und einen Rahmen hinzufügt, wird der Stil verwechselt, wenn zu diesem Zeitpunkt das Standard-Box-Modell verwendet wird. Das Erscheinungsbild ist, dass das

-Element auf 1 Pixel komprimiert wird Grenze. Unansehnlich. Das Festlegen von box-sizing:border-box kann dieses Problem jedoch sehr gut lösen.

Zweitens, wie erhalte ich die Breite und Höhe eines Elements mit js?

Lassen Sie uns zunächst die Methoden skizzieren und dann über die Unterschiede sprechen.

document.getElementById('id').style.width/height: Nur beschränkt auf das Abrufen von Inline-Stilen, um Breite und Höhe zu erhalten.

document.getElementById('id').currentStyle.width/height: Sie können die Breite und Höhe des Browsers nach dem Rendern in Echtzeit ermitteln. Diese Methode ist genauer, unterstützt jedoch nur IE. (Es muss genau sein und jeder kann die folgende Methode verwenden)

window.getComputedStyle(dom).width/height: Diese Methode ist mit Chrome- und Firefox-Browsern kompatibel.

document.getElementById('id').getBoundingClientRect().width/height: Diese Methode kann auch die Breite und Höhe des Elements zeitlich ermitteln, die absolute Position eines Elements berechnen und oben links ermitteln , Breite gleichzeitig , Höhe vier Werte.

Wenn es um das CSS-Box-Modell geht, müssen wir das Konzept von BFC (Block-Level-Formatierungskontext) einführen. Es gibt eine detailliertere Einführung in diesen Teil des Inhalts online. Deshalb werde ich das Rad hier nicht neu erfinden. Ja, nur um es kurz zu erwähnen.

Prinzip von BFC

1 Die vertikalen Ränder des BFC-Elements überlappen.

2. Der BFC-Bereich überschneidet sich nicht mit der BOX des schwebenden Elements.

3. BFC ist ein unabhängiger Container und die Elemente außerhalb haben keinen Einfluss auf die Elemente im Inneren.

4. Bei der Berechnung der BFC-Höhe werden auch schwebende Elemente berücksichtigt.

So erstellen Sie BFC

1. overflow:hidden, auto;

2. Der Wert von float ist nicht none;

3. Der Wert der Position ist nicht der Standardwert oder der relative Wert

4. Anzeige: Inline-Block, Tabellenzelle, Tabelle

Das obige ist der detaillierte Inhalt vonSprechen Sie kurz über das Verständnis des CSS-Box-Modells? Einführung in das CSS-Boxmodell. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!