Yahoo! User Interface Blog (YUIBlog)

CSS 101: Block-Formatierung Contexts

Was bedeutet das spec sagen über ...

Wie Block Formatierung Kontexten flow

Die Positionierung Schema zu welchem ​​Block Formatierung Kontexte gehören, ist normalen Fluss . Daher ist der "Block" aus einem Block Formatierung Kontext, in den Fluss von der Seite positioniert, wie Sie mit erwarten würden, Block -Boxen, Inline-Formatierung von Inline -Boxen, die relative Positionierung von Block-oder Inline-Boxen, und die Positionierung der Run-in- Boxen. Einfach ausgedrückt, sie sind Teil der Seite fließen.

Was löst Block Formatierung Kontexten

Abschnitt 9.4.1 besagt, dass die folgenden werden neue Block-Formatierung Kontexten zu etablieren:

• Schwimmer,
• absolut positionierten Elementen,
• Inline-Blöcke,
• Tisch-Zellen,
• Tisch-Beschriftungen,
• Elemente mit "Überlauf" (einen anderen Wert als "sichtbar") gestylt

Aber nach der CSS Level 3-Spezifikation ist ein Block-Formatierung Kontext (a "flow root" in CSS3 sprechen) erstellt werden, wenn folgende Bedingung erfüllt ist:

• Der Wert von " Position "ist weder" static "noch" relativ "(siehe [CSS3POS] ).

Diese Definition bedeutet, dass position:fixed wird ein neuer Block-Formatierung Zusammenhang auch. Dies ist kein miss in Abschnitt 9.4.1, obwohl; feste Positionierung ist eine Unterkategorie der absoluten Positionierung (9.6.1) und Referenzen in der Spezifikation zu einem absolut positionierten Element (oder seinem Kasten) implizieren, dass das Element der " Position "Eigenschaft hat den Wert "absolute" oder "fixed".

Beachten Sie, dass display:table begründet keinen Block Formatierung Kontexte per se. Aber weil es erzeugen können anonyme Boxen , einer von ihnen (mit display:table-cell ) wird ein neuer Block Formatierung Kontext. In anderen Worten, ist der Auslöser der anonymen Feld nicht display:table . Das ist etwas Autoren im Hinterkopf behalten sollte, denn auch wenn beide Stile neuen Block Formatierung Kontexten (implizit oder explizit) zu etablieren, clear nicht die gleiche Arbeit mit display:table , wie es mit tut display:table-cell .

Eine endgültige Auslöser ist die fieldset -Element. Seltsamerweise gab es keine Informationen über www.w3.org zu diesem Verhalten, bis der HTML5 -Spezifikation. Es gab Browser-Bugs ( Webkit , Mozilla ), dass dies erwähnt, aber nichts "offizielles". Eigentlich, auch wenn Fieldsets Aufbau neuer Block Formatierung Zusammenhängen in den meisten Browsern, wie pro Abschnitt 3,2 (UA-Konformität), Autoren nicht sollten diese für selbstverständlich halten:

CSS 2.1 nicht definiert, welche Eigenschaften die Kontrollen und Rahmen bewerben, oder wie CSS kann style ihnen verwendet werden. User-Agents können CSS-Eigenschaften, um diese Elemente anzuwenden. Autoren wird empfohlen, eine solche Unterstützung als experimentell zu behandeln. Eine künftige Höhe der CSS können angeben, dies weiter.

Was Block Formatierung Kontexten

Block-Formatierung Kontexte enthalten schwimmt wegen der Art, sie fließen, und pro Abschnitt 9.4.1, verhindern sie einstürzenden Margen und nicht überschneiden schwebt:

In einem Block-Formatierung Zusammenhang sind Kästen aus einer nach dem anderen gelegt, vertikal, beginnend an der Spitze eines Blocks. Der vertikale Abstand zwischen zwei Geschwister-Boxen wird durch die "Marge" Eigenschaften. Vertikale Ränder zwischen benachbarten Block-Boxen in einem Block-Formatierung Zusammenhang Zusammenbruch .

In einem Block Formatierung Kontext, berührt jedes Kästchen der linken äußeren Rand der linken Kante des umschließenden Blocks (für Rechts-nach-links-Formatierung, rechten Rand berühren). Dies ist auch in Anwesenheit von Schwimmern true (obwohl eine Box Line-Boxen schrumpfen wegen der Schwimmer), es sei denn, der Box stellt eine neue Block-Formatierung Kontext (in diesem Fall die Box selbst kann schmaler werden durch die Schwimmer).

Genug mit den Spezifikationen, was bedeutet das in der realen Welt?

Block-Formatierung Kontexten verhalten mehr oder weniger wie jeder Block-Box, abgesehen von diesen wichtigen Ausnahmen:

• Block-Formatierung Kontexten verhindern Marge Zusammenbruch

  Vertikale Ränder zwischen benachbarten Block-Boxen Zusammenbruch , aber nur, wenn sie im selben Block Formatierung Kontext. In anderen Worten, wenn die angrenzenden Felder nicht im gleichen Block Formatierung Kontext gehören, werden ihre Marge nicht zusammenbrechen.

  Beispiel:

  Das ist ein Absatz in einem DIV mit einem blauen Hintergrund, mit Stil margin:20px .

  Das ist ein Absatz in einem DIV mit einem blauen Hintergrund, mit Stil margin:20px .

  Das ist ein Absatz in einem DIV mit einem blauen Hintergrund, mit dem es gestylt margin:20px , ist die Muttergesellschaft DIV mit Stil overflow:hidden;zoom:1 .

  Zwischen den beiden ersten blauen Kästchen oben, unten und oben Rand der Absätze Zusammenbruch (der Abstand entspricht 20 Pixel, nicht 40 Pixel), sondern weil das letzte DIV einen neuen Block Formatierung Kontext schafft, haben die Margen des dritten Absatzes nicht zusammenbrechen , damit sie nicht "durchhalten" des Absatzes Container, sondern sind Teil der Block-Box.

  Hinweis: in IE6, ohne ausdrückliche Margen der DIV nicht an den Rand legen würde.

  Wenn es um die kollabierenden Margen geht, einen neuen Block Formatierung Kontext verhält sich wie die Anwendung border oder padding auf das Element.

• Block-Formatierung Kontexte enthalten schwimmt

  Ich bin sicher, dass Sie der Satz gehört "einem Schwimmer enthält immer schwebt", oder vielleicht der FNE (gehört schweben fast alles )-Methode. Aber die Grundlage dafür ist, dass Schwimmer sind Block-Formatierung Kontexten, so dass ein besserer Weg, dies zu formulieren ist zu sagen, dass "ein Block-Formatierung Kontext enthält immer schwebt".

  Beispiel:

  Dieser Absatz ist ein Schwimmer in einem DIV mit einem blauen Hintergrund, ist es mit Stil margin:20px

  Dieser Absatz ist ein Schwimmer in einem DIV mit einem blauen Hintergrund, ist es mit Stil margin:20px . Die übergeordneten DIV mit Stil overflow:hidden;zoom:1 .

  Der erste Absatz ist ein Schwimmer so dass es aus dem Fluss und seinen Behälter zusammenbricht, damit der Hintergrund dieser Container nicht zeigen, entfernt wird.

  Der zweite Absatz ist auch ein Schwimmer, aber es ist in einem DIV, dass ein neuer Block Formatierung Kontext schafft enthalten, damit die Container des Kindes "margin box" umschließt. Sie sollten auch beachten, dass, anders als bei den ersten Absatz, es gibt keine Notwendigkeit, die bisherigen deaktivieren. Dies wird oft als "self-clearing", die viel Sinn man bedenkt, dass Block-Formatierung Kontexten sind ein normaler Teil der Strömung macht bezeichnet.

  Hinweis: clear löscht nur Schwimmer aus dem gleichen Block Formatierung Kontext.

• Block-Formatierung Kontexten nicht überschneiden schwimmt

  Dieser ist mein Favorit . Nach Angaben der spec, muss der border-box von einem Block-Formatierung Zusammenhang nicht überlappen sich die margin-Box schwimmt im selben Block Formatierung Kontext als das Element selbst. Was dies bedeutet ist, dass Browser impliziten Margen auf Block-Formatierung Kontexte zu schaffen, um sie von überlappenden Rand-box von Schwimmern zu verhindern. Aus diesem Grund sollten negative Margen haben keine Auswirkung, wenn ein Block-Formatierung Zusammenhang neben Schwimmern angewandt (WebKit und IE6 habe ein Problem mit diesem aber - siehe Testfall ).

  Beispiel:

    . Seitenleiste {background: himmelblau; float: left; width: 180px;} 

    . Sidebar {background: yellow; float: right; width: 180px;} 

    # Main {background: pink; overflow: hidden; zoom: 1; border: 5px solide teal;} 

  Da dieses Verhalten auf die "border box" (nicht die "margin box"), um Platz zu schaffen (z. B. 20px gap) zwischen den rosa Feld und seine Geschwister gebunden ist, wäre Autoren müssen entweder:

  • Legen Sie ein 20px-Marge auf die Schwimmer
  • Set Randwerte auf dem rosa Feld größer als die Breite der Schwimmer (dh margin:0 220px )

  Ja, Sie 220px , nicht 20px . Weil es die border-Box, die zwischen den Schwimmern fit versucht, nicht die margin-Box. Und wenn ich sage, er versucht es liegt daran, dass Container würden sinken, wenn es nicht genug Platz für sie zwischen den beiden Schwimmern.

  In anderen Worten, wenn die rosa Schachtel mit 400 Pixel Breite gegeben wurde, sollte die Box fallen, wenn der übergeordnete Container schmaler als 770 Pixel (180px + 180px + 400px + 10px) ist. Als Randnotiz, in einigen Fällen scheint dieses Verhalten in Firefox gebrochen werden (zumindest in v.3.5.9) (dh, wenn die oben konstruieren das erste Kind ist body - siehe Testfall ).

  Hinweis: der Raum, in IE6 zwischen den rosa Feld und die beiden Schwimmer zeigt, ist aufgrund der drei Pixel Jog Bug .

