So fügen Sie einen inneren Rahmen in CSS3 hinzu-CSS-Tutorial-php.cn

So fügen Sie einen inneren Rahmen in CSS3 hinzu

王林

Freigeben： 2020-11-30 17:21:48

Original

2665 Leute haben es durchsucht

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.

So fügen Sie einen inneren Rahmen in CSS3 hinzu

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:

Nach dem Login kopieren

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>

Nach dem Login kopieren

Implementierungseffekt:

So fügen Sie einen inneren Rahmen in CSS3 hinzu

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!