Einführung - Breiten- und Höheneigenschaften

Sie haben vielleicht noch nicht darüber nachgedacht, aber alle Elemente auf einer Webseite haben Dimensionen. Sicher, Sie müssen sie nicht angeben, dank des standardmäßig verwendeten fließenden Layout-Modells - Elemente beanspruchen den benötigten Platz, und wenn nicht genügend Platz für sie vorhanden ist, werden sie automatisch in eine Richtung mit mehr verfügbarem Platz verschoben. Dies alles geschieht aufgrund der Tatsache, dass die Eigenschaften width und height eines Elements standardmäßig auf "auto" festgelegt sind. Dies bedeutet, dass das Element automatisch erweitert oder subtrahiert wird, abhängig vom Inhalt darin.

Sie sollten sich des Unterschieds zwischen Inline- und Blockelementen bewusst sein, wenn es um Bemaßungen geht, da diese sich unterschiedlich verhalten: Standardmäßig belegt ein Inlineelement nur den vertikalen und horizontalen Raum, der für die Anpassung an den Inhalt erforderlich ist. Ein Blockelement verwendet dagegen den gesamten verfügbaren horizontalen Raum, aber nur den vertikalen Raum, der für den Inhalt erforderlich ist. Daher können für nur Blockebenenelemente benutzerdefinierte Breiten und Höhen angegeben werden, wie in diesem Beispiel dargestellt:

<style type="text/css">
.box-look {
	background-color: Silver;
	margin: 20px;
	padding: 10px;
}

#box1 {
	width: auto;
	height: auto;
}

#box2 {
	width: 100px;
	height: 100px;
}
</style>

<div id="box1" class="box-look">
	Box 1<br>
	Some content....
</div>

<div id="box2" class="box-look">
	Box 2<br>
	Long text is automatically wrapped...
</div>

<span class="box-look">
	Inline content. Only uses the space it needs...
</span>

Wenn Sie dieses Beispiel ausprobieren, können Sie sehen, wie das erste Feld den gesamten verfügbaren horizontalen Raum nutzt, während das zweite Feld nur die 100 Pixel verwendet, die wir ihm in beide Richtungen zuweisen. Div-Elemente sind standardmäßig Elemente auf Blockebene. Bitte beachten Sie, dass ich nur die Breite und Höhe für box1 als auto angegeben habe, um den Unterschied zu veranschaulichen - dies sind bereits die Standardwerte, daher können sie weggelassen werden.

Das letzte Element ist ein span-Tag, bei dem es sich standardmäßig um ein Inline-Element handelt. Wie Sie sehen, wird nur der tatsächlich benötigte Speicherplatz verwendet. Sie könnten versuchen, ihm eine Breite und eine Höhe zuzuweisen, aber der Browser würde dies ignorieren - nur Blockebenenelemente können benutzerdefinierte Breiten / Höhen haben.

Relative und absolute Breite / Höhe

Wir haben bereits gesehen, wie wir Breiten und Höhen als absoluten Wert in Pixel definieren können, aber das ist nur eine von vielen Optionen. Die Eigenschaften width und height können entweder einen Wert für [length] oder einen Wert für [percent] annehmen. Dies bedeutet, dass Sie sowohl absolute Werte (wie bei Pixeln) als auch relative Werte verwenden können, entweder als Prozentsatz des verfügbaren Speicherplatzes oder relative Werte, z.B.: auf eine Schriftgröße (wie die em-Einheit - dazu später mehr).

Im nächsten Beispiel werde ich Ihnen zeigen, wie wir Prozentwerte verwenden können, um einen relativen Anteil des verfügbaren Speicherplatzes einzunehmen:

<style type="text/css">
#parent-box {
	width: 300px;
	height: 300px;
}

#box1 {
	width: 25%;
	height: 75%;
}

#box2 {
	width: 75%;
	height: 25%;
}
</style>

<div id="parent-box" style="background-color: CornflowerBlue;">

	<div id="box1" style="background-color: GreenYellow;">
		Box 1<br>
		Some content....
	</div>

	<div id="box2" style="background-color: Salmon;">
		Box 2<br>
		Long text is automatically wrapped, if needed...
	</div>

</div>

In diesem Beispiel haben wir eine Box mit einer absoluten Größe, die als übergeordnete Box fungiert. In dieser Box befinden sich zwei kleinere Boxen, die einen relativen Anteil des verfügbaren übergeordneten Platzes verwenden, um Ihnen zu zeigen, wie einfach das ist.

Zusammenfassung

In diesem Kapitel haben wir darüber gesprochen, wie Blockelemente auf einer Webseite ihre Größe automatisch anpassen und wie sie mithilfe der Eigenschaften width und height auf eine bestimmte Größe festgelegt werden können. Aber was passiert, wenn wir eine Breite und eine Höhe angeben, die nicht genug Platz für den Inhalt bieten? Wir werden das im nächsten Kapitel untersuchen.