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

Detaillierte Erläuterung der Installation und Konfiguration des Nginx+Tomcat-Load-Balancing-Clusters

Lösen Sie das Problem der fehlenden Datei msvcr100.dll beim Erstellen von MySQL im Windows Service 2012 Alibaba Cloud Server

Lösung 1: Laden Sie die Datei msvcr100.dll herunt...

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

Detaillierte Erläuterung der Installation und Konfiguration des Nginx+Tomcat-Load-Balancing-Clusters

Lösung zur Konvertierung in Inline-Styles in CSS (css-inline)

JavaScript zum Erzielen eines ausgewogenen digitalen Scroll-Effekts

Zusammenfassung der Wissenspunkte zum Selbststudium der integrierten MySql-Funktionen

Eine kurze Diskussion über die magischen Verwendungsmöglichkeiten von CSS-Pseudoelementen und Pseudoklassen

Detailliertes Tutorial-Diagramm zur Installation der dekomprimierten Version von MySQL5.7.21

jQuery verwendet das Canvas-Tag, um den Bestätigungscode zu zeichnen

Linux verwendet den Binärmodus zur Installation von MySQL

HTML-Tabellen-Tag-Tutorial (35): spaltenübergreifendes Attribut COLSPAN

Wie viele gängige Schleifen zur Array-Traversierung in JS kennen Sie?

Artikel empfehlen

Lösung für das Problem, dass Navicat keine Remoteverbindung zum MySql-Server herstellen kann

Probleme und Lösungen beim Ersetzen von Oracle durch MySQL

Eine kleine Sammlung von HTML-Meta-Tags

Lösen Sie das Problem der fehlenden Datei msvcr100.dll beim Erstellen von MySQL im Windows Service 2012 Alibaba Cloud Server

Beheben Sie den Fehler „ExtUtils/MakeMaker.pm kann in @INC nicht gefunden werden“

Die grundlegende HTML-Syntax ist praktisch für diejenigen, die gerade erst anfangen, HTML zu lernen

Zusammenfassung neuer Anwendungsbeispiele für Calculated in Vue3

Lösung für das Problem des Sitzungsfehlers, der durch den Nginx-Reverse-Proxy verursacht wird

So verleihen Sie einer Website ein höheres und ansprechenderes Aussehen

MySQL 8.0.16 Installations- und Konfigurations-Tutorial unter Windows 10

Fügen Sie dem Vortag des Website-Codeblocks den Code für die Schaltfläche „Code kopieren“ hinzu

So ändern Sie die CentOS-Serverzeit auf die Peking-Zeit

Installation und Verwendung von MySQL unter Ubuntu (allgemeine Version)

Natives JS zur Implementierung einer Echtzeituhr

Implementierungscode des Tools zum Entfernen von Wasserzeichen aus kurzen Videos (Douyin)