hasLayout gegenüber block Formatierung Kontext

Wie Sie vielleicht bemerkt haben, werden alle vorherigen Beispielen gestylt mit overflow:hidden;zoom:1 . Die früheren Erklärung legt einen neuen Block Formatierung Kontext, in modernen Browsern während letztere löst hasLayout in Internet Explorer (IE 5.5/6/7). Dies liegt daran, diese Darstellungen sehr nahe (sind Ähnlichkeiten mit der CSS Spezifikation ). Wie Block Formatierung Kontexten erscheinen Elemente, die ein Layout gegeben sind kollabiert Margen zu verhindern, schwimmt enthalten, und sich nicht überschneiden schwimmt.

Eigenschaften / Erklärungen, die Elemente geben ein Layout

Die folgenden Listen zeigen, dass die Eigenschaften, die einen neuen Block-Formatierung Zusammenhang auch auslösen hasLayout, zumindest die, die vom Browser unterstützt werden, mit Ausnahme des etablieren overflow in IE <7.

In Internet Explorer 5 und 6

position:absolute

position:fixed

float (einen anderen Wert als " none ")

display:inline-block

width (einen anderen Wert als " auto ")

height (einen anderen Wert als " auto ")

zoom (einen anderen Wert als " normal ")

writing-mode:tb-rl

-ms-writing-mode:tb-rl

In Internet Explorer 7

min-width (beliebiger Wert)

min-height (beliebiger Wert)

max-width (einen anderen Wert als none )

max-height (einen anderen Wert als none )

Elemente mit Stil overflow (einen anderen Wert als visible )

overflow-x und overflow-y (einen anderen Wert als visible )

Dinge zu beachten,

• zoom -und writing-mode sind proprietäre Eigenschaften und nicht zu validieren.
• IE 5.0 nicht unterstützt zoom
• width und height auslösen hasLayout auf Inline-Elemente nur dann, wenn diese Eigenschaften, um diese Elemente gelten (dh, IE6 im Quirks-Modus).
• overflow-x und overflow-y sind Teil der CSS3-Box-Modell-Modul
• hasLayout wird auch ausgelöst, wenn das Layout-flow ist anders als die Eltern Layout flow (dh, rtl , um ltr )

In Quirks-Modus und IE7-Modus (alle Versionen)

• Als Überlauf auf etwas anderes als sichtbar eingestellt ist, wird table-cell-Elemente nicht hergestellt neuen Block Formatierung Kontexten.
• Als Überlauf wird sichtbar, table-cell-Elemente zu etablieren einen neuen Block Formatierung Kontext gesetzt.

HTML-Elemente, die immer ein Layout:

In Internet Explorer, haben diese Elemente - standardmäßig - ein Layout.

• <body> (sowie <html> in Strict-Modus)
• <table> , <tr> , <th> , <td>
• <img>
• <hr>
• <input> , <button> , <select> , <textarea> , <fieldset> , <legend>
• <iframe> , <embed> , <object> , <applet>
• <marquee>

Einpacken

Um das Risiko von Problemen zwischen modernen Browsern und Internet Explorer (<8), können Autoren entscheiden, ein Layout, um Boxen, die neuen Block-Formatierung Kontexte herzustellen zu geben. Auf diese Weise den Fluss identisch ist, entgeht der gleichen Weise schwimmt, clear macht den gleichen Wagen, und die Margen Zusammenbruch wo erwartet. Auch müssen die Autoren darauf achten, wenn Styling-Boxen mit hasLayout auslöst (dh width ) als solche Styling kann verlangen, dass dieses Element einen neuen Block Formatierung Kontext.

Weitere Lesungen

Auswirkungen

• Seitenumbrüche und Block-Formatierung Kontexten: Erlaubte Seitenumbrüche (13.3.3) .
• Clearfix und Block-Formatierung Kontexten: Alles, was Sie wissen über Clearfix ist falsch

Demos und Testfälle

• Block Formatierung Kontexten "hasLayout" - IE-Fenster vs CSS2.1 Browser: Simulationen.
• Neuer Block Formatierung Kontexten neben schwimmt

hasLayout Artikel

• Auf mit Layout
• "HasLayout" Übersicht
• hasLayout Property

Besonderer Dank geht an Philippe Wittenbergh und Bruno Fassino für die Suche nach spec Verweise, wenn man sie braucht und Ingo Chao, dass er uns das beste Hilfsmittel auf , die das Layout .

Finden Gespräche: bloglines | technorati

Share and erweitern: Lesezeichen mit del.icio.us | digg it! | reddit!