CSS-eigenschappen gerelateerd aan het boxmodel

Articles

Dit artikel legt de CSS-eigenschappen uit die verband houden met het boxmodel.

Je kunt leren over de toepassingsmogelijkheden en syntaxis van eigenschappen zoals breedte, hoogte en marge.

YouTube Video

HTML voor Voorbeeldweergave

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>

Gerelateerd aan het boxmodel

`width`- en `height`-eigenschappen

 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}

De width- en height-eigenschappen zijn CSS-eigenschappen die worden gebruikt om de breedte en hoogte van een element te specificeren. Deze worden met name gebruikt bij het instellen van de grootte van blokelementen, afbeeldingen, video's, enz.

In de width-height-fixed-klasse worden vaste waarden gespecificeerd voor breedte en hoogte.
In de width-height-percent-klasse worden procentuele waarden gespecificeerd voor breedte en hoogte.

Waarden die kunnen worden gespecificeerd

De width- en height-eigenschappen kunnen de volgende waarden hebben.

auto: Standaardgrootte. Past de grootte automatisch aan ten opzichte van het bovenliggende element.
Vaste waarden: Geeft een vaste breedte op in pixels, procenten of relatieve eenheden.(ex: 100px, 50%, 10rem)
- Bijvoorbeeld, 250px stelt de grootte van het element in op 250 pixels, en 50% stelt het in op 50% van de grootte van het bovenliggende element.
min-content: Past zich aan aan de minimale grootte van de inhoud.
max-content: Past zich aan aan de maximale grootte van de inhoud.
fit-content: Past de grootte van het element aan op basis van de grootte van de inhoud.

Minimale en maximale waarden specificeren

min-width, max-width, min-height en max-height zijn CSS-eigenschappen die worden gebruikt om groottebeperkingen in te stellen voor de breedte en hoogte van een element. Met deze eigenschappen kun je ervoor zorgen dat een element binnen een specifiek groottebereik blijft.

`margin`- en `padding`-eigenschappen

 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 en padding zijn eigenschappen die in CSS worden gebruikt om de buitenste en binnenste ruimte van elementen binnen het boxmodel te regelen. Ze worden gebruikt om de ruimte tussen elementen aan te passen en om het uiterlijk netjes te maken.

In de klasse margin-padding worden zowel margin als padding gespecificeerd. Er is margin-ruimte buiten de solide rand en padding-ruimte binnen de solide rand.
In de klasse margin-only wordt alleen margin gespecificeerd. Je kunt zien dat het blauwe gebied kleiner is in vergelijking met de klasse margin-padding omdat er geen padding-ruimte binnen de solide rand is.
In de klasse no-margin zijn zowel margin als padding ingesteld op 0. Je kunt zien dat het blauwe gebied helemaal naar links is geduwd omdat er geen margin-ruimte buiten de solide rand is.

Op deze manier stelt de eigenschap margin de buitenruimte van een element in en past de afstand tussen elementen aan. Aan de andere kant stelt de eigenschap padding de binnenruimte van een element in en past de afstand tussen de inhoud en de rand aan.

`margin`-eigenschap

De eigenschap margin stelt de buitenruimte (margin) van een element in. Het wordt gebruikt om ruimte te creëren tussen aangrenzende elementen. De volgende waarden kunnen worden gespecificeerd:.
Vaste waarden: Je kunt de grootte van de marge specificeren in pixels, relatieve eenheden (em, rem) of procenten.(ex: 10px, 1em, 5%)
auto: Handig voor het centreren van block-elementen. Wanneer de breedte is gespecificeerd, worden de linker- en rechtermarges automatisch aangepast.
Positieve en negatieve waarden: Positieve waarden vergroten de ruimte, terwijl negatieve waarden elementen dichter bij elkaar brengen.

Afkortingsnotatie:

 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}

De eigenschap margin kan één tot vier waarden accepteren.

Eén waarde: Geldt voor alle zijden.
Twee waarden: De eerste geldt voor boven- en onderkant, de tweede voor links en rechts.
Drie waarden: Geldt in de volgorde boven, links en rechts, onder.
Vier waarden: Geldt in de volgorde boven, rechts, onder, links.

`padding`-eigenschap

Functie:

De padding-eigenschap stelt de binnenspatiëring (padding) van een element in. Het wordt gebruikt om ruimte te creëren tussen de inhoud en de rand van een element. De volgende waarden kunnen worden gespecificeerd:.
Vaste waarden: Geeft de grootte van de padding aan.(ex: 10px, 1em, 5%)
Negatieve waarden kunnen niet worden gebruikt. Padding-waarden kunnen alleen worden opgegeven als positieve getallen.

Afkortingsnotatie:

 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}

Net als bij margin kun je één tot vier waarden specificeren.

Eén waarde: Geldt voor alle zijden.
Twee waarden: De eerste geldt voor boven- en onderkant, de tweede voor links en rechts.
Drie waarden: Geldt in de volgorde boven, links en rechts, onder.
Vier waarden: Geldt in de volgorde boven, rechts, onder, links.

`box-sizing`-eigenschap

 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 is een CSS-eigenschap die bepaalt hoe de breedte en hoogte van een element worden berekend.

In de content-box-klasse is de breedte van het element 360px. De width is 300px, met een linker- en rechter-padding van in totaal 40px en een linker- en rechter-border van in totaal 20px, wat een totaal van 360px maakt.
In border-box is de breedte van het element 300px. Padding en border zijn inbegrepen in de gespecificeerde width.

