CSS-Eigenschaften im Zusammenhang mit dem Boxmodell

Articles

Dieser Artikel erklärt die CSS-Eigenschaften im Zusammenhang mit dem Boxmodell.

Sie können die Anwendungsfälle und die Syntax für Eigenschaften wie Breite, Höhe und Rand erlernen.

YouTube Video

HTML zur Vorschau

css-box.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>Box Model Related CSS Properties</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-box.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>Box Model Related CSS Properties</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Box Model Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>width and height</h3>
 23            <section>
 24                <header><h4>width: 250px; height: 150px;</h4></header>
 25                <section class="sample-view">
 26                    <div class="width-height-fixed">Fixed size(250px,150px)</div>
 27                </section>
 28            </section>
 29            <section>
 30                <header><h4>width: 50%; height: 50%;</h4></header>
 31                <section class="sample-view">
 32                    <div class="width-height-percent">Percentage size(50%,50%)</div>
 33                </section>
 34            </section>
 35            <section>
 36                <header><h4>width: min-content; height: min-content;</h4></header>
 37                <section class="sample-view">
 38                    <div class="width-height-min-content">This is an example of min-content.</div>
 39                </section>
 40            </section>
 41            <section>
 42                <header><h4>width: max-content; height: max-content;</h4></header>
 43                <section class="sample-view">
 44                    <div class="width-height-max-content">This is an example of max-content.</div>
 45                </section>
 46            </section>
 47            <section>
 48                <header><h4>width: fit-content; max-width: 150px;</h4></header>
 49                <section class="sample-view">
 50                    <div class="width-height-fit-content">This is an example of fit-content.</div>
 51                </section>
 52            </section>
 53        </article>
 54        <article>
 55            <h3>margin and padding</h3>
 56            <section style="height: auto;">
 57                <h4>Margin &amp; padding</h4>
 58                <header><h4>margin: 20px; padding: 15px;</h4></header>
 59                <section class="sample-view">
 60                    <div class="margin-padding">margin & padding</div>
 61                </section>
 62            </section>
 63            <section style="height: auto;">
 64                <h4>Margin only(no padding)</h4>
 65                <header><h4>margin: 20px; padding: 0;</h4></header>
 66                <section class="sample-view">
 67                    <div class="margin-only">margin only</div>
 68                </section>
 69            </section>
 70            <section style="height: auto;">
 71                <h4>No margin &amp; padding example</h4>
 72                <header><h4>margin: 0; padding: 0;</h4></header>
 73                <section class="sample-view">
 74                    <div class="no-margin">no margin & padding</div>
 75                </section>
 76            </section>
 77        </article>
 78        <article>
 79            <h3>box-sizing</h3>
 80            <section style="height: auto;">
 81                <header><h4>box-sizing: content-box</h4></header>
 82                <section class="sample-view">
 83                    <div style="width: 300px;">width: 300px</div>
 84                    <div class="content-box">Content Box</div>
 85                    <div style="width: 360px;">width: 360px</div>
 86                </section>
 87            </section>
 88            <section>
 89                <header><h4>box-sizing: border-box</h4></header>
 90                <section class="sample-view">
 91                    <div style="width: 300px;">width: 300px</div>
 92                    <div class="border-box">Border Box</div>
 93                </section>
 94            </section>
 95        </article>
 96        <article>
 97            <h3>visibility</h3>
 98            <section>
 99                <header><h4>visibility: visible</h4></header>
100                <section class="sample-view">
101                    <div class="visibility-visible">Visible Box</div>
102                </section>
103                <header><h4>visibility: hidden</h4></header>
104                <section class="sample-view">
105                    <div class="visibility-hidden">Hidden Box</div>
106                </section>
107                <header><h4>visibility: collapse</h4></header>
108                <section class="sample-view">
109                    <div class="visibility-collapse">Collapsed Box (Hold layout space)</div>
110                </section>
111                <header><h4>HTML</h4></header>
112                <pre>&lt;div class="visibility-collapse"&gt;Collapsed Box (Hold layout space)&lt;/div&gt;</pre>
113                <header><h4>visibility: collapse</h4></header>
114                <section class="sample-view">
115                    <table style="height: 200px; margin: auto;">
116                        <tr class="visibility-collapse">
117                            <td>Cell 1 (Remove layout space)</td>
118                        </tr>
119                        <tr>
120                            <td>Cell 2</td>
121                        </tr>
122                    </table>
123                </section>
124                <header><h4>HTML</h4></header>
125<pre>
126&lt;table style="height: 200px; margin: auto;"&gt;
127    &lt;tr class="visibility-collapse"&gt;
128        &lt;td&gt;Cell 1 (Remove layout space)&lt;/td&gt;
129    &lt;/tr&gt;
130    &lt;tr&gt;
131        &lt;td&gt;Cell 2&lt;/td&gt;
132    &lt;/tr&gt;
133&lt;/table&gt;
134</pre>
135            </section>
136        </article>
137    </main>
138</body>
139</html>

Zum Box-Modell zugehörig

Eigenschaften `width` und `height`

 1.width-height-fixed {
 2    width: 250px;
 3    height: 150px;
 4    background-color: lightblue;
 5}
 6
 7.width-height-percent {
 8    width: 50%;
 9    height: 50%;
10    background-color: lightblue;
11}
12
13.width-height-min-content {
14    width: min-content;
15    height: min-content;
16    background-color: lightblue;
17}
18
19.width-height-max-content {
20    width: max-content;
21    height: max-content;
22    background-color: lightblue;
23}
24
25.width-height-fit-content {
26    width: fit-content;
27    max-width: 150px;
28    background-color: lightblue;
29}

Die Eigenschaften width und height sind CSS-Eigenschaften, mit denen die Breite und Höhe eines Elements festgelegt werden. Diese werden insbesondere verwendet, um die Größe von Blockelementen, Bildern, Videos usw. festzulegen.

In der Klasse width-height-fixed werden feste Werte für Breite und Höhe angegeben.
In der Klasse width-height-percent werden Prozentwerte für Breite und Höhe angegeben.

Werte, die angegeben werden können

Die Eigenschaften width und height können die folgenden Werte haben.

auto: Standardgröße. Passt die Größe automatisch relativ zum übergeordneten Element an.
Feste Werte: Gibt eine feste Breite in Pixeln, Prozentwerten oder relativen Einheiten an.(ex: 100px, 50%, 10rem)
- Zum Beispiel legt 250px die Elementgröße auf 250 Pixel fest, und 50% setzt sie auf 50% der Größe des übergeordneten Elements.
min-content: Passt sich der Mindestgröße des Inhalts an.
max-content: Passt sich der Maximalgröße des Inhalts an.
fit-content: Passt die Größe des Elements entsprechend der Größe des Inhalts an.

Festlegen von Minimal- und Maximalwerten

min-width, max-width, min-height und max-height sind CSS-Eigenschaften, die verwendet werden, um Größenbeschränkungen für die Breite und Höhe eines Elements festzulegen. Mit diesen Eigenschaften können Sie sicherstellen, dass ein Element innerhalb eines bestimmten Größenbereichs bleibt.

Eigenschaften `margin` und `padding`

 1.margin-padding {
 2    margin: 20px; /* Margin outside the element */
 3    padding: 15px; /* Padding inside the element */
 4    border: 1px solid #333;
 5    background-color: lightblue;
 6    width: 300px;
 7    height: 40px;
 8}
 9
10.margin-only {
11    margin: 20px; /* Margin outside the element */
12    padding: 0; /* No padding inside the element */
13    border: 1px solid #333;
14    background-color: lightblue;
15    width: 300px;
16    height: 40px;
17}
18
19.no-margin {
20    margin: 0; /* No margin outside the element */
21    padding: 0; /* No padding inside the element */
22    border: 1px solid #333;
23    background-color: lightblue;
24    width: 300px;
25    height: 40px;
26}

Margin und padding sind Eigenschaften, die in CSS verwendet werden, um den äußeren und inneren Abstand von Elementen innerhalb des Boxmodells zu steuern. Sie werden verwendet, um den Abstand zwischen Elementen zu ändern und das Erscheinungsbild zu ordnen.

In der Klasse margin-padding werden sowohl margin als auch padding angegeben. Außerhalb des festen Rahmens befindet sich der margin, und innerhalb des festen Rahmens befindet sich der padding.
In der Klasse margin-only ist nur margin angegeben. Man sieht, dass der blaue Bereich im Vergleich zur Klasse margin-padding kleiner ist, da es keinen padding-Raum innerhalb des durchgehenden Rahmens gibt.
In der Klasse no-margin sind sowohl margin als auch padding auf 0 gesetzt. Man sieht, dass der blaue Bereich ganz nach links verschoben ist, da es keinen margin-Raum außerhalb des durchgehenden Rahmens gibt.

Auf diese Weise legt die Eigenschaft margin den äußeren Raum eines Elements fest und passt den Abstand zwischen den Elementen an. Die Eigenschaft padding hingegen legt den inneren Raum eines Elements fest und passt den Abstand zwischen dem Inhalt und dem Rahmen an.

Eigenschaft `margin`

Die Eigenschaft margin legt den äußeren Abstand (Margin) eines Elements fest. Sie wird verwendet, um Platz zwischen benachbarten Elementen zu schaffen. Die folgenden Werte können angegeben werden:.
Feste Werte: Sie können die Größe der Margin in Pixeln, relativen Einheiten (em, rem) oder Prozent angeben.(ex: 10px, 1em, 5%)
auto: Nützlich zum Zentrieren von Blockelementen. Wenn die Breite angegeben ist, werden die linken und rechten Margen automatisch angepasst.
Positive und negative Werte: Positive Werte vergrößern den Abstand, während negative Werte Elemente näher zusammenbringen.

