Anzeige
Tutorialbeschreibung

HTML & CSS für Einsteiger (Teil 36): Das Boxmodell

HTML & CSS für Einsteiger (Teil 36): Das Boxmodell

In CSS werden Elemente grundsätzlich als rechteckige Kästen oder als Streifen behandelt. Für die Beschreibung der Kästen werden dabei die folgenden – euch mittlerweile sicherlich bekannten – Eigenschaften verwendet:

width – die Breite des Elements
height – die Höhe des Elements
left – Abstand nach links
right – Abstand nach rechts
top – Abstand nach oben
bottom – Abstand nach unten
margin – der äußere Rand
border – der Rahmen um das Element
padding – der Innenabstand, also der Abstand vom Rahmen zum Elementinhalt

Diese Eigenschaften wurden bereits vorgestellt.

Die Gesamtbreite eines Elements addiert sich aus der Breite der einzelnen Angaben. (Gleiches gilt dann übrigens auch für die Höhe).

Ein Beispiel:
div#box {
   width: 100px;
   padding: 20px;     /* je 20px links und rechts */
   border: 2px solid; /* je 2px links und rechts  */
   margin: 0 30px;    /* je 30px links und rechts */
 }

Welche Breite besitzt dieser div-Bereich? Lasst uns einen Blick auf die einzelnen Werte werfen:

• 100 Pixel
• 2 Mal 20 Pixel
• 2 Mal 2 Pixel
• 2 Mal 30 Pixel

Das ergibt eine Gesamtbreite des Elements von 204 Pixel.

Die Breite und Höhe von Elementen werden über width und height bestimmt. Stehen diese Angaben nicht explizit im Stylesheet, gilt Folgendes:

• Fehlt width, wird die Box so breit wie das umgebende Element dargestellt.
• Fehlt height, wird das Element so hoch wie sein Inhalt angezeigt.

Ein Beispiel:
<!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>PSD-Tutorials.de</title>
 <style>
 div#box {
    border: 1px solid; /* je 2px links und rechts  */
    margin: 0 30px;    /* je 30px links und rechts */
    background-color:#6600CC;
 }
 </style>
 </head>
 <body>
 <div id="box">PSD-Tutorials.de</div>
 </body>
 </html>

Im Browser sieht das folgendermaßen aus:

Bilder



Das übergeordnete Element des div-Elements ist body. Folglich wird das Element tatsächlich so breit wie das body-Element angezeigt. Bei der Höhe orientiert es sich hingegen am Inhalt.


Alles auf Null

Jeder Browser besitzt ein eingebautes Stylesheet. In diesen Stylesheets sind einige Standardwerte definiert. Das gilt beispielsweise auch für padding und margin. Und diese Standardwerte variieren leider in den verschiedenen Browsern. Dieser Aspekt macht es schwierig, in den jeweiligen Browsern identische Ergebnisse u.a. im Zusammenhang mit dem Boxmodell zu erzielen. Daher empfiehlt es sich, die Abstände, die in den Browsern vorgegeben sind, auf Null zu setzen. Das kann man folgendermaßen machen:
* { padding: 0; margin: 0; }

Fügt diese Zeile an den Anfang eures Stylesheets ein. Auf diese Weise könnt ihr nun beginnen, die Boxen an den gewünschten Stellen zu platzieren.


Boxtypen

Wie ein Element letztendlich dargestellt wird und wie es andere Elemente beeinflusst, ist von der Art des Elements abhängig. Tatsächlich unterscheidet die CSS-Spezifikation zwischen Blockelementen und Inline-Elementen. (Es gibt noch andere Typen, die an dieser Stelle aber außen vor gelassen werden, da sie nur eine untergeordnete Rolle spielen).

Blockelemente erzeugen immer eine neue Zeile. Darauffolgende Elemente beginnen ebenfalls in einer neuen Zeile. Typische Blockelemente sind beispielsweise p, div, h1, ul usw. Für diese Elemente gelten die zuvor aufgeführten Eigenschaften Außenabstand, Innenabstand, Höhe, Breite und Rahmen.
<h1>Digital Painting & Matte Painting: Bildaufbau definieren</h1>
<p>Modul 2 - Teil 2: Ein Bild ist immer ein Ganzes. Jedoch muss man sich immer überlegen, wo der Betrachter als Erstes hinsehen sollte.</p>

 
Ein Blick auf das Ergebnis im Browser zeigt, dass h1 und p jeweils eine eigene Zeile erzeugen.

Bilder



Inline-Elemente erzeugen hingegen keinen eigenen Absatz, sie werden vielmehr im normalen Textfluss angezeigt. Typische Inline-Elemente sind span, em, strong, img, br usw. Für Inline-Elemente gelten keine vertikalen Außenabstände und keine Breiten- und Höhenangaben.
<h1><em>Digital Painting & Matte Painting</em>: Bildaufbau definieren</h1>

<p>Modul 2 - Teil 2: <strong>Ein Bild ist immer ein Ganzes</strong>. Jedoch muss man sich immer überlegen, wo der Betrachter als Erstes hinsehen sollte.</p>

 
Und auch hier ein Blick auf das Ergebnis:

Bilder



Ihr könnt nun aus Elementen, die eigentlich Blockelemente sind, Inline-Elemente machen.
<!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>PSD-Tutorials.de</title>
 <style>
 h1 {
 background-color:#00CCFF;
 }
 </style>
 </head>
 <body>
 <h1>Digital Painting & Matte Painting</h1>
 <p>Modul 2 - Teil 2: <em>Ein Bild ist immer ein Ganzes</em>. Jedoch muss man sich immer überlegen, wo der Betrachter als Erstes hinsehen sollte.</p>
 </body>
 </html>

 
