Heim > Artikel > Web-Frontend > So fügen Sie einen inneren Rahmen in CSS3 hinzu
So fügen Sie einen inneren Rahmen in CSS3 hinzu
- 王林Original
- 2020-11-19 11:52:562558Durchsuche
So fügen Sie innere Ränder in CSS3 hinzu: Sie können innere Ränder hinzufügen, indem Sie das Attribut „border“ und das Attribut „box-sizing“ verwenden, z. B. [box-sizing:border-box;]. Mit dem Box-Sizing-Attribut können bestimmte Eigenschaften so definiert werden, dass sie in einen bestimmten Bereich passen.
Die Betriebsumgebung dieses Tutorials: Windows 7-System, CSS3-Version. Diese Methode ist für alle Computermarken geeignet.
css3 inneren Rahmen hinzufügen
Verwandte Attribute:
Mit dem Rahmenattribut können Sie den Stil und die Farbe des Rahmens eines Elements angeben.
Mit der Box-Sizing-Eigenschaft können Sie bestimmte Elemente so definieren, dass sie in einen bestimmten Bereich passen.
(Teilen von Lernvideos: CSS-Video-Tutorial)
Syntax:
box-sizing: content-box|border-box|inherit:
Attributwert:
content-box Dies ist das von CSS2.1 festgelegte Verhalten von Breite und Höhe. Die Angabe der Breite und Höhe des Elements (Min/Max-Eigenschaften) gilt für die Breite und Höhe des Felds. Der Abstand und das Rahmenlayout sowie die Zeichnung des Elements geben die Breite und Höhe an, mit Ausnahme von
border-box, das die Breite und Höhe (Min/Max-Attribute) angibt, um den Elementrand zu bestimmen. Das heißt, die Angabe der Breite und Höhe eines Elements umfasst Abstand und Rand. Die Breite und Höhe des Inhalts werden durch Subtrahieren des Rands und der Polsterung von der eingestellten Breite bzw. Höhe ermittelt.
inherit Gibt den Wert des Box-Sizing-Attributs an, das vom übergeordneten Element geerbt werden soll.
Code-Implementierung:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div.container
{
width:30em;
border:1em solid;
}
div.box
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
width:50%;
border:1em solid red;
float:left;
}
</style>
</head>
<body>
<div class="container">
<div class="box">这个 div 占据了左边的一半。</div>
<div class="box">这个 div 占据了右边的一半。</div>
</div>
</body>
</html>Implementierungseffekt:
Verwandte Empfehlungen: CSS-Tutorial
Das obige ist der detaillierte Inhalt vonSo fügen Sie einen inneren Rahmen in CSS3 hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!