Depot43-Unterlagen - Box-Sizing

HTML Elemente

            
            



<!doctype html>
<html lang="de">
<head>
	<meta charset=utf-8>
	<title>HTML5 / CSS - Box-Sizing</title>
	<style>
		body {
			display:flex;
			margin:0;
		}
		p {
			background: #ccc;
			border: 1px solid #fff;
		}
		p.box1 {
			box-sizing: content-box;
			border: 5px solid red;
			max-width:300px;
			height:80px;
			margin:10px;
			padding:10px;
		}
		p.box2 {
			box-sizing: border-box;
			border: 5px solid blue;
			max-width:300px;
			height:80px;
			margin:10px;
			padding:10px;
		}
	</style>
</head>
<body>
	<p class="box1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi repudiandae est dignissimos vitae laborum.</p>
	<p class="box2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi repudiandae est dignissimos vitae laborum.</p>
</body>
</html>


 

            

Aufgabe 11> weiter

Im Editor sind zwei Absätze vorbereitet. Beide sind im body nebeneinander platziert und haben einen Grauen Hintergrund. Sie besitzen keine individuellen Grössenangaben, daher teilen sie ihren Platz gleichmässig (Flex-Box-verhalten).
Box-Sizing: Beide Boxen zeigen ihr Rechen-Verhalten in Bezug auf den Inhalt (Content-Box) oder Border (Border-Box).

p.box1 > box-sizing: content-box;
p.box2 > box-sizing: border-box;

Verändere die Werte und setze zusätzliche Eigenschaften, um das Verhalten zu prüfen!

Verändere die Werte von "box-sizing" für "p.box1" und "p.box2", beachte wie sich die beiden Boxen verhalten. Beispiel:

        p.box1 {
            box-sizing: border-box;
            border: 5px solid red;
            max-width:300px;
            height:80px;
            margin:10px;
            padding:10px;
        }
        p.box2 {
            box-sizing: content-box;
            border: 5px solid blue;
            max-width:300px;
            height:80px;
            margin:10px;
            padding:10px;
        }

Du kannst verschiedene Werte für "width", "border-width" oder "padding" eingeben. Beachte das Verhalten.
Wann werden die Werte von Border und Padding kummuliert, wann nicht?

Experimentiere mit den verschiedenen Eigenschaften und Werten des Box-Model's. Beispiel:

            box-sizing: ... ;
            border: ... ;
            width: ... ;
            height: ... ;
            margin: ... ;
            padding: ... ;

Prüfe das Verhalten im HTML-Bereich.

Häufig wird diese CSS-Eigenschaft generell für alle HTML-Elemente gesetzt, zusätzlich werden alle Standardmässig gesetzten Abstände zurückgesetzt.

        * {
            box-sizing: border-box;
            margin:0;
            padding:0;
        }