CSS-Box-Modell

CSS-Box-Modell

• Übersicht über das CSS-Box-Modell
• CSS-Polsterung
• CSS-Rahmen
• CSS-Marge
• CSS-Margin-Zusammenführung

1. CSS-Box-Modell (Box-Modell)

Gibt an, wie die Elementbox mit Elementinhalt, Innenabstand, Rändern und Rändern umgeht.

Wie unten gezeigt:

2, CSS-Auffüllattribut

Die CSS-Padding-Eigenschaft definiert den Leerraum zwischen dem Rand eines Elements und seinem Inhalt. Das Padding-Attribut akzeptiert einen Längenwert oder einen Prozentwert, lässt jedoch keine negativen Werte zu.

Sie können die Polsterung direkt in vier Richtungen (oben, rechts, unten, links) einstellen:

<span style="color: #000000;">h1 {padding: 10px;}  
  
或者<br>
h1 {padding: 10px 0.25em 2ex 20%;}</span>

Sie können auch den oberen, rechten, unteren und linken Abstand festlegen, indem Sie die folgenden vier separaten Attribute verwenden:

• Polsteroberteil
• Polsterung rechts
• Polsterung unten
• Polsterung links

Prozentualer Wert der Polsterung

Wie bereits erwähnt, können Sie einen Prozentwert für die Polsterung eines Elements festlegen. Prozentwerte werden wie Ränder relativ zur Breite des übergeordneten Elements berechnet. Wenn sich also die Breite des übergeordneten Elements ändert, ändern sich auch diese.

Die folgende Regel legt den Abstand des Absatzes auf 10 % der Breite des übergeordneten Elements fest:

p {padding: 10%;}

Zum Beispiel: Wenn das übergeordnete Element eines Absatzes ein div-Element ist, wird sein Abstand basierend auf der Breite des div berechnet.

<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">style</span><span style="color: #0000ff;">="width: 200px;"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>This paragragh is contained within a DIV that has a width of 200 pixels.<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> 

Hinweis: Die obere und untere Polsterung stimmt mit der linken und rechten Polsterung überein; das heißt, der Prozentsatz der oberen und unteren Polsterung wird relativ zur Breite des übergeordneten Elements festgelegt, nicht relativ zur Höhe.

默认值：	0
继承性：	no
版本：	CSS1
JavaScript 语法：	object.style.padding="10px 5px"

Mögliche Werte

值	描述
auto	浏览器计算内边距。
length	规定以具体单位计的内边距值，比如像素、厘米等。默认值是 0px。
%	规定基于父元素的宽度的百分比的内边距。
inherit	规定应该从父元素继承内边距。

 

 

三，CSS 边框属性

CSS border 属性允许你规定元素边框的样式(border-style)、宽度(border-width)和颜色(border-color)。（如果有可见背景的话，元素的背景会延伸到边框区域，因为元素的背景是内容、内边距和边框区的背景）

既可以直接定义边框的样式、宽度、颜色，也可以定义单边样式、宽度、颜色。如下图所示：

属性	描述
border	简写属性，用于把针对四个边的属性设置在一个声明。
border-style	用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width	简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color	简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom	简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color	设置元素的下边框的颜色。
border-bottom-style	设置元素的下边框的样式。
border-bottom-width	设置元素的下边框的宽度。
border-left	简写属性，用于把左边框的所有属性设置到一个声明中。
border-left-color	设置元素的左边框的颜色。
border-left-style	设置元素的左边框的样式。
border-left-width	设置元素的左边框的宽度。
border-right	简写属性，用于把右边框的所有属性设置到一个声明中。
border-right-color	设置元素的右边框的颜色。
border-right-style	设置元素的右边框的样式。
border-right-width	设置元素的右边框的宽度。
border-top	简写属性，用于把上边框的所有属性设置到一个声明中。
border-top-color	设置元素的上边框的颜色。
border-top-style	设置元素的上边框的样式。
border-top-width	设置元素的上边框的宽度。

 

 

四，CSS margin属性

围绕在元素边框的空白区域是外边距（默认是空白的。设置外边距会在元素外创建额外的“空白”。

设置外边距的最简单的方法就是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值。

可以直接设置四个方向（上，右，下，左）的外边距：

<span>h1 {margin: 10px;}  
  
或者<br>
h1 {margin: 10px 0.25em 2ex 20%;}</span>

也可以使用下列任何一个属性来只设置相应上的外边距，而不会直接影响所有其他外边距：

• margin-top
• margin-right
• margin-bottom
• margin-left

 

默认值：	0
继承性：	no
版本：	CSS1
JavaScript 语法：	object.style.margin="10px 5px"

可能的值

值	描述
auto	浏览器计算外边距。
length	规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。
%	规定基于父元素的宽度的百分比的外边距。
inherit	规定应该从父元素继承外边距。

Nachfolgend vorgestellt: Margin Merging

Randzusammenführung bedeutet, dass wenn zwei vertikale Ränder aufeinandertreffen, diese einen einzigen Rand bilden. Die Höhe der zusammengeführten Ränder entspricht der größeren der Höhen der beiden zusammengeführten Ränder. (ps: Nur die vertikalen Ränder von Blockboxen im normalen Dokumentenfluss werden zusammengeführt, und die Ränder zwischen Inline-Boxen, schwebenden Boxen oder absolut positionierten Boxen werden nicht zusammengeführt.)

Wenn ein Element über einem anderen Element erscheint, verschmilzt der untere Rand des ersten Elements mit dem oberen Rand des zweiten Elements. Bitte schauen Sie sich das Bild unten an:

Wenn ein Element in einem anderen Element enthalten ist (vorausgesetzt, es gibt keinen Abstand oder Rahmen, der die Ränder trennt), werden auch ihre oberen und/oder unteren Ränder zusammengeführt. Bitte schauen Sie sich das Bild unten an:

So seltsam es auch erscheinen mag, Ränder können sogar mit sich selbst verschmelzen.

Angenommen, Sie haben ein leeres Element, das Ränder, aber keinen Rand oder Abstand hat. In diesem Fall berühren sich der obere Rand und der untere Rand und werden zusammengeführt:

Wenn dieser Rand auf den Rand eines anderen Elements trifft, wird er ebenfalls zusammengeführt:

Aus diesem Grund nehmen mehrere Absatzelemente sehr wenig Platz ein, da alle ihre Ränder zu einem kleinen Rand zusammengeführt werden: