Wie im vorherigen Kapitel erwähnt; Ein Element auf Blockebene nimmt immer die gesamte verfügbare Breite ein (streckt sich so weit es geht nach links und rechts aus).
Durch Festlegen der Breite eines Elements auf Blockebene wird dessen Dehnung verhindert bis zu den Rändern des Behälters herausragen. Dann können Sie die festlegen margins auf auto, um das Element innerhalb seines Containers horizontal zu zentrieren. Der Das Element nimmt die angegebene Breite ein und der verbleibende Platz wird aufgeteilt gleichmäßig zwischen den beiden Rändern:
Hinweis: Das Problem mit dem oben genannten <div> tritt auf, wenn das Browserfenster geschlossen ist kleiner als die Breite von das Element. Der Browser fügt der Seite dann eine horizontale Bildlaufleiste hinzu.
Wenn Sie in dieser Situation stattdessen max-width verwenden, wird dies verbessert Umgang des Browsers mit kleinen Fenstern. Dies ist wichtig, wenn eine Website nutzbar gemacht werden soll auf kleinen Geräten:
Tipp: Ändern Sie die Größe des Browserfensters auf weniger als 500 Pixel Breite, um den Unterschied zu sehen die beiden Divs!
Hier ist ein Beispiel für die beiden oben genannten Divs:
div.ex1 {
width: 500px;
margin:
auto;
border: 3px solid #73AD21;
}
div.ex2 {
max-width: 500px;
margin: auto;
border: 3px solid #73AD21;
}Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
width: 500px;
margin: auto;
border: 3px solid #73AD21;
}
div.ex2 {
max-width: 500px;
margin: auto;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h2>CSS Max-width</h2>
<div class="ex1">This div element has width: 500px;</div>
<br>
<div class="ex2">This div element has max-width: 500px;</div>
<p><strong>Tip:</strong> Drag the browser window to smaller than 500px wide, to see the difference between
the two divs!</p>
</body>
</html>