Kurznotation:

 1div.one-value {
 2    margin: 20px;
 3}
 4
 5div.two-value {
 6    /* top-bottom left-right */
 7    margin: 10px 5px;
 8}
 9
10div.three-value {
11    /* top left-right bottom */
12    margin: 10px 5px 15px;
13}
14
15div.four-value {
16    /* top right bottom left */
17    margin: 10px 5px 15px 20px;
18}

Die Eigenschaft margin kann ein bis vier Werte haben.

Ein Wert: Gilt für alle Seiten.
Zwei Werte: Der erste gilt für oben und unten, der zweite für links und rechts.
Drei Werte: Gilt in der Reihenfolge oben, links und rechts, unten.
Vier Werte: Gilt in der Reihenfolge oben, rechts, unten, links.

`padding`-Eigenschaft

Funktion:

Die Eigenschaft padding legt den inneren Abstand (Padding) eines Elements fest. Sie wird verwendet, um Platz zwischen dem Inhalt und dem Rahmen eines Elements zu schaffen. Die folgenden Werte können angegeben werden:.
Feste Werte: Gibt die Größe des Abstands an.(ex: 10px, 1em, 5%)
Negative Werte können nicht verwendet werden. Abstandswerte können nur als positive Zahlen angegeben werden.

Kurznotation:

 1div.one-value {
 2    padding: 20px;
 3}
 4
 5div.two-value {
 6    /* top-bottom left-right */
 7    padding: 10px 5px;
 8}
 9
10div.three-value {
11    /* top left-right bottom */
12    padding: 10px 5px 15px;
13}
14
15div.four-value {
16    /* top right bottom left */
17    padding: 10px 5px 15px 20px;
18}

Ähnlich wie bei margin können Sie ein bis vier Werte angeben.

Ein Wert: Gilt für alle Seiten.
Zwei Werte: Der erste gilt für oben und unten, der zweite für links und rechts.
Drei Werte: Gilt in der Reihenfolge oben, links und rechts, unten.
Vier Werte: Gilt in der Reihenfolge oben, rechts, unten, links.

`box-sizing`-Eigenschaft

 1/* Default content-box : 300px + 2 * 20px + 2 * 10px = 360px */
 2.content-box {
 3    width: 300px;
 4    padding: 20px;
 5    border: 10px solid blue;
 6    box-sizing: content-box;
 7    background-color: lightblue;
 8}
 9
10/* Using border-box */
11.border-box {
12    width: 300px;
13    padding: 20px;
14    border: 10px solid red;
15    box-sizing: border-box;
16    background-color: lightcoral;
17}

box-sizing ist eine CSS-Eigenschaft, die steuert, wie die Breite und Höhe eines Elements berechnet werden.

In der content-box-Klasse beträgt die Breite des Elements 360px. Die width beträgt 300px, wobei padding links und rechts zusammen 40px und border links und rechts zusammen 20px ausmachen, was insgesamt 360px ergibt.
Im border-box beträgt die Breite des Elements 300px. padding und border sind in der angegebenen width enthalten.

Werte von `box-sizing`

Es gibt hauptsächlich zwei Werte für box-sizing: content-box und border-box, wobei content-box der Standardwert ist.

`content-box`

 1.content-box {
 2    box-sizing: content-box;
 3    width: 200px;
 4    padding: 20px;
 5    border: 10px solid black;
 6}
 7/*
 8260px = 200px(width) +
 920px(padding-left) + 20px(padding-right) +
1010px(border-left) + 10px(border-right)
11*/

Wenn content-box angegeben ist, werden nur die Breite und Höhe des Inhalts durch width und height gesetzt. padding und border werden hinzugefügt, um die endgültige Größe zu bestimmen. Mit anderen Worten, width und height beziehen sich nur auf den Inhaltsbereich.

In diesem Beispiel beträgt die angegebene width 200px, aber mit den Breiten von padding und border auf der linken und rechten Seite beträgt die endgültige tatsächliche Breite 260px.

`border-box`

1.border-box {
2    width: 200px;
3    padding: 20px;
4    border: 10px solid black;
5    box-sizing: border-box;
6}

Wenn border-box angegeben ist, werden width und height einschließlich padding und border berechnet. Mit anderen Worten, die angegebene width und height werden zur Gesamtsumme des Inhalts, padding und border.

In diesem Fall beträgt die angegebene width 200px, und da padding und border ebenfalls einbezogen sind, bleibt die endgültige tatsächliche Breite des Elements 200px. padding und border werden darin angepasst.

Zusammenfassung der Unterschiede von `box-sizing`

