Das CSS Boxmodell – einfach dargestellt

Posted in Allgemeines on 09/10/2011 11:30 by postmaster

Das Boxenmodell für Cascading Style Sheets wird während der Entwicklung von Webseiten häufig gebraucht. Um HTML Elemente ist ein rechteckiger Bereich definiert. Dieser wird Box genannt und teilt sich in drei Bereiche.

Die Bereiche des Boxmodells

  1. Außenabstand (margin = türkiser Bereich außen)
  2. Rahmen (border = schwarzes Rechteck)
  3. Innenabstand (padding = regenbogenfarbener Bereich). 

Schema der CSS Box

Schema der CSS Box

 

Die Box wird mit CSS Befehlen eingestellt

  • width
    Es wird die Breite des Elements festgelegt
  • height
     Es wird die Höhe eingestellt
  • border
    Die Dicke des Rahmen wird hier angegeben
  • padding
    Der Abstand des Inhalts (gelber Rahmen) innerhalb des schwarzen Rahmens (rosa Bereich)
  • margin
    Der äußere Abstand (türkiser Bereich) außerhalb des schwarzen Rahmens
Alle Werte werden in Pixel angegeben. 

<div>…</div>

Dieser Effekt wird bei dem Block Element <div> genutzt. Der Befehl erzeugt um den im Tag eingeschlossenen Inhalt eine Box. Die Box kann durch die CSS Befehle angeprochen werden.

Beispiel:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>Blockelement div nutzen</title>

<style type=”text/css”>
#block-id {
border: thin dotted #000;
}
</style>

</head>
<body>
<h3>Den Blockelement &lt;div&gt; nutzen</h3>

<div id=”block-id”>
<p>Zeile 1: Dieser Textblock umfasst mehrere Zeilen.</p>
<p>Zeile 2: Dieser Textblock umfasst mehrere Zeilen.</p>
<p>Zeile 3: Dieser Textblock umfasst mehrere Zeilen.</p>
</div>

</body>
</html>

Ergebnis:

Blockelement div

Ergebnis des Blockelement div

 

 

<span>…  </span>

Ähnlich wird das Inline Element  <span> genutzt. 

 

Die Attribute können wie in HTML kombiniert werden. Boxen können beliebig verschachtelt werden. 

Zuletzt aktualisiert von .