CSS -Layout - Breite und maximale Breite
Breite, maximale Breite und Rand verwenden: auto;
Wie im vorigen Kapitel erwähnt; Ein Element auf Blockebene nimmt immer die volle verfügbare Breite ein (dehnt sich so weit wie möglich nach links und rechts aus).
Das Festlegen widthvon eines Elements auf Blockebene verhindert, dass es sich bis zu den Rändern seines Containers ausdehnt. Dann können Sie die Ränder auf automatisch setzen, um das Element innerhalb seines Containers horizontal zu zentrieren. Das Element nimmt die angegebene Breite ein und der verbleibende Platz wird gleichmäßig zwischen den beiden Rändern aufgeteilt:
Hinweis: Das <div>obige Problem tritt auf, wenn das Browserfenster kleiner als die Breite des Elements ist. Der Browser fügt der Seite dann eine horizontale Bildlaufleiste hinzu.
Wenn Sie max-widthstattdessen in dieser Situation verwenden, verbessert der Browser die Handhabung kleiner Fenster. Dies ist wichtig, wenn Sie eine Website auf kleinen Geräten nutzbar machen:
Tipp: Ändern Sie die Größe des Browserfensters auf weniger als 500 Pixel Breite, um den Unterschied zwischen den beiden Divs zu sehen!
Hier ist ein Beispiel für die beiden obigen Divs:
Beispiel
div.ex1 {
width: 500px;
margin:
auto;
border: 3px solid #73AD21;
}
div.ex2 {
max-width: 500px;
margin: auto;
border: 3px solid #73AD21;
}