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).

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>This is a headline</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing ...</p>
  </article>
  <aside>
    <h2>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

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>This is a headline</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing ...</p>
  </article>
  <aside>
    <h2>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!