Was ist das Boxmodell?

Das Box-Modell ist eine Möglichkeit, den von HTML-Elementen auf einer Seite eingenommenen Platz zu beschreiben. Das Box-Modell behandelt jedes HTML-Element als rechteckige Box, die aus vier Hauptteilen besteht: Inhaltsbereich, Innenabstand, Rahmen und Ränder. Detaillierte Einführung: 1. Der Inhaltsbereich ist der Teil des HTML-Elements, der tatsächlich Inhalte wie Text, Bilder oder andere verschachtelte Elemente enthält. Dies ist der Kern des Box-Modells und bestimmt den tatsächlichen Inhalt, der vom Element angezeigt wird. Der Abstand ist der Inhaltsbereich. Der Leerraum zwischen dem Rand des Elements und der Eigenschaft „padding-top“ in CSS.

Das Betriebssystem dieses Tutorials: Windows 10-System, DELL G3-Computer.

„Box-Modell“ ist ein wichtiges Konzept in CSS, das verwendet wird, um die Art und Weise zu beschreiben, wie HTML-Elemente Platz auf der Seite einnehmen. Das Box-Modell behandelt jedes HTML-Element als rechteckige Box, die aus vier Hauptteilen besteht: Inhaltsbereich, Innenabstand, Rahmen und Ränder. Das Verständnis des Box-Modells ist für die Frontend-Entwicklung von entscheidender Bedeutung, da es bestimmt, wie Seitenelemente angeordnet und gerendert werden. In diesem Artikel werde ich die verschiedenen Komponenten des Box-Modells und ihre Funktionsweise ausführlich erläutern.

Komponenten des Box-Modells:

Inhaltsbereich:

Der Inhaltsbereich ist der Teil des HTML-Elements, der tatsächlich Inhalte enthält, z. B. Text, Bilder oder andere verschachtelte Elemente. Dies ist der Kern des Boxmodells und bestimmt den tatsächlichen Inhalt, der vom Element angezeigt wird.

Padding:

Padding ist der Leerraum zwischen dem Inhaltsbereich und dem Elementrand. Es kann in CSS mithilfe von Eigenschaften wie „padding-top“, „padding-right“, „padding-bottom“ und „padding-left“ festgelegt werden. Padding steuert den Abstand zwischen dem internen Inhalt eines Elements und seinem Rand.

Rand:

Ein Rand ist eine Linie oder ein Rand um den Inhalt und die Polsterung. Ränder können in CSS mithilfe von Eigenschaften wie „border-width“, „border-style“ und „border-color“ festgelegt werden. Es wird verwendet, um den Inhalt eines Elements zu dekorieren und zu trennen.

Margin:

Margin ist der Leerraum zwischen dem Elementrand und den umgebenden Elementen. Es kann in CSS mithilfe von Eigenschaften wie „margin-top“, „margin-right“, „margin-bottom“ und „margin-left“ festgelegt werden. Ränder werden verwendet, um den Abstand zwischen einem Element und anderen Elementen zu steuern.

So funktioniert das Box-Modell:

Wenn der Browser die Seite rendert, bestimmt er die Gesamtbreite und -höhe jedes HTML-Elements basierend auf der Definition des Box-Modells. Diese Abmessungen bestimmen die Position und Anordnung der Elemente auf der Seite. So funktioniert das Box-Modell:

Gesamtbreite:

Die Gesamtbreite eines Elements entspricht der Breite des Inhaltsbereichs plus der Breite des linken und rechten Innenabstands sowie des linken und rechten Rands plus der Breite des linken und rechten Rand.

Gesamtbreite = Inhaltsbreite + linker Innenabstand + rechter Innenabstand + linke Randbreite + rechte Randbreite + linker Rand + rechter Rand

Gesamthöhe:

Die Gesamthöhe des Elements entspricht der Inhaltshöhe des Bereichs plus die Höhe der oberen und unteren Polsterung und der oberen und unteren Ränder, plus die Höhe der oberen und unteren Ränder.

Gesamthöhe = Inhaltshöhe + obere Polsterung + untere Polsterung + obere Randhöhe + untere Randhöhe + oberer Rand + unterer Rand

Zwei Standards für das Box-Modell:

In der Webentwicklung gibt es zwei Haupt-Box-Modelle Standards: W3C-Standard-Box-Modell und IE-Box-Modell.

W3C-Standard-Box-Modell:

Das W3C-Standard-Box-Modell legt die Breite und Höhe eines Elements so fest, dass nur der Inhaltsbereich einbezogen wird. Auffüllungen, Ränder und Ränder haben keinen Einfluss auf die Gesamtbreite und -höhe eines Elements; sie werden dem Inhaltsbereich hinzugefügt.

Dies ist das Standardverhalten von Webstandards und dem Box-Modell, das von den meisten modernen Browsern übernommen wird.

IE-Box-Modell:

IE-Box-Modell umfasst die Breite und Höhe des Elements einschließlich des Inhaltsbereichs, der Polsterung und des Randes. Ränder haben keinen Einfluss auf die Gesamtbreite und -höhe, sie liegen außerhalb des Elements.

Dies ist das Box-Modell, das von frühen Versionen des Internet Explorer-Browsers übernommen wurde und normalerweise mithilfe der CSS-Eigenschaft box-sizing: border-box; simuliert wird.

Möglichkeiten zur Steuerung des Boxmodells:

In CSS können Sie einige Eigenschaften und Techniken verwenden, um das Verhalten des Boxmodells zu steuern:

box-sizing-Eigenschaft:

box-sizing-Eigenschaft wird zur Steuerung des verwendet Verhalten des Box-Modells, das zwei Werte annehmen kann: content-box und border-box.

content-box ist der Standardwert unter Verwendung des W3C-Standardboxmodells, das angibt, dass die Breite und Höhe des Elements den Inhaltsbereich einschließt und der Abstand, der Rahmen und die Ränder außerhalb des Inhaltsbereichs hinzugefügt werden.

border-box verwendet das IE-Boxmodell, das die Breite und Höhe des Elements einschließlich des Inhaltsbereichs, der Polsterung und des Randes angibt, während die Ränder außerhalb des Elements hinzugefügt werden.

/* 使用box-sizing来指定盒模型的行为 */
.element {
  box-sizing: content-box; /* 默认值，采用W3C标准盒模型 */
}
.element {
  box-sizing: border-box; /* 采用IE盒模型 */
}
padding、border和margin属性：
你可以使用这些属性来控制元素的内边距、边框和外边距的大小。
css
/* 设置内边距 */
.element {
  padding: 10px; /* 上、右、下

Das obige ist der detaillierte Inhalt vonWas ist das Boxmodell?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!