gbssg.ch

Boxmodell


"Klassisches" Boxmodell

  • Mit CSS können Elementen (feste) Breiten, Höhen und Abstände gegeben und diese nebeneinander positioniert werden.
  • Die rechteckigen Blöcke, die im Elementbaum erzeugt und auf dem Bildschirm dargestellt werden, folgen einem Schema, dem „Box-Modell“. Es ist somit Grundlage jeden Layouts.
  • Jedes Block-Element wie Textabsätze (p), -Abschnitte (div, article, main, aside, …) und Überschriften (h1, h2, …) bildet eine rechteckige Box, die frei formatiert werden kann.

Theorie Boxmodell (Teil 1)

Theorie Boxmodell (Teil 2)

Alternatives Boxmodell

  • Mit CSS3 wurde das starre Konzept des Boxmodells angepasst. Mithilfe der Eigenschaft box-sizing lässt sich spezifizieren, worauf sich die Angaben von width bzw. height beziehen sollen.
  • Durch box-sizing: border-box werden Innenabstand und Randlinie nun ohne weitere Berechnung von uns durch den Browser bei der Breitenberechnung berücksichtigt.

Boxen nebeneinander

Die Eigenschaft float legt fest, in welche Richtung ein Element verschoben wird. Erlaubt sind dabei folgende Werte:

  • none: Standardwert; das Element wird nicht verschoben.
  • left: Das Element wird nach links verschoben.
  • right: Das Element wird nach rechts verschoben.
  • inherit: Der Wert der float-Eigenschaft des Elternelements wird geerbt.