Detaillierte Erklärung der Standardwerte von Breite und Höhe in CSS: auto und %

abschließend

% der Breite: definiert die prozentuale Breite basierend auf der Breite des umschließenden Blocks (übergeordnetes Element), die die Grenze des übergeordneten Elements überschreitet
Breite automatisch: Versuchen Sie, vom übergeordneten Element umschlossen zu werden
% der Höhe: Basierend auf der prozentualen Höhe des Blockobjekts, das es enthält, überschreitet es die Grenze des übergeordneten Objekts.
Höhe automatisch: Versuchen Sie, vom übergeordneten Element umschlossen zu werden

Fall

Kopieren Sie den Code und führen Sie ihn erneut aus. Nehmen Sie sich ein paar Minuten Zeit, um zu erfahren, wie Sie vom übergeordneten Element umschlossen werden und die Einschränkungen des übergeordneten Elements durchbrechen können.

Breite Gehäuse

<!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;
        }
    </Stil>
</Kopf>
<Text>
<div Klasse="Box">
    <div Klasse="Box1"></div>
    <div Klasse="box2"></div>
</div>
</body>
</html>

Höhe Gehäuse

<!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: 50 0px;
            Höhe: 400px;
        }
        .box1 {
            Breite: 200px;
            Höhe: automatisch;
            Hintergrund: rosa;
            Polsterung: 50px 0px;
            Rand: 50px 0px;
            Rahmenbreite: 50px 0px;
            Rahmenstil: durchgezogen;
            Rahmenfarbe: grün;
        }
        .box2 {
            Breite: 200px;
            Höhe: 100 %;
            Hintergrund: Gold;
            Polsterung: 50px 0px;
            Rand: 50px 0px;
            Rahmenbreite: 50px 0px;
            Rahmenstil: durchgezogen;
            Rahmenfarbe: grün;
        }
     
    </Stil>
</Kopf>
<Text>
<div Klasse="Box">
    <div Klasse="Box1"></div>
    <div Klasse="box2"></div>
</div>
</body>
</html>

Dies ist das Ende dieses Artikels über die Standardwerte für Breite und Höhe in CSS-, Auto- und %-Fällen. Weitere relevante Standardwerte für CSS-Breite und -Höhe finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<: So starten Sie die RabbitMq-Software automatisch, wenn CentOS gestartet wird

>>: MySQL fügt automatisch Millionen simulierter Datenoperationscodes ein

Einführung in den Aufbau eines DNS-Servers unter centos7

Detaillierte Erklärung der Standardwerte von Breite und Höhe in CSS: auto und %

Einführung in den Aufbau eines DNS-Servers unter centos7

Verwendung und Unterschiedsanalyse von „Ersetzen in“ und „Einfügen in“ beim Update doppelter Schlüssel in MySQL

So überprüfen Sie, ob die Firewall in Linux ausgeschaltet ist

Verschiedene Probleme und Lösungen beim Bereitstellen von Tomcat zur Veröffentlichung von Projekten unter Linux

Detaillierte Erklärung zu sinnvollen Einstellungen des MySQL sql_mode

Was tun, wenn der Auto-Increment-Primärschlüssel in MySQL aufgebraucht ist?

So aktualisieren Sie die Ansicht synchron nach Datenänderungen in Vue

Flex-Layout ermöglicht adaptive Seiten (Syntax und Beispiele)

Konfigurationsmethode für die VMware Kali-Umgebung virtueller Maschinen

Praxis des El-Cascader-Kaskadenselektors in ElementUI

Artikel empfehlen

Detaillierte Erklärung zur Verwendung des Grep-Befehls in Linux

Der Prozess des Aufbaus einer Lampenarchitektur durch einen Docker-Container

Website-Design-Erfahrung Zusammenfassung der häufigsten Fehler beim Erstellen von Websites

Detaillierte Erläuterung der MySQL Master-Slave-Replikation und der Lese-/Schreibtrennung

Analyse des Konfigurationsprozesses der Nginx-HTTP-Integritätsprüfung

MySQL Workbench herunterladen und verwenden Tutorial detaillierte Erklärung

So löschen Sie den MySQL 8.0-Dienst vollständig unter Linux

Entwickeln Sie eine Vue-Komponente, die Iframe kapselt

Realisierung baumförmiger Sekundärtabellen auf Basis von Angular

Slot-Anordnung und Nutzungsanalyse in Vue

Installieren und konfigurieren Sie SSH in CentOS7

So verwenden Sie den Linux-Befehl md5sum

Detaillierte Erläuterung des Schnittstellenanforderungsmanagements basierend auf Typescript und Axios

Verstehen Sie JavaScript-Prototypen und Prototypenketten gründlich

So erweitern Sie den Speicherplatz eines Linux-Servers