Verwalten des CSS -Box -Modells

CSS -Box -Modell: Der Schlüssel zum Verständnis von Weblayout

Das Wichtigste am Verständnis von CSS ist: Alles ist ein Box . Insbesondere generiert jedes Element im Dokument ein Feld. Diese Box kann eine Box auf Blockebene oder eine Inline-Box sein. Die Art der Box bestimmt, wie sich Elemente auf das Seitenlayout auswirken. Das CSS -Box -Modell ist ein Konzept, das zum Beschreiben des Layouts und der Größe von HTML -Elementen verwendet wird. Jedes Element enthält eine Box für Inhalte, Füllungen, Grenze und Ränder. Diese Boxen werden kombiniert, um das Layout des Inhalts des Elements zu bestimmen und wie benachbarte Elemente neben ihnen nebeneinander erscheinen:

Ob das Element ein Feld erstellt und welche Art von Kästchen erstellt wird, hängt von der Markup -Sprache ab. CSS entwickelte sich zu einem Weg, HTML-Dokumente zu stylen, so dass viele visuelle Rendering-Modelle von CSS aus HTML-Unterschieden zwischen Block- und Inline-Elementen stammen. Standardmäßig erstellen Elemente wie <code><p></p> und <section></section> Block-Level-Boxen, aber <a></a>, <span></span> und <em></em> Inline-Boxen erstellen. Andererseits verwendet SVG keine Boxmodelle, sodass die meisten CSS-Eigenschaften im Zusammenhang mit Layout nicht mit SVG verwendet werden können.

Das Box auf Blockebene erstellt neue Inhaltsblöcke, wie in Abbildung 4.1 gezeigt. Das Rendering der Box auf Blockebene ist vertikal, in der Reihenfolge seiner Quelle angeordnet und (außer der Tabelle) erweitert, um die verfügbare Breite seiner enthaltenen Elemente zu füllen. Dies wird als normaler Strom bezeichnet. Der Wert display des Block-Level-Feldes beträgt block, list-item, table oder einen beliebigen table-* -Werwert (z. B. table-cell).

Abbildung 4.1.

Im Gegensatz dazu bilden Inline-Level-Boxen keine neuen Inhaltsblöcke. Stattdessen bilden diese Boxen Zeilen in Boxen auf Blockebene. Sie werden horizontal angezeigt und füllen die Breite der Box aus und wickeln bei Bedarf ein, wie in Abbildung 4.2 gezeigt. Der Wert

des Inline-Level-Feldes lautet

, display, inline oder inline-block. inline-table ruby

Abbildung 4.2. Aber wie berechnet die Größe der Box? Hier werden die Dinge komplizierter. Wie in Abbildung 4.3 gezeigt, ist die Boxgröße die Summe des Boxinhaltsbereichs, der Füllbreite und der Randbreite. Die Margenbreite erstellt ein Randfeld für ein Element und wirkt sich im Dokument aus.

Abbildung 4.3.

Zum Beispiel hat ein <code>width: 300px Element mit padding: 20px, border: 10px und <code><p></p> eine berechnete Breite von 360 Pixel. Dies ist die Summe seiner Breite, der linken und rechten Füllung sowie der Eigenschaften der linken und rechten Randbreite. Um ein Element mit einer Breite von 300 Pixel, einer Füllung von 20 Pixel und einem Rand von 10 Pixel zu erstellen, muss die Breite auf 240px eingestellt werden. So berechnen die meisten Mainstream -Browser Breiten. Um einige der Probleme mit dem Wettbewerbsmodell unter den Browsern zu lösen, führte die CSS -Arbeitsgruppe das box-sizing Attribut vor. Es ermöglicht uns, unsere bevorzugte Kastenmodellimplementierung zu wählen und die Berechnungen im Umgang mit reaktionsschnellem Design erheblich zu vereinfachen.

Verwenden Sie box-sizing Box -Modell

