Suche im Forum:
Suchen


Autor Nachricht
Beitrag05.08.2010 um 10:51 (UTC)    
Titel: Tutorial CSS: Das Boxmodell

Das Boxmodell in CSS



So berechnet man die Gesamtbreite:
Die Gesamtbreite einer Box in CSS ergibt sich aus der Zusammenrechnung der Breite des Inhalts (width),der Breite der Innenabstände (padding-left + padding-right), der Breite des Rahmens (border-left + border-right) und der Breite der Außenabstände (margin-left + margin-right)

Einfaches Rechenbeispiel:
margin: 10px; border: 5px; padding: 15px; width: 250px
250px (Breite) + 15px (Innenabstand links) + 15px (Innenabstand rechts) + 5px (Rahmen links) + 5px (Rahmen rechts) + 10px (Außenabstand links) + 10px (Außenabstand rechts)
= 310px (Gesamtbreite)

So berechnet man die Gesamthöhe:
Die Berechnung der Gesamthöhe ist analog der Zusammenrechnung der Gesamtbreite:
Die Gesamthöhe einer Box in CSS ergibt sich aus der Zusammenrechnung der Höhe des Inhalts (height), der Höhe der Innenabstände (padding-top + padding-bottom), der Höhe des Rahmens (border-top + border-bottom) und der Höhe der Außenabstände (margin-top + margin-bottom).

Auch hier ein Rechenbeispiel:
margin: 10px; border: 5px; padding: 15px; height: 150px
150px (Höhe) + 15px (Innenabstand oben) + 15px (Innenabstand unten) + 5px (Rahmen oben) + 5px (Rahmen unten) + 10px (Außenabstand oben) + 10px (Außenabstand unten)
= 210px (Gesamtbreite)

Problematik
Ältere Browser (Internet Explorer unter Version 5.5 und Netscape unter Version 4) berechnen die Gesamtbreite nicht wie oben genannt, sondern nehmen einfach die Breite des Inhalts als Gesamtbreite der Box. Heute muss man auf diese Fehler nicht mehr so genau achten, da die Browser verschwindend geringe Marktanteile haben.

Ich hoffe ich konnte euch das Boxmodell näher bringen.

mfg
______________
THE JOY OF NOT BEING SOLD ANYTHING
Beitrag08.08.2010 um 10:08 (UTC)    
Titel:

danke für die coolen tutorials Very Happy

mfg omba
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de