So legen Sie die innere Grenzlinie in CSS fest-CSS-Tutorial-php.cn

So legen Sie die innere Grenzlinie in CSS fest

藏色散人

Freigeben： 2023-01-03 09:27:16

Original

10283 Leute haben es durchsucht

So legen Sie die innere Rahmenlinie von CSS fest: Erstellen Sie zunächst eine HTML-Beispieldatei.

So legen Sie die innere Grenzlinie in CSS fest

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>

Nach dem Login kopieren

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;

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. 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>

Nach dem Login kopieren

Rendering:

So legen Sie die innere Grenzlinie in CSS fest

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!