Heim >Web-Frontend >CSS-Tutorial >Wissen Sie, wie man den Rahmen des CSS-Boxmodells verwendet? Hier finden Sie eine Einführung in die Zusammensetzung des CSS-Box-Modells
Wissen Sie, wie man den Rahmen des CSS-Boxmodells verwendet? Hier finden Sie eine Einführung in die Zusammensetzung des CSS-Box-Modells
- 寻∝梦Original
- 2018-09-08 13:43:442712Durchsuche
In diesem Artikel wird hauptsächlich der Rahmen des Boxmodells im CSS-Stil vorgestellt, mit vollständigen Beispielen sowie einer Einführung in die Details des Rahmens des CSS-Boxmodells und einer Erläuterung des Codes . Schauen wir uns gemeinsam diesen Artikel an
Lassen Sie uns zunächst über die Komponenten des Box-Modells sprechen:
Wenn ich an das Box-Modell denke, kann ich Denken Sie unbedingt an eine Box. Das Box-Modell im CSS-Stil enthält Inhalte, Ränder, Innenränder, Außenränder usw. In unserem heutigen Artikel geht es hauptsächlich um die Ränder des Box-Modells.
Schauen wir uns zunächst einige Attribute und Einführungen an:
Das Attribut „border-style“ wird verwendet, um den Stil aller Rahmen des festzulegen Element
Das Attribut „border-width“ legt die Breite (dünn/mittel/dick/länge) für alle Ränder des Elements fest
Der Rand -color-Attribut legt die Farbe der vier Ränder fest
Ich erinnere mich, dass ich im vorherigen Artikel über die Verwendung von Rahmen gesprochen habe, aber wir wollen noch darüber reden Es.
Schauen wir uns nun ein vollständiges Beispiel an:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
<style type="text/css">
table{border-style:solid; border-width:medium; border-color:red}
</style>
</head>
<body>
<table width="200px"; height="150px">
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</table>
</body>
</html>Dies ist ein vollständiger HTML-Code, der alle oben genannten drei Attribute verwendet.
Schauen wir uns nun den im Browser angezeigten Effekt an:
Das ist der Inhalt des Rahmens , Es gibt drei Eigenschaften, die die Fertigstellung dieses Bildes definieren. (Wenn Sie mehr sehen möchten, besuchen Sie die Spalte CSS-Referenzhandbuch der PHP-Website für Chinesisch, um mehr zu erfahren)
Werfen wir einen Blick auf den ausführlicheren Inhalt:
border-bottom-style:double: Dies definiert den unteren Rand als doppelt (zweizeiliger Rand)
border-width: 20px: Dies definiert den Randpixelwert von 20px.
Fügen wir das zum Code hinzu:
<style type="text/css">
table{border-style:solid; border-width:medium; border-color:red;border-top-style:double;border-left-style:double;
border-width:20px;}
</style> Ist das nicht ein bisschen viel? Schauen wir uns jetzt den Effekt an:
Oben und links sind zweizeilige Ränder, und unten und rechts sind nicht festgelegt, sodass sie zusammen, wie im Bild oben, eine durchgezogene Linie bilden. Pixel sind 20 Pixel.
Okay, das ist die Einführung in CSS und Modelle in diesem Artikel (wenn Sie mehr sehen möchten, gehen Sie zur Spalte CSS-Lernhandbuch auf der chinesischen PHP-Website, um mehr zu erfahren). Wenn Sie Fragen haben, können Sie diese unten stellen. Hinterlassen Sie eine Nachricht mit einer Frage.
Das obige ist der detaillierte Inhalt vonWissen Sie, wie man den Rahmen des CSS-Boxmodells verwendet? Hier finden Sie eine Einführung in die Zusammensetzung des CSS-Box-Modells. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!