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

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

Artikel empfehlen

SQL-Implementierung von LeetCode (178. Punkterangliste)

[LeetCode] 178.Ranglistenergebnisse Schreiben Sie...

Detaillierte Erläuterung der Bereitstellungs- und Konfigurationsmethoden des Linux-Zabbix-Agenten

1. Installieren Sie zabbix-agent auf web01 Zabbix...

Fehlerbehebung bei hohem Speicherverbrauch von NodeJs, tatsächlicher Kampfrekord

Vorwort Dies ist eine Untersuchung, die durch die...

js realisiert die Lupenfunktion der Shopping-Website

In diesem Artikel wird der spezifische Code von j...

So verhindern Sie, dass Flash HTML-Div-Elemente abdeckt

Als ich heute einen Flash-Werbecode schrieb, habe ...

Das Bildelement img hat in IE6 zusätzlichen Leerraum

Beim Erstellen eines DIV+CSS-Layouts einer Seite ...

Node implementiert Suchfeld für Fuzzy-Abfragen

In diesem Artikelbeispiel wird der spezifische Co...

Docker-Port-Mapping und externe Unzugänglichkeitsprobleme

Der Docker-Container stellt Dienste bereit und la...

Docker+Gitlab+Jenkins erstellt automatisierte Bereitstellung von Grund auf

Inhaltsverzeichnis Vorwort: 1. Docker installiere...

Analyse des Linux-Hochleistungsnetzwerk-IO- und Reaktormodells

Inhaltsverzeichnis 1. Einführung in grundlegende ...

Proxy realisiert das Prinzip der bidirektionalen Bindung von Vue3-Daten

Inhaltsverzeichnis 1. Vorteile von Proxy gegenübe...

Verwenden des CSS-Loaders zum Implementieren des CSS-Moduls in Vue-CLI

【Vorwort】 Sowohl die modularen CSS-Lösungen von V...

Detaillierter Prozess der NTP-Serverkonfiguration unter Linux

Inhaltsverzeichnis 1. Umgebungskonfiguration 1.NT...

So erweitern Sie Vue Router-Links in Vue 3

Vorwort Das Tag <router-link> ist ein großa...

Implementierungsprinzip und Konfiguration der MySql Master-Slave-Replikation

Die Trennung von Lese- und Schreibzugriffen in Da...