Heim > Artikel > Web-Frontend > So legen Sie die innere Grenzlinie in CSS fest
So legen Sie die innere Grenzlinie in CSS fest
- 藏色散人Original
- 2021-03-03 10:51:4510251Durchsuche
So legen Sie die innere Rahmenlinie von CSS fest: Erstellen Sie zunächst eine HTML-Beispieldatei.
Die Betriebsumgebung dieses Artikels: Windows7-System, HTML5- und CSS3-Version, DELL G3-Computer.
In CSS können Sie das Attribut „border“ zusammen mit dem Attribut „box-sizing“ verwenden, um einen inneren Rahmen hinzuzufügen. Das Attribut „border“ wird verwendet, um einen Rahmen hinzuzufügen, und das Attribut „box-sizing“ wird verwendet, um bestimmte Elemente auf eine bestimmte Weise zu definieren, damit sie in den angegebenen Bereich passen. Setzen Sie den Wert des Attributs „box-sizing“ auf den Wert „border-box“, um einen inneren Rahmen hinzuzufügen .
Werfen wir zunächst einen Blick auf ein Beispiel für das Festlegen innerer Grenzen mit CSS.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div.container {
width: 30em;
border: 1em solid;
}
div.box1 {
width: 50%;
border: 1em solid red;
float: left;
}
div.box2 {
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="box1">普通边框！！</div>
<div class="box2">内边框！！</div>
</div>
</body>
</html>Box-Sizing-Eigenschaft
Mit der Box-Sizing-Eigenschaft können Sie bestimmte Elemente definieren, die auf eine bestimmte Weise zu einem bestimmten Bereich passen.
Wenn Sie beispielsweise zwei umrandete Boxen nebeneinander platzieren müssen, können Sie dies tun, indem Sie die Boxgröße auf „border-box“ einstellen. Dadurch rendert der Browser ein Feld mit der angegebenen Breite und Höhe und fügt die Ränder und den Innenabstand in das Feld ein.
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. Abstands- und Rahmenlayout und Zeichnen von Elementen mit Ausnahme der angegebenen Breite und Höhe
border-box: Die Angabe von Breite und Höhe (Min/Max-Attribute) bestimmt den Elementrand. 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, der vom übergeordneten Element geerbt werden soll.
【Empfohlenes Lernen: CSS-Video-Tutorial】
Beispiel:
<!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>Rendering:
Das obige ist der detaillierte Inhalt vonSo legen Sie die innere Grenzlinie in CSS fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!