Little Boxes – CSS-Positionierung und mehrspaltige Layouts

Border-Box-Modell

Testen Sie unsere 1896 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Moderne Browser unterstützen die Verwendung des aktuellen Border-Box-Modells. Dieses ermöglicht die optimale Darstellung von flexiblen Layouts bei der Verwendung unterschiedlicher Einheiten.

Transkript

Bei flexiblen Layouts gibt es also mit dem klassischen Box-Modell das Problem, dass gemischte Einheiten nicht wirklich berechnet werden können, so wie hier zum Beispiel bei Navibereich gibt es jetzt eine CSS-Regel mit width 20% und Padding 20 Pixel und das kann man nicht wirklich zuverlässig berechnen. Dazu ist das klassische Box-Modell hier nicht ausgelegt, denn da kann man nicht Einheiten mischen und sagen, so breit wird das insgesamt. Kurz zu Erinnerung, hier das klassische Box-Modell width ist hier definiert als 20% und im klassischen Box-Modell kommen hier padding-left und right und border-left und right und margin-left und right noch dazu. Das heißt, wenn ich width von 20% habe und ein padding-left von 20px, dann kann ich die Gesamtbreite nicht so ohne weiteres zuverlässig berechnen. Dazu gibt es ein neues Border-Box-Modell, das heißt neu, gut, so neu ist es gar nicht, inzwischen unterstützen, das alle modernen Browser und der Interner-Explorer ab Version 8 und achten Sie auf die beiden gestrichelten Pfeile hier. In Border-Box-Modell gilt width inclusive padding-left und padding-right und Border-left und border-right, hinzu kommt eigentlich nur noch margin-left und margin-right und bei der Höhe gilt es analog dazu, die Eingabe von height ist inclusive Border und padding, es kommt nur noch margin-top und margin-botton dazu. Wenn Sie sich ein Kästchen im richtigen Leben vorstellen, dann werden die genauso berechnet. also, es gibt den Inhalt, dann gibt es hier ein bisschen Luft, ein bisschen padding hier so Wattepolster dazwischen, und da gibt's den Rand der Kiste, die Rahmelinie, Border und die zählt mit zur Breite hinzu. Wenn man sagt, diese Kiste ist 2 Meter breit, dann rechnet man das im richtigen Leben von hier bis hier und das ist jetz im Border-Box-Modell genau so. Dann ist das Ganze überhaupt kein Problem min-width 20% ist hier, dann werden die 20px padding-left einfach davon abgezogen. Das heißt, das ist das Problem des Browsers, das dann richtig hinzukriegen, aber das können die alle. Zumindest seit IE8 und Firefox kann es seit Version 31 auch. Ohne Vorsilbe, Mods, Bindestrich. So, wie baut man das jetzt ein? Dazu wechsle ich rüber in den Editor und öffne das entsprechende Stylesheet. So, hier ist navi-float-vertikal im Editor Float-left:20%, padding-left 20px, wie gesagt mit dem klassischen Box-Modell kommen wir da nicht weiter. Also schreibe ich hier jetzt das neue gleich hin, erstmal die klassische Variante, das ist so, als ob hier stehe würde: content-box. Also, content-box ist ein anderes Wort für klassisches Box-Modell und zwar deswegen - ich gehe noch einmal zurück hier - weil hier ganz einfach der Inhaltsbereich, der Content gilt für die Angabe von width. In dem Border-Box-Modell, das hat sein Namen daher, weil width bis inclusive Border gezählt wird. Das ist hier in Box-sizing content-box steht da, in Gedanken für alle Browser standardmässig und ich gebe jetzt hier ein Box-sizing Border-Box und das veranlasst die Browser, die Kästchen an das zu berechnen. Gespeichert ist, rüber in den Browser, neu laden und Sie sehen jetzt hier, das passt haargenau, ich gebe jetzt nochmal hier zu Deutlichkeit wieder eine Hintergrundfarbe ein background-color: lightyellow genau wie eben. So, und für den main-Bereich auch noch mal, so sieht man schon die passen jetzt aneinander aber main bekommt hier genau wie eben noch mal wieder background-color: lightpink Wenn ich jetzt da rüberfahre dann sehen Sie, die gehen nahtlos aneinander dran. Dann sehen Sie nav oben passt genau dran und die 20px padding-left werden von der width 20% abgezogen. Fazit, wenn man Layout möchte mit flexiblen Breiten, dann ist das Border-Box-Modell bei dem die width von Border-left bis Border-right gerechnet wird, eine solide Voraussetzung. Zum Abschluss noch ein Blick auf Can I use und Sie sehen hier zum CSS3 Box-sizing wie das hier heißt, das ist die Border-Box. Das verstehen alle einigermaßen modernen Browser, alles im grünen Bereich, hier ganz buchstäblich. Ich habe ein Artikel dazu geschrieben, mit der Kurzadresse bit.ly/border-box das führt dann zu dr.web und dort gibt es ein Artikel, bei dem das noch etwas ausführlicher erläutet wird und auch die Kommentare darunter sind nicht uninteressant. Soviel zur Border-Box und zum Layouten mit flexiblen Breiten.

Little Boxes – CSS-Positionierung und mehrspaltige Layouts

Sie erfahren, wie HTML-Elemente mit den Eigenschaften "position" und "float" auf Webseiten verschoben werden können und lernen das kontrollierte Zusammenspiel von Float und Clear kennen.

3 Std. 55 min (49 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!