Waarden van `box-sizing`

Er zijn voornamelijk twee waarden voor box-sizing: content-box en border-box, waarbij content-box de standaardwaarde is.

`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*/

Wanneer content-box is opgegeven, worden alleen de inhoudsbreedte en -hoogte bepaald door width en height. Padding en border worden eraan toegevoegd om de uiteindelijke grootte te bepalen. Met andere woorden, width en height verwijzen alleen naar het inhoudsgebied.

In dit voorbeeld is de opgegeven width 200px, maar met de breedten van de linker- en rechter-padding en border erbij, is de uiteindelijke werkelijke breedte van het element 260px.

`border-box`

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

Wanneer border-box is opgegeven, worden width en height berekend inclusief padding en border. Met andere woorden, de opgegeven width en height worden de totale grootte van de inhoud, padding en border.

In dit geval is de opgegeven width 200px, en aangezien padding en border ook zijn inbegrepen, blijft de uiteindelijke werkelijke breedte van het element 200px. padding en border worden daarin aangepast.

Samenvatting van de verschillen in `box-sizing`

Eigenschap	Berekeningsmethode	Werkelijke breedteberekening
`content-box` (standaard)	`width` heeft alleen betrekking op de inhoud. `padding` en `border` worden toegevoegd.	`width` + `padding` + `border`
`border-box`	`width` omvat alles (inhoud, `padding`, `border`)	De gespecificeerde `width` wordt ongewijzigd gebruikt.

Voordelen van `box-sizing`

Het gebruik van border-box stabiliseert de lay-out. Het toevoegen van padding of border verandert de gespecificeerde grootte niet, waardoor berekeningen eenvoudig blijven.
Het is nuttig bij het maken van flexibele lay-outs. In responsieve ontwerpen of complexe lay-outs wordt border-box vaak gebruikt om onverwachte grootteverschillen te voorkomen.

Hoe `border-box` wereldwijd toe te passen

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

Door CSS op deze manier in te stellen, kun je border-box toepassen op alle elementen om onverwachte grootteveranderingen te voorkomen.

Samenvatting

box-sizing bepaalt of padding en border worden inbegrepen in de width en height van een element.
Het gebruik van border-box maakt grootteberekeningen eenvoudiger en is geschikt voor responsief ontwerp.

`visibility` eigenschap

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

De visibility eigenschap wordt gebruikt om elementen te tonen of te verbergen, maar in tegenstelling tot de display eigenschap beïnvloedt het de lay-out, zelfs als het element verborgen is. Het verbergt alleen het element, behoudt de oorspronkelijke positie en grootte zonder de lay-out van andere elementen te beïnvloeden.

Basis Syntax

1element {
2    visibility: value;
3}

value: Een waarde die de zichtbaarheid van het element bepaalt.

Waarde types

De visibility eigenschap kan worden ingesteld op de volgende waarden:.

`visible`

Het specificeren van visible zal het element tonen. Dit is de standaardwaarde.

`hidden`

Het specificeren van hidden zal het element verbergen, maar de lay-out ruimte blijft gereserveerd.

`collapse`

collapse wordt voornamelijk gebruikt voor tabelrijen of kolommen. Het element wordt onzichtbaar en de ruimte wordt ook genegeerd. Wanneer toegepast op tabelrijen of -kolommen, worden de verborgen rijen of kolommen volledig uit de indeling verwijderd.
Wanneer het echter wordt gebruikt op normale blok- of inline-elementen, met uitzondering van tabelelementen, gedraagt het zich als hidden en blijft de indelingsruimte behouden.

`inherit`

Het specificeren van inherit zal de waarde van de eigenschap visibility van het bovenliggende element overnemen.

Verschillen tussen `visibility` en `display`

Er zijn de volgende verschillen tussen visibility en display.

visibility: hidden verbergt het element maar behoudt de ruimte en indeling.
display: none verwijdert het element volledig uit de indeling, waardoor andere elementen die ruimte kunnen innemen.

Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.

YouTube Video

CSS-eigenschappen voor codeweergave en citaten Achtergrondgerelateerde CSS-eigenschappen

CSS-eigenschappen gerelateerd aan het boxmodel

YouTube Video

HTML voor Voorbeeldweergave

Gerelateerd aan het boxmodel

width- en height-eigenschappen

Waarden die kunnen worden gespecificeerd

Minimale en maximale waarden specificeren

margin- en padding-eigenschappen

margin-eigenschap

Afkortingsnotatie:

padding-eigenschap

Functie:

Afkortingsnotatie:

box-sizing-eigenschap

Waarden van box-sizing

content-box

border-box

Samenvatting van de verschillen in box-sizing

Voordelen van box-sizing

Hoe border-box wereldwijd toe te passen

Samenvatting

visibility eigenschap

Basis Syntax

Waarde types

visible

hidden

collapse

inherit

Verschillen tussen visibility en display

YouTube Video

`width`- en `height`-eigenschappen

`margin`- en `padding`-eigenschappen

`margin`-eigenschap

`padding`-eigenschap

`box-sizing`-eigenschap

Waarden van `box-sizing`

`content-box`

`border-box`

Samenvatting van de verschillen in `box-sizing`

Voordelen van `box-sizing`

Hoe `border-box` wereldwijd toe te passen

`visibility` eigenschap

`visible`

`hidden`

`collapse`

`inherit`

Verschillen tussen `visibility` en `display`