Das CSS-Box-Modell verstehen: In 5 Minuten verstehen, was das CSS-Box-Modell ist?

Was ist das CSS-Box-Modell? Schließlich können Sie beim Erlernen von CSS häufig das CSS-Box-Modell sehen. Daher wird die chinesische PHP-Website im folgenden Artikel über das Konzept des CSS-Box-Modells und Ihr Verständnis des CSS-Box-Modells sprechen.

Werfen wir zunächst einen Blick auf das CSS-Box-Modell?

Aus der Baidu-Enzyklopädie können wir erfahren, dass die im Webdesign häufig vorkommenden Attributnamen: Inhalt, Innenabstand, Rahmen, Rand, CSS-Boxmuster alle diese Eigenschaften haben. Wir können diese Eigenschaften verstehen, indem wir sie auf die Kisten (Boxen) in unserem täglichen Leben übertragen. Die Kisten, die wir in unserem täglichen Leben sehen, sind Kisten, die Dinge aufnehmen können und auch diese Eigenschaften haben, daher wird es das Kistenmodell genannt. Wie unten gezeigt:

Das CSS-Box-Modell ist ein Denkmodell der CSS-Technologie, das häufig im Webdesign verwendet wird.

Nachdem wir nun wissen, was das CSS-Box-Modell ist, wie sollten wir das CSS-Box-Modell verstehen?

Verständnis des CSS-Box-Modells

Wir können das CSS-Box-Modell als eine Box im täglichen Leben verstehen.

Inhalt ist das, was in der Box enthalten ist. Es kann sich um ein Bild, einen Text oder eine kleine Box handeln. In Wirklichkeit kann der Inhalt nicht größer als die Box sein größer als die Box, aber in CSS ist die Box elastisch. Wenn der Inhalt zu groß ist, wird die Box gedehnt, aber es wird die Box nicht beschädigen.

Polsterung ist eine Füllung, genau wie wir sie mit etwas füllen, zum Beispiel mit Schaumstoff oder Plastikfolie, um sicherzustellen, dass die Dinge in der Schachtel nicht beschädigt werden. Die Füllung kann groß oder klein, weich oder hart sein Es spiegelt sich in der Webseite wider. Es ist die Größe der Polsterung.

Rand ist der äußere Rand, da der Rand über Größen- und Farbattribute verfügt, die der Dicke der Box und ihrer Farbe oder ihrem Material entsprechen.

Margin ist der Abstand zwischen unserer Box und anderen Boxen oder anderen Dingen. Bei vielen Kartons ist der Rand der direkte Abstand zwischen den Kartons, der für Belüftung, Schönheit und einfache Entnahme sorgt.

Es gibt zwei Arten von CSS-Boxmodellen, eines ist das W3C-Boxmodell, das das Standardmodell ist, und das andere ist das IE-Boxmodell

So richten Sie die beiden CSS ein Box-Modelle:

/* 标准模型 */
box-sizing:content-box; 
/*IE模型*/
box-sizing:border-box;

Die beiden CSS-Box-Modelle können durch die folgenden Figuren dargestellt werden:

Standardmodell:

IE-Box-Modell :

Aus der obigen Abbildung können wir deutlich erkennen, dass die Breite oder Höhe des IE-Box-Modells die Breite und Höhe des Inhalts (Inhalt) ist und die Breite bzw Die Höhe des W3C-Boxmodells, des Standardmodells, ist der Inhalt (content) + padding (innerer Rand) + Rand (border)

Nehmen wir ein Beispiel: Die Breite und Höhe eines Div betragen 105 Pixel. Der innere Rand beträgt 10 Pixel, der Rand beträgt 5 Pixel und der äußere Rand beträgt 30 Pixel. Die Gesamtbreite und Gesamthöhe des unter dem W3C-Boxmodell angezeigten Div (einschließlich Ränder, Rahmen, Polsterung und Inhalt) beträgt 105 + 15 + 5 + 30 = 155 Pixel. Die Gesamtbreite und Gesamthöhe (einschließlich Ränder, Ränder, Polsterung und Inhalt), die das unter dem IE-Box-Modell angezeigte Div einnimmt, beträgt 105 + 30 = 135 Pixel.

<style>
  .content {background: #eee; height: auto;border: 1px solid black;}
  .div {width: 105px;height: 105px;margin: 30px;padding: 15px;border: 5px solid black;}
  .div-01 {background: green;}
  .div-02 {background: pink;box-sizing: border-box;}
</style>
<div class="content">
  <div class="div div-01">W3C盒模型</div>
  <div class="div div-02">IE盒模型</div>
</div>

Der Effekt ist wie folgt:

Der offensichtliche Unterschied besteht darin, dass, wenn die Breite des Elements (width) sicher ist, die Breite Die Breite des W3C-Boxmodells (Breite) enthält keine Abstände und Ränder, ist aber im IE-Boxmodell enthalten.

Nachdem Sie dies gesehen haben, können Sie den Inhalt des CSS-Box-Modells natürlich nicht vollständig verstehen. Als Nächstes können Sie sich die Spalte CSS-Video-Tutorial ansehen und in der Spalte CSS3-Video-Tutorial wird im darin enthaltenen Video ausführlich über das CSS3-Boxmodell gesprochen.

Verwandte Empfehlungen:

Einführung in das CSS-Box-Modell

Sprechen wir über CSS-Box-Modell_html/css_WEB-ITnose

Das obige ist der detaillierte Inhalt vonDas CSS-Box-Modell verstehen: In 5 Minuten verstehen, was das CSS-Box-Modell ist?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!