Zusammenfassung der Erfahrungen mit der Verwendung des Div-Box-Modells

Berechnung des Boxmodells <br />Rand + Rahmen + Polsterung + Inhalt

Die Breite und Höhe in CSS legen nur die Höhe und Breite des Inhaltsbereichs fest. Nicht die Höhe und Breite des gesamten Modells.

Code kopieren

Der Code lautet wie folgt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8" />
<Titel>Demo</Titel>
<style type="text/css">
*{Rand:0; Polsterung:0;}
dl { Hintergrund: rot; Rand: 10px durchgezogen #000; Breite: 100px; Höhe: 100px;}
dt { Hintergrund:gelb;}
dd { Hintergrund:grün;}
</Stil>
</Kopf>
<Text>
<dl>
<dt>Test von dt</dt>
<dd>Test von dd</dd>
</dl>
</body>
</html>

Das Festlegen von Rändern und Polsterungen wirkt sich nicht auf die Höhe und Breite des Inhaltsbereichs aus, sondern ändert nur die Höhe und Breite des sekundären Boxmodellbereichs.

Wenn die Boxmodelle verschachtelt sind, wirkt sich das innere Boxmodell auf das äußere Boxmodell aus.

Detaillierte Schritte zur Konfiguration der Linux-Firewall (basierend auf der Yum-Warehouse-Konfiguration)

Artikel

Zusammenfassung der Erfahrungen mit der Verwendung des Div-Box-Modells

Detaillierte Schritte zur Konfiguration der Linux-Firewall (basierend auf der Yum-Warehouse-Konfiguration)

So verwenden Sie die Technologie mit negativen Rändern, um ein durchschnittliches Layout in CSS zu erreichen

Lösung zum Vergessen des MySQL-Passworts unter Linux

So installieren Sie den Zookeeper-Dienst auf einem Linux-System

CSS realisiert Div vollständig zentriert, ohne Höhe festzulegen

Vue implementiert Video-Upload-Funktion

Zusammenfassung zum Erlernen von HTML-Tags und Grundelementen

So konfigurieren Sie eine VMware-Umgebung mit mehreren Knoten

Nofollow sorgt dafür, dass die Links in Kommentaren und Nachrichten wirklich funktionieren

Lösen Sie das Problem des Importierens von Webprojekten in Idea und deren Veröffentlichung in Tomcat

Artikel empfehlen

CSS-Einstellung Div-Hintergrundbild-Implementierungscode

Was Sie beim Schreiben selbstschließender XHTML-Tags beachten sollten

Detaillierte Erklärung der JS-Ereignisdelegation

So verwenden Sie MQTT im Uniapp-Projekt

Detaillierte Erklärung der Schritte zum Erstellen eines Webservers mit node.js

Detaillierte Erläuterung der Verarbeitung der drei Docker Nginx-Protokolle

Automatische Hot-Deployment/Neustart von Jenkins+Tomcat und Lösungen für aufgetretene Probleme (empfohlen)

So installieren Sie das ZSH-Terminal in CentOS 7.x

Beispiel für die Erzeugung eines Flügelschlags eines Schmetterlings mit reinem CSS3

Detailliertes Beispiel zum Abrufen des Maximalwerts jeder Gruppe nach der Gruppierung in MySQL

Spezifikationen für Hyperlink-Symbole: Verbessern Sie die Lesbarkeit von Artikeln

Webdatenspeicherung: Cookie, UserData, SessionStorage, WebSqlDatabase

Eine kurze Diskussion über das Implementierungsprinzip von Webpack4-Plugins

Einfacher Vergleich von Meta-Tags in HTML

Warum DOCTYPE HTML verwenden?