Eigenschaft	Berechnungsmethode	Tatsächliche Breitenberechnung
`content-box` (Standard)	`width` bezieht sich nur auf den Inhalt. `padding` und `border` werden hinzugefügt.	`width` + `padding` + `border`
`border-box`	`width` ist alles (einschließlich Inhalt, `padding`, `border`)	Die angegebene `width` wird unverändert verwendet.

Vorteile von `box-sizing`

Die Verwendung von border-box stabilisiert das Layout. Das Hinzufügen von padding oder border ändert die angegebene Größe nicht, was Berechnungen vereinfacht.
Es ist nützlich bei der Erstellung flexibler Layouts. In responsiven Designs oder komplexen Layouts wird border-box oft verwendet, um unerwartete Größenänderungen zu vermeiden.

Wie man `border-box` global anwendet

1*,
2*::before,
3*::after {
4    box-sizing: border-box;
5}

Indem Sie CSS auf diese Weise einstellen, können Sie border-box auf alle Elemente anwenden, um unerwartete Größenänderungen zu vermeiden.

Zusammenfassung

box-sizing steuert, ob padding und border in die width und height eines Elements einbezogen werden.
Die Verwendung von border-box erleichtert Größenberechnungen und ist für responsives Design geeignet.

`visibility`-Eigenschaft

 1.visibility-visible {
 2    visibility: visible;
 3}
 4
 5.visibility-hidden {
 6    visibility: hidden;
 7}
 8
 9.visibility-collapse {
10    visibility: collapse;
11}

Die visibility-Eigenschaft wird verwendet, um Elemente anzuzeigen oder auszublenden, beeinflusst jedoch im Gegensatz zur display-Eigenschaft das Layout, auch wenn das Element verborgen ist. Es blendet das Element nur aus, behält jedoch seine ursprüngliche Position und Größe bei, ohne das Layout anderer Elemente zu beeinflussen.

Grundlegende Syntax

1element {
2    visibility: value;
3}

value: Ein Wert, der die Sichtbarkeit des Elements angibt.

Werttypen

Die visibility-Eigenschaft kann auf die folgenden Werte eingestellt werden:.

`visible`

Die Angabe von visible zeigt das Element an. Dies ist der Standardwert.

`hidden`

Die Angabe von hidden blendet das Element aus, aber sein Layoutplatz wird reserviert.

`collapse`

collapse wird hauptsächlich für Tabellenzeilen oder -spalten verwendet. Das Element wird unsichtbar und sein Platz wird ebenfalls ignoriert. Wenn es auf Tabellenzeilen oder -spalten angewendet wird, werden die ausgeblendeten Zeilen oder Spalten vollständig aus dem Layout entfernt.
Wenn es jedoch auf reguläre Block- oder Inline-Elemente angewendet wird, außer Tabellenelementen, verhält es sich wie hidden und der Layoutplatz bleibt erhalten.

`inherit`

Die Angabe von inherit übernimmt den Wert der visibility-Eigenschaft vom übergeordneten Element.

Unterschiede zwischen `visibility` und `display`

Es gibt folgende Unterschiede zwischen visibility und display.

visibility: hidden verbirgt das Element, behält jedoch seinen Platz und das Layout bei.
display: none entfernt das Element vollständig aus dem Layout, sodass andere Elemente diesen Platz einnehmen können.

Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.

YouTube Video

CSS-Eigenschaften für die Anzeige von Code und Zitaten Hintergrundbezogene CSS-Eigenschaften

CSS-Eigenschaften im Zusammenhang mit dem Boxmodell

YouTube Video

HTML zur Vorschau

Zum Box-Modell zugehörig

Eigenschaften width und height

Werte, die angegeben werden können

Festlegen von Minimal- und Maximalwerten

Eigenschaften margin und padding

Eigenschaft margin

Kurznotation:

padding-Eigenschaft

Funktion:

Kurznotation:

box-sizing-Eigenschaft

Werte von box-sizing

content-box

border-box

Zusammenfassung der Unterschiede von box-sizing

Vorteile von box-sizing

Wie man border-box global anwendet

Zusammenfassung

visibility-Eigenschaft

Grundlegende Syntax

Werttypen

visible

hidden

collapse

inherit

Unterschiede zwischen visibility und display

YouTube Video

Eigenschaften `width` und `height`

Eigenschaften `margin` und `padding`

Eigenschaft `margin`

`padding`-Eigenschaft

`box-sizing`-Eigenschaft

Werte von `box-sizing`

`content-box`

`border-box`

Zusammenfassung der Unterschiede von `box-sizing`

Vorteile von `box-sizing`

Wie man `border-box` global anwendet

`visibility`-Eigenschaft

`visible`

`hidden`

`collapse`

`inherit`

Unterschiede zwischen `visibility` und `display`