Seht euch das Ergebnis im Browser an.

Bilder



Die Hintergrundfarbe der h1-Überschrift signalisiert, dass das Element über die gesamte Breite geht. Die Breite orientiert sich dabei am übergeordneten body-Element.

 
Jetzt kommt die Eigenschaft display ins Spiel.
<!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>PSD-Tutorials.de</title>
 <style>
 h1 {
 display:inline;
 background-color:#00CCFF;
 }
 </style>
 </head>
 <body>
 <h1>Digital Painting & Matte Painting</h1>
 <p>Modul 2 - Teil 2: <em>Ein Bild ist immer ein Ganzes</em>. Jedoch muss man sich immer überlegen, wo der Betrachter als Erstes hinsehen sollte.</p>
 </body>
 </html>

Durch display: inline verändert sich die Breite des Elements.

Bilder



 
Tatsächlich passt sich die Elementbreite jetzt dem vorhandenen Inhalt an. Hier eine Übersicht darüber, welche Werte display noch zugewiesen werden können:

none – keine Anzeige
block – das Element wird als Block-Element dargestellt, erzeugt also eine neue Zeile.
inline – das Element wird als Inline-Element dargestellt, erscheint also im laufenden Textfluss.
inline-block – erzeugt äußerlich einen Block, für den Höhe, Breite und Außenabstand angegeben werden können. Jedes Element bleibt aber im laufenden Textfluss. Es handelt sich demnach um eine Kombination aus einem Block- und einem Inline-Element.
list-item – das Element wird als Block-Element angezeigt. Ihm wird aber zusätzlich ein Aufzählungszeichen vorangestellt.
run-in – erzeugt abhängig vom Inhalt ein Block- oder ein Inline-Element.
table – wirkt wie das aus HTML bekannte table-Element.
inline-table – wirkt wie das HTML-Element table, aber inline.
table-row – das Element enthält nebeneinander angeordnete Kindelemente. Wirkt wie das HTML-Element tr.
table-cell – das Element steht für eine Tabellenzelle und wirkt wie die beiden HTML-Elemente th und td.
table-row-group – das Element enthält eine Elementgruppe mit mehreren nebeneinander angeordneten Kindelementen und wirkt wie das tbody-HTML-Element.
table-header-group – das Element enthält eine Elementgruppe mit mehreren nebeneinander angeordneten Kindelementen und wirkt wie das thead-HTML-Element.
table-footer-group – das Element enthält eine Elementgruppe mit mehreren nebeneinander angeordneten Kindelementen und wirkt wie das tfoot-HTML-Element.
table-column – hierüber werden die Eigenschaften der Zellen einer Spalte beschrieben. table-column wirkt wie das col-Element aus HTML.
table-column-group – dieses Element enthält eine Gruppe von Elementen, über die die Eigenschaften von Zellen einer Spalte beschrieben werden. Es wirkt wie das HTML-colgroup-Element.
table-caption – hierüber wird die Tabellenüberschrift definiert. Die Eigenschaft wirkt wie das HTML-Element caption.

Tatsächlich bietet CSS also für die verschiedensten Elementtypen unterschiedliche Darstellungsoptionen. Diese spielen im Zusammenhang mit der Positionierung von Elementen eine entscheidende Rolle. Mehr dazu in den nächsten Tutorials.

Weitere Teile


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 12.10.2016 - 17:25

Vielen Dank für das interessante Tutorial

Portrait von Hexe6
  • 12.10.2016 - 17:09

Vielen Dank für das Video.

Portrait von Kiasa
  • 23.04.2015 - 17:12

Vielen Dank für das interessante Tutorial!

Portrait von ZainaPhoto
  • 13.04.2015 - 19:58

Danke für das gute Videotraining!

LG Zaina

Portrait von Kundentest
  • 24.03.2015 - 20:20

Herzlichen Dank für das Tutorial.

Portrait von winzling
  • 24.03.2015 - 17:56

Vielen Dank für das interessante Tutorial!

Portrait von MARIA52
  • 24.03.2015 - 17:47

Vielen Dank für den weiteren Teil.

Portrait von winzling
  • 24.03.2015 - 17:05

Vielen Dank für das interessante Tutorial!

Portrait von Mäuschen
  • 24.03.2015 - 16:52

Bringt mich jedes Mal ein Stück weiter. Dankeschön

Portrait von Datapixel
  • 24.03.2015 - 16:44

Dankeschön, das ist sehr gut erklärt.

Portrait von Domingo
  • 24.03.2015 - 16:35

Danke für das Tutorial.

Portrait von renate_C
  • 24.03.2015 - 16:22

Ich bedanke mich für das interessante Tutorial der Reihe.

Portrait von BOPsWelt
  • 24.03.2015 - 16:08

Vielen Dank für das Tutorial. :-)

Portrait von teste123
  • 24.03.2015 - 15:56

vielen Dank
MfG

Portrait von samtron
  • 24.03.2015 - 15:56

vielen Dank
MfG

Portrait von dlieb
  • 24.03.2015 - 15:53

Vielen Dank für den 36. Teil

Portrait von fe_web
  • 24.03.2015 - 15:13

Super - Danke für dieses weiteren und sehr informativen Teil

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 24.03.2015 - 14:45

Danke ,-)
wie immer sehr gut und verständlich

Portrait von Caesarion2004
  • 24.03.2015 - 14:11

Vielen Dank für das informative Tutorial.

Portrait von suzana
  • 24.03.2015 - 13:39

Danke für das informative Tut!

x
×
×