Die Funktionen „padding“, „border“, „width“, „height“ und „display“ CSS-Eigenschaften

Die Funktionen der CSS-Eigenschaften „padding“, „border“, „width“, „height“ und „display“.

2024-07-12

Eigenschaften im Boxmodell

Polsterung

padding Wird verwendet, um den Abstand zwischen dem Elementinhalt und dem Rand zu steuern. Der Abstand kann für jede Seite des Elements (oben, rechts, unten, links) separat eingestellt werden. Die Auffülleinheit kann Pixel (px), Prozentsatz (%) usw. sein.

.element {
    padding: 10px; /* 上下左右的内边距都为10像素 */
    padding-top: 20px; /* 上边距为20像素 */
    padding-right: 15px; /* 右边距为15像素 */
    padding-bottom: 10px; /* 下边距为10像素 */
    padding-left: 5px; /* 左边距为5像素 */
}
1
2
3
4
5
6
7

Grenze

border Wird verwendet, um den Rand des Elements festzulegen, einschließlich Breite, Stil und Farbe des Randes.

.element {
    border: 2px solid #000; /* 设置2像素宽的实线黑色边框 */
    border-width: 2px; /* 设置边框宽度 */
    border-style: solid; /* 设置边框样式 */
    border-color: #000; /* 设置边框颜色 */
    border-radius: 5px; /* 设置圆角边框 */
}
1
2
3
4
5
6
7

Größenattribut

Breite

width Wird verwendet, um die Breite des Elements festzulegen. Die Einheit kann Pixel (px), Prozentsatz (%), Ansichtsfensterbreiteneinheit (vw) usw. sein.width Legt nur die Breite des Inhaltsbereichs fest, ohne Polsterung, Rahmen und Ränder.

.element {
    width: 200px; /* 设置宽度为200像素 */
    width: 50%; /* 设置宽度为父元素宽度的50% */
}
1
2
3
4

Höhe

height Wird verwendet, um die Höhe des Elements festzulegen. Die Einheit kann Pixel (px), Prozentsatz (%), Ansichtsfensterhöheneinheit (vh) usw. sein.height Legt nur die Höhe des Inhaltsbereichs fest, ohne Abstand, Rahmen und Ränder.

.element {
    height: 100px; /* 设置高度为100像素 */
    height: 50%; /* 设置高度为父元素高度的50% */
}
1
2
3
4

Layouteigenschaften

block: Elemente auf Blockebene nehmen die gesamte Breite des übergeordneten Containers ein und werden standardmäßig umbrochen.
inline: Inline-Elemente nehmen nur die Breite ihres Inhalts ein und werden nicht umbrochen.
inline-block: Inline-Elemente auf Blockebene werden wie Inline-Elemente angeordnet, die Breite und Höhe können jedoch festgelegt werden.
none: Versteckte Elemente erscheinen nicht auf der Seite und belegen keinen Platz.
flex: Aktivieren Sie das flexible Box-Layout und ordnen Sie untergeordnete Elemente in einer Zeile an.
grid: Aktiviert das Rasterlayout und ordnet untergeordnete Elemente in einem Raster an.

.element-block {
    display: block; /* 设置为块级元素 */
}

.element-inline {
    display: inline; /* 设置为内联元素 */
}

.element-inline-block {
    display: inline-block; /* 设置为内联块级元素 */
}

.element-none {
    display: none; /* 隐藏元素 */
}

.container-flex {
    display: flex; /* 启用弹性布局 */
}

.container-grid {
    display: grid; /* 启用网格布局 */
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

Überblick

durch Kombinieren padding、border、width、height Unddisplay und anderen Attributen können Sie die Größe, den Abstand und das Layout von Elementen flexibel steuern. Diese Eigenschaften sind die Grundlage für die Erstellung ansprechender und ansprechender Webseiten. Hier ist ein umfassendes Beispiel, das zeigt, wie diese Eigenschaften zusammen verwendet werden, um ein Element auf Blockebene mit Polsterung, Rändern und einer bestimmten Breite und Höhe zu erstellen:

.box {
    width: 300px;
    height: 150px;
    padding: 20px;
    border: 5px solid #000;
    display: block;
}
1
2
3
4
5
6
7

In diesem Beispiel,.box Das Element ist als Blockebenenelement mit einer Breite von 300 Pixeln und einer Höhe von 150 Pixeln, mit 20 Pixeln Innenabstand und einem 5 Pixel breiten durchgehenden schwarzen Rand eingerichtet. Diese Einstellung stellt sicher, dass zwischen dem Inhalt des Elements und dem Rand genügend Platz bleibt, während der Rand die äußere Grenze des Elements klar definiert.

Ich hoffe, diese Erklärungen sind hilfreich. Bitte lassen Sie mich wissen, wenn Sie weitere Fragen haben oder weitere Beispiele benötigen!

Technologieaustausch