Detaillierte Erklärung der Standardwerte von Breite und Höhe in CSS: auto und %
|
abschließend
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
Artikel empfehlen
So handhaben Sie lange Daten bei der Anzeige in HTML
Bei der Anzeige langer Daten in HTML können Sie di...
Implementierungsideen für die Synchronisierung von Docker-Registry-Images
Einleitung Bisher wurden unsere Docker-Images in ...
Der gesamte Prozess der lokalen Konfiguration des Reverse-Proxys über Nginx
Vorwort Nginx ist ein leichtgewichtiger HTTP-Serv...
Ausnahmefehler beim Packen von Webpack-Dateien
Vor dem Verpacken im Webpack müssen wir sicherste...
Detaillierte Erklärung zur Verwendung von Docker durch Deepin zur Installation einer MySQL-Datenbank
Fragen Sie zuerst die MySQL-Quelle ab Docker-Such...
Zusammenfassung der Vorteile der Bereitstellung von MySQL Delayed Slaves
Vorwort Die Master-Slave-Replikationsbeziehung vo...
Vue+echarts realisiert Fortschrittsbalken-Histogramm
In diesem Artikel wird der spezifische Code von v...
Einführung in die Verschachtelungsregeln von HTML-Tags
Es gibt viele XHTML-Tags: div, ul, li, dl, dt, dd...
So setzen Sie das Root-Passwort von Mysql in Windows zurück, wenn Sie es vergessen haben
Meine Maschinenumgebung: Windows 2008 R2 MySQL 5....
Lösung für den Docker-Container, der keine Schreibberechtigung für das Host-Verzeichnis hat
Beim Anwenden von Docker-Containern mounten wir h...
Vue-Formulareingabebindung V-Modell
Inhaltsverzeichnis 1.v-Modell 2. Bindungseigensch...
Lösung für das Problem, dass MySQL nach dem Ändern des Standardpfads der Datenbank nicht gestartet werden kann
Vorwort Als MySQL den Standarddatenbankpfad änder...
Bei einer guten Refaktorierung geht es nicht nur um die Refaktorisierung des Codes, sondern auch um die Refaktorisierung des Lebens.
Es ist wirklich nicht einfach, eine gute Rekonstr...
Untersuchung des Problems der Flip-Navigation mit geneigter Maus
In diesem Artikel analysieren wir als Beispiel die...
Springboot + Vue-Cropper realisiert den Effekt des Avatar-Ausschneidens und -Hochladens
Verwenden Sie die Vue-Cropper-Komponente, um Avat...