box-sizing Eigenschaften werden in der Spezifikation "Basic User Interface Modul" -Stufe 3 definiert. Es hat zwei mögliche Werte: content-box und border-box. Anfangs ist der Wert von box-sizing content-box. Wenn Sie diesen Wert verwenden, wirkt sich das Festlegen der Eigenschaften width und height eines Elements auf die Größe seines Inhaltsbereichs aus. Dies entspricht dem in der CSS 2.1 -Spezifikation definierten Verhalten und ist das Standardverhalten in modernen Browsern (wie in Abbildung 4.4 gezeigt). Durch das Festlegen des Wertes von box-sizing auf border-box werden einige magische Effekte hervorgerufen. Die Werte von width und height werden jetzt an der Außenrandkante anstelle des Inhaltsbereichs angewendet. Der Rand und die Füllung werden in der Elementbox gezogen, die dem alten Verhalten von Internet Explorer 5.5 entspricht. Schauen wir uns ein Beispiel für eine Mischung aus Füll- und Grenzen unter Verwendung prozentualer Breite und PX -Einheiten an:

<div class="wrapper">
  <article>
    <h2 id="This-is-a-headline">This is a headline</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing ...</p>
  </article>
  <aside>
    <h2 id="This-is-a-secondary-headline">This is a secondary headline</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing ...</p>
  </aside>
</div>

Unsere

und <article> Elemente wenden beide das folgende CSS an, was uns das in Abbildung 4.5 gezeigte Layout ergibt, wobei das erste Element eine Breite von 60% hat und das zweite Element eine Breite von 60% 40% hat: <aside>

article, aside {
  background: #FFEB3B;
  border: 10px solid #9C27B0;
  float: left;
  padding: 10px;
}
article {
  width: 60%;
}
aside {
  width: 40%;
}

Abbildung 4.5. Standardmäßig

sind die Werte

und

beide <aside>. Die Werte <article> und box-sizing erhöhen die Breite jedes Elements um 40 Pixel, was die Segmentierung von 60%/40% stark beeinflusst. Fügen wir nun content-box zu border-width und padding Elementen hinzu: box-sizing: border-box <article> <aside> Sie können die Änderung in Abbildung 4.6 sehen: Das Element hat die gleiche Breite, aber

bedeutet, dass die Breite Grenzen und Polsterung umfasst. Da das Attribut

article, aside {
  box-sizing: border-box;
}

eher auf Grenzkanten als an Inhaltsbereichen angewendet wird, sind unsere Elemente jetzt nebeneinander angeordnet.

box-sizing: border-box width

Abbildung 4.6.

Ich empfehle Ihnen, in Ihrem Projekt box-sizing: border-box zu verwenden. Es erleichtert das Leben, weil es keine Notwendigkeit besteht, die Breitenwerte zu berechnen, um die Werte von Füllung und Grenzen zu berücksichtigen, und das Boxverhalten ist vorhersehbarer. Der beste Weg, um box-sizing: border-box anzuwenden, besteht darin, Reset -Regeln zu verwenden. Das folgende Beispiel stammt aus Chris Coyiers CSS-Tricks-Artikel "Erbenkastengrößen kann etwas besser sein-Best Practices":

<div class="wrapper">
  <article>
    <h2 id="This-is-a-headline">This is a headline</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing ...</p>
  </article>
  <aside>
    <h2 id="This-is-a-secondary-headline">This is a secondary headline</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing ...</p>
  </aside>
</div>

Dies gilt standardmäßig die border-box -Ree auf jedes Element, ohne das Verhalten der vorhandenen Teile des Projekts zu beeinflussen. Wenn Sie wissen, dass es keine Drittanbieter- oder Legacy-Komponenten gibt, die auf dem Verhalten box-sizing beruhen, können Sie diese Regeln vereinfachen: content-box

article, aside {
  background: #FFEB3B;
  border: 10px solid #9C27B0;
  float: left;
  padding: 10px;
}
article {
  width: 60%;
}
aside {
  width: 40%;
}

Das Verwaltungsbox -Modell ist nur ein Element, um zu verstehen, wie komplexe Layouts erstellt werden.

FAQs über CSS -Box -Modelle (FAQ)

(Der FAQ-Teil wird hier weggelassen, da der Artikel zu lang ist und nicht mit dem Pseudo-Original-Ziel übereinstimmt. Der FAQ-Teil kann nach Bedarf hinzugefügt oder geändert werden.)

Das obige ist der detaillierte Inhalt vonVerwalten des CSS -Box -Modells. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!