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

So stellen Sie ein SpringCloud-Projekt mit Docker bereit

Detaillierte grafische Anweisungen zum Herunterladen und Installieren der entpackten Version von MySQL 5.7.18 und zum Starten des MySQL-Dienstes

Artikel

So kehren Sie schnell von unten nach oben zurück, wenn die Webseite zu viele Inhalte enthält

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

So stellen Sie ein SpringCloud-Projekt mit Docker bereit

MySQL-Datenbank Shell import_table Datenimport

Javascript implementiert die Webversion des Flipperspiels

Globale Aufrufimplementierung von Vue2.x Picker auf mobilen Endgeräten

Tipps zur Verwendung kleiner HTML-Tags

So implementieren Sie Element-Floating und Clear-Floating mit CSS

Detaillierte grafische Anweisungen zum Herunterladen und Installieren der entpackten Version von MySQL 5.7.18 und zum Starten des MySQL-Dienstes

So kehren Sie schnell von unten nach oben zurück, wenn die Webseite zu viele Inhalte enthält

Erkunden Sie die gängigen VMware ESXI CLI-Befehle

Fälle, in denen bestimmte Bibliotheken beim Sichern der Datenbank mit mysqldump ausgeschlossen werden

Artikel empfehlen

MySQL-String-Aufteilungsvorgang (String-Abfangen mit Trennzeichen)

Detaillierte Erklärung der Getter-Verwendung in vuex

So erreichen Sie eine nahtlose Token-Aktualisierung

React + Threejs + Swiper vollständiger Code zum Erzielen eines Panoramaeffekts

Eine Kurzanleitung zu Docker

Anzeigemodus von Elementen in CSS

Lassen Sie uns über Parameter in MySQL sprechen

HTML+CSS zum Erzielen von Spezialeffekten durch Textfaltung – Beispiel

Tutorial zur Installation von Apache 2.4.41 unter Windows 10

CSS zur Erzielung einer kompatiblen Textausrichtung in verschiedenen Browsern

Lösung für das Problem, dass Elemente mit negativem Z-Index nicht angeklickt werden können

Bringen Sie Ihnen bei, Dutzende von Zeilen JS zu verwenden, um coole interaktive Canvas-Effekte zu erzielen

JavaScript zum Erreichen eines einfachen Tab-Leisten-Umschaltens

Vue implementiert die Countdown-Komponente für zweite Kills

Führen Sie die Schritte zum Zurücksetzen des Root-Benutzerkennworts in MySQL8 aus