CSS Box Modell Hierarchie

12. Oktober 2013 | Von | Kategorie: Abschlußprüfung Winter 2013, CSS, Internet, Non Print

CSS Box Modell Hierarchie

Das CSS-Box Modell besteht aus mehreren Eben. Zum besseren Verständnis ist es 3-Dimensional hier aufgebaut.

CSS Box Modell als 3D-Modell

 

Schauen wir uns den Aufbau nun Schritt für Schritt an.

Der HTML-Code – dort steht außer dem Inhalt, also dem Text, nicht viel:

<p>

Hier kommt der Inhalt des …

</p>

Im Browser angezeigt bekommen wir in unserem 3-Dimensionalen Modell nun:

Inhalt im CSS Box Modell

 

Innenabstand im CSS Box Modell

Im nächsten Schritt fügen wir unserem Element einen Innenabstand hinzu. Dies geschieht über über die CSS-Anweisung: padding:30px;

p {

padding: 30px;

}

In unserem Modell ist dieser Innenabstand anhand der gelben Farbe angedeutet. In Realität ist dieser Bereich 100% durchsichtig.

Innenabstand (padding) im CSS Box Modell

 

Rahmen im CSS Box Modell

Jetzt können wir einen Rahmen dem Element mitgeben. Der Rahmen in der Kurzschreibweise:

p {

border: 1px solid blue;

}

Rahmen (border) im CSS Box Modell

 

 

Hintergrundfarbe im CSS Box Modell

Das Element hat auch eine Hintergrundfarbe – im Beispiel grau. Diese wird durch die CSS-Anweisung background-color: gesetzt

p {

background-color: silver;

}

Hintergrundfarbe (background-color) im CSS Box Modell

 

 

Außenabstand im CSS Box Modell

Und unser Element hat einen Außenabstand. Dieser ist im Modell mit der hellblauen Farbe angedeutet. Diese ist in Realität auch durchsichtig. Der Außenabstand wird über die CSS-Anweisung margin: gesetzt.

p {

margin: 30px;

}

Außenabstand (margin) im CSS Box Modell

 

 

Hintergrundbild im CSS Box Modell

Und das Element kann ein Hintergrundbild haben. Diese verdeckt dann komplett die Hintergrundfarbe. Das Hintergrundbild wird mit der CSS-Anweisung background-image: gesetzt

p {

background-image: url(blaetter.jpg);

}

Hintergrundbild (background-image) im CSS Box Modell

 

 

Alle Bereich einstellbar im CSS Box Modell

Zum erwähnen ist noch, das sowohl für die Rahmen, wie für den Innenabstand wie für den Außenabstand für jede Seite ein andere Wert gesetzt werden kann. So sind z.B. Rahmen möglich, die auf jeder Seite eine andere Farbe haben und Elemente, die auf jeder Seite einen anderen Abstand zum nächsten Element halten.

Insgesamt sieht der CSS-Code für unser Beispiel wie folgt aus (die Reihenfolge der CSS-Anweisungen ist egal):

p {

padding: 30px;

border: 1px solid blue;

background-color: silver;

margin: 30px;

background-image: url(blaetter.jpg);

}

Und unser fertiges Modell in Groß, an dem die Hierarchie zu sehen ist.

CSS Box Modell als 3D-Modell

 

 

via CSS Box Modell Hierarchie.

2 Kommentare zu “CSS Box Modell Hierarchie”

  1. getreu dem Lied „alles nur geklaut“ von den Prinzen wurde hier der Artikel samt Bilder, der von http://www.webmaster-crashkurs.de/css-box-modell-hierarchie.htm kopiert wurde, geklaut. Wenn ich dann über diesem Artikel lese Abschlussprüfung Winter, dann ist das schon ziemlich merkwürdig!

    • MedienHeinz sagt:

      Na ja ich würde mal sagen, es ist geliehen.
      Aber die Quelle ist doch deutlich angegeben.
      Ich möchte mit dieser Seite niemandem etwas Böses…
      Im Gegenteil, ich sammele für Berufsschüler infomaterial zu relevanten Themen. Und im Jahr 2013 war eben das Thema css-Boxes prüfungsthema…
      Wenn es sie stört, dass ich ihren artikel hier mit Quellenangabe den Schülern zur Verfügung stelle, werde ich ihn natürlich löschen.