Aus dem Kurs: Grundkurs Webtechniken 2: CSS

Erhalten Sie Zugriff auf diesen Kurs – mit einer kostenlosen Probeversion

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

Umstellung auf das intuitive Border-Box-Modell

Umstellung auf das intuitive Border-Box-Modell

Aus dem Kurs: Grundkurs Webtechniken 2: CSS

Gratismonat starten Für Ihr Team erwerben

Umstellung auf das intuitive Border-Box-Modell

“

Das Box-Modell ist zum Gestalten von Webseiten sehr, sehr wichtig. Und ich möchte Ihnen jetzt hier eine kleine Besonderheit zeigen. Und dazu habe ich hier auf der Startseite der Übungswebsite das Element ＜div class="inside"＞ markiert. Dieses Element hat hier eine maximale Breite von 600 Pixeln. Wenn man jetzt aber einmal genau hinschaut, dann sieht man, dass zu diesen 600 Pixeln links und rechts noch ein Padding dazu kommt. Hier sind 16 Pixel und da sind 16 Pixel, weil hier ein Padding links und rechts von 1 rem definiert wurde. Das heißt, die Box hat eine Breite von 600 Pixeln, aber einen Platzbedarf von 632 Pixeln. Das ist völlig anders als bei Boxen im richtigen Leben. Das nennt sich das "box-sizing: content-box"-Modell und das ist die Standardeinstellung in CSS. Beim Layouten wäre es aber sehr viel schöner, wenn die Breite einer Box gleich dem Platzbedarf wäre. Also wie im richtigen Leben bei Boxen, wenn ich sage, die ist 2 Meter breit, dann ist die 2 Meter breit und da ist…

Inhalt