Boxmodel CSS

Was ist ein Boxmodell in CSS

• Es ist ein Modell für die Beschneidung von Bildern in CC

• Es beschreibt wie Block-Elemente in CSS vom Browser dargestellt werden.

• Es ermöglicht die Integration von 3D-Modellen in eine Webseite

Die Bereiche des Box Modells lauten

• Content (1), Border (2), Margin (3), Padding(4)

• Padding (1), Margin (2), Border (3), Content (4)

• Margin (1), Border(2), Padding(3), Content (4)

• Content (1), Margin (2), Padding(3), Border(3)

Welche Aussagen sind richtig?

• Jedes Element hat eine Größe width/height (Content Box),

• Jedes Element ist von drei Boxen (Padding-Box, Border-Box, Margin-Box) umgeben

• Der vollständige Platzbedarf eines Elements bestimmt sich aus der Differenz aller Boxen.

Ein Element mit einer Breite width von 100 Pixeln erhält ein padding von 15 Pixeln und ein margin von 30 Pixeln. Wie groß ist der Platzbedarf in der Breite?

• Das Element nimmt insgesamt 190 Pixel in der Breite ein!

• Das Element nimmt insgesamt 145 Pixel in der Breite ein!

• Das Element nimmt insgesamt 55 Pixel in der Breite ein!

Welche Aussagen stimmen?

• Content - Der Inhalt der Box, in dem Bilder und Text erscheinen

• Padding - Der transparente Abstand direkt um den Content

• Border - ein Rahmen um den Content, aber nicht um das Padding

• Margin - der transparente Abstand außerhalb der Border

Wie lautet der CSS-Code für diese Box

• div {background-color: lightgrey; width: 200px; border: 25px solid green; padding: 25px; margin: 25px;}

• div {background-color: lightgrey; width: 200px; border: 1px solid green; padding: 25px; margin: 25px;}

• div {background-color: lightgrey; width: 200px; border: 25px solid green; padding: 1px; margin: 25px;}

Wie lautet der CSS-Code für diese Box

• ...padding-top: 1px; padding-right:1px; padding-bottom: 20px; padding-left: 20px;}

• ...padding-top: 20px; padding-right:20px; padding-bottom: 20px; padding-left: 1px;}