Detaillierte Erklärung des Unterschieds zwischen dem Standardwert des CSS-Attributs width: auto und width: 100%

Breite: automatisch

Das untergeordnete Element (einschließlich Inhalt + Polsterung + Rahmen + Rand) füllt den gesamten Inhaltsbereich des übergeordneten Elements.
Wenn ein Unterelement über einen Rand, eine Grenze oder eine Polsterung verfügt, wird der Breitenwert abgezogen, der dem Inhaltsbereich des Unterelements entspricht.
Inhalt des übergeordneten Elements = untergeordnetes Element (Inhalt + Polsterung + Rahmen + Rand)

Breite: 100%

Erzwingen Sie, dass der Inhaltsbereich des untergeordneten Elements den Inhaltsbereich des übergeordneten Elements ausfüllt
Wenn ein untergeordnetes Element über einen Rand, eine Grenze oder eine Polsterung verfügt, ändert sich die Breite des Inhaltsbereichs des untergeordneten Elements nicht, sondern läuft über das übergeordnete Feld hinaus und behält den ursprünglichen Wert bei.
Inhalt des übergeordneten Elements = Inhalt des untergeordneten Elements

Ein Beispiel sagt mehr als tausend Worte:

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Dokument</title>
    <style type="text/css">
        * {
            Rand: 0; Polsterung: 0;
        }
        Körper {
            Hintergrund: #dcdcdc;
        }
        .Kasten {
            Breite: 400px;
            Rand: 3px durchgehend rot;
            Polsterung: 0 50px;
        }
        .box1 {
            Breite: automatisch;
            Höhe: 100px;
            Hintergrund: rosa;
            Polsterung: 0 50px;
            Rand: 0 50px;
            Rahmenbreite: 0 50px;
            Rahmenstil: durchgezogen;
            Rahmenfarbe: grün;
        }
        .box2 {
            Breite: 100 %;
            Höhe: 100px;
            Hintergrund: Gold;
            Polsterung: 0 50px;
            Rand: 0 50px;
            Rahmenbreite: 0 50px;
            Rahmenstil: durchgezogen;
            Rahmenfarbe: grün;
        }
        .box3 {
            Breite: 100px; Höhe: 100px; Hintergrund: orange;
        }
        .box4 {
            schweben: links;
            Breite: 50px; Höhe: 50px; Hintergrund: pink;
        }
    </Stil>
</Kopf>
<Text>
<div Klasse="Box">
    <div Klasse="Box1"></div>
    <div Klasse="box2"></div>
</div>
</body>
</html>

width:auto

width:100%

Hinweis: Die Bildunterbreite wird in den Unterinhalt geändert

Dies ist das Ende dieses Artikels mit der detaillierten Erklärung des Unterschieds zwischen den Standardwerten der CSS-Attribute width, width: auto und width: 100 %. Weitere relevante Inhalte zu CSS width: auto und width: 100 % finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Wir hoffen, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

<<: Warum ist der Speicherplatz nach dem Löschen von Tabellendaten in MySQL immer noch belegt?

>>: Das Festlegen der Z-Index-Eigenschaft für die Flash-Overlay-Popup-Ebene im Webdesign funktioniert nicht