So verwenden Sie das Box-Sizing-Attribut-CSS-Tutorial-php.cn

So verwenden Sie das Box-Sizing-Attribut

青灯夜游

Freigeben： 2021-04-20 14:41:37

Original

6875 Leute haben es durchsucht

Mit dem Box-Sizing-Attribut können Sie bestimmte Elemente definieren, die auf eine bestimmte Weise zu einem bestimmten Bereich passen. Die Syntax für die Verwendung dieses Attributs lautet „box-sizing: content-box|border-box|inherit;“ .

So verwenden Sie das Box-Sizing-Attribut

Die Betriebsumgebung dieses Artikels: Windows 7-System, CSS3-Version, Dell G3-Computer.

CSS3-Boxgrößeneigenschaft

Funktion: Ermöglicht die Definition des spezifischen Inhalts, der sich genau an einen bestimmten Bereich anpasst.

Hinweis: Internet Explorer, Chrome, Safari und Opera unterstützen das Box-Sizing-Attribut. Firefox erfordert das Präfix -moz-.

Syntax:

box-sizing: content-box|border-box|inherit;

Nach dem Login kopieren

< tr class="ue-table-interlace-color-double">

Wert

Beschreibung

content-box

值	描述
content-box	这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。
border-box	为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit	规定应从父元素继承 box-sizing 属性的值。

Dies ist das von CSS2.1 festgelegte Breiten- und Höhenverhalten.

Breite und Höhe werden separat auf die Inhaltsbox des Elements angewendet. Zeichnet die Polsterung und Ränder des Elements außerhalb seiner Breite und Höhe.

border-box

Die für das Element festgelegte Breite und Höhe Bestimmt den Rahmenrahmen des Elements.

Das heißt, alle für das Element angegebenen Abstände und Ränder werden innerhalb der festgelegten Breite und Höhe gezeichnet.

Die Breite und Höhe des Inhalts werden durch Subtrahieren des Randes und der Innenfüllung von der eingestellten Breite bzw. Höhe ermittelt. So verwenden Sie das Box-Sizing-Attribut

inherit

Gibt an, dass der Wert des Box-Sizing-Attributs geerbt werden soll vom übergeordneten Element.

Beispiel für die Verwendung des CSS3-Boxgrößenattributs<🎜><🎜><🎜>

<!DOCTYPE html>
<html>
<head>
<style> 
div.container
{
width:30em;
border:1em solid;
margin: 100px auto;
}
div.box
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
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: Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, dass er für das Studium aller hilfreich sein wird. Weitere spannende Inhalte finden Sie in den entsprechenden Tutorial-Kolumnen auf der chinesischen PHP-Website! ! !

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das Box-Sizing-Attribut. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!