Aus dem Kurs: Webtechniken lernen 2: CSS-Grundlagen

So erhalten Sie Zugriff auf diesen Kurs

Werden Sie noch heute Mitglied und erhalten Sie Zugriff auf mehr als 23.200 Kurse von Branchenfachleuten.

Das intuitivere Box-Modell: box-sizing: border-box

Das intuitivere Box-Modell: box-sizing: border-box – Tutorial zu CSS

Aus dem Kurs: Webtechniken lernen 2: CSS-Grundlagen

Gratismonat starten Für Ihr Team erwerben

Das intuitivere Box-Modell: box-sizing: border-box

“

Sie sehen hier die Startseite der Übungswebsite mit dem aktuellen Stand für diesen Film, und zwar abwechslungshalber mal im Firefox. Und Sie sehen gleich, warum denn im Entwicklertool des Firefox gibt es etwas, was es momentan zumindest in Chrome noch nicht gibt. Und das ist der 3-Ansichten-Inspektor, den man mit diesem kleinen Button hier aktivieren kann. Diese Ansicht ist hervorragend geeignet zum Erklären von Boxmodell-Dingen, und genau das möchte ich jetzt tun. Sie sehen, body ist markiert, hat eine maximale Breite von 600px und die hat es hier auch. Boxsizing steht hier unten, content-box und display ist gleich block. Das sind so die Eigenschaften, die im Augenblick relevant sind für dieses Layout. Wenn ich body jetzt links und rechts ein bisschen padding gebe, oben, unten nichts, und links und rechts 1rem hinzu, dann wird body oben etwas breiter. Wenn ich das ausstelle, sehen Sie, jetzt ist body 600px, hier wird deutlich zu sehen, und jetzt ist body 600px + 16 + 16, also 632px…

Inhalt