CSS-egenskaber relateret til boksmodellen

Articles

Denne artikel forklarer CSS-egenskaberne relateret til boksmodellen.

Du kan lære om anvendelsestilfælde og syntaks for egenskaber som bredde, højde og margin.

YouTube Video

HTML til forhåndsvisning

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>

Boksmodelrelateret

`width`- og `height`-egenskaber

 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}

width- og height-egenskaberne er CSS-egenskaber, der bruges til at angive bredden og højden af et element. Disse bruges især til at angive størrelsen på blok-elementer, billeder, videoer osv.

I klassen width-height-fixed angives faste værdier for bredde og højde.
I klassen width-height-percent angives procentværdier for bredde og højde.

Værdier, der kan angives

width- og height-egenskaberne kan have følgende værdier.

auto: Standardstørrelse. Justerer automatisk størrelsen relativt til det overordnede element.
Faste værdier: Angiver en fast bredde i pixels, procenter eller relative enheder.(ex: 100px, 50%, 10rem)
- For eksempel sætter 250px elementets størrelse til 250 pixels, og 50% sætter det til 50% af det overordnede elements størrelse.
min-content: Tilpasser sig indholdets minimale størrelse.
max-content: Tilpasser sig indholdets maksimale størrelse.
fit-content: Justerer elementets størrelse passende baseret på indholdets størrelse.

Angivelse af minimale og maksimale værdier

min-width, max-width, min-height og max-height er CSS-egenskaber, der bruges til at angive størrelsesbegrænsninger for et elements bredde og højde. Ved hjælp af disse kan du sikre, at et element forbliver inden for et specifikt størrelsesområde.

`margin`- og `padding`-egenskaber

 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 og padding er egenskaber i CSS, der bruges til at kontrollere den ydre og indre afstand af elementer inden for box-modellen. De bruges til at justere afstanden mellem elementer og til at rydde op i udseendet.

I margin-padding klassen er både margin og padding specificeret. Der er margin plads uden for den faste kant og padding plads inden i den faste kant.
I margin-only klassen er kun margin specificeret. Du kan se, at det blå område er mindre sammenlignet med margin-padding klassen, fordi der ikke er nogen padding plads inden i den faste kant.
I no-margin klassen er både margin og padding sat til 0. Du kan se, at det blå område er skubbet helt til venstre, fordi der ikke er nogen margin plads uden for den faste kant.

På denne måde indstiller margin-egenskaben den ydre afstand for et element og justerer afstanden mellem elementerne. På den anden side indstiller padding-egenskaben den indre afstand for et element og justerer afstanden mellem indholdet og kanten.

`margin` egenskab

margin-egenskaben indstiller den ydre plads (margin) af et element. Den bruges til at skabe plads mellem tilstødende elementer. Følgende værdier kan angives:.
Faste værdier: Du kan angive størrelsen på marginen i pixels, relative enheder (em, rem) eller procent.(ex: 10px, 1em, 5%)
auto: Brugbar til at centrere blok-elementer. Når bredden er specificeret, justeres venstre og højre margin automatisk.
Positive og negative værdier: Positive værdier udvider pladsen, mens negative værdier bringer elementer tættere på hinanden.

Forkortet notation:

 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}

margin-egenskaben kan tage fra en til fire værdier.

Én værdi: Gælder for alle sider.
To værdier: Den første gælder for toppen og bunden, den anden for venstre og højre.
Tre værdier: Gælder i rækkefølgen top, venstre og højre, bund.
Fire værdier: Gælder i rækkefølgen top, højre, bund, venstre.

`padding`-egenskab

Funktion:

padding-egenskaben angiver det indvendige mellemrum (padding) i et element. Den bruges til at skabe mellemrum mellem indholdet og kanten af et element. Følgende værdier kan angives:.
Faste værdier: Angiver størrelsen på padding.(ex: 10px, 1em, 5%)
Negative værdier kan ikke anvendes. Padding-værdier kan kun angives som positive tal.

Forkortet notation:

 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}

Ligesom margin kan du angive én til fire værdier.

Én værdi: Gælder for alle sider.
To værdier: Den første gælder for toppen og bunden, den anden for venstre og højre.
Tre værdier: Gælder i rækkefølgen top, venstre og højre, bund.
Fire værdier: Gælder i rækkefølgen top, højre, bund, venstre.

`box-sizing`-egenskab

 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 er en CSS-egenskab, der kontrollerer, hvordan bredden og højden af et element beregnes.

I content-box-klassen er bredden af elementet 360px. width er 300px, hvor venstre og højre padding tilsammen udgør 40px og venstre og højre border tilsammen udgør 20px, hvilket giver et samlet resultat på 360px.
I border-box er bredden af elementet 300px. padding og border er inkluderet i den angivne width.

Værdier af `box-sizing`

Der er hovedsageligt to værdier for box-sizing: content-box og border-box, hvor content-box er standardværdien.

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

Når content-box er angivet, bliver kun indholdsbredden og -højden indstillet af width og height. padding og border tilføjes for at bestemme den endelige størrelse. Med andre ord refererer width og height kun til indholdsområdet.

I dette eksempel er den angivne width 200px, men med bredden af venstre og højre padding og border tilføjet bliver den endelige faktiske bredde af elementet 260px.

`border-box`

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

Når border-box er angivet, beregnes width og height inklusive padding og border. Med andre ord bliver den angivne width og height den samlede størrelse på indholdet, padding og border.

I dette tilfælde er den angivne width 200px, og da padding og border også er inkluderet, forbliver den endelige faktiske bredde af elementet 200px. padding og border justeres inden for det.

Sammenfatning af forskelle i `box-sizing`

Egenskab	Beregningsmetode	Faktisk breddemåling
`content-box` (standard)	`width` refererer kun til indholdet. `padding` og `border` tilføjes.	`width` + `padding` + `border`
`border-box`	`width` er alt (inkluderer indhold, `padding`, `border`)	Den angivne `width` bruges som den er.

Fordele ved `box-sizing`

Brug af border-box stabiliserer layoutet. Tilføjelse af padding eller border ændrer ikke den angivne størrelse, hvilket gør beregninger simple.
Det er nyttigt, når man opretter fleksible layouts. I responsive designs eller komplekse layouts bruges border-box ofte for at undgå uventede størrelsesændringer.

Sådan anvender du `border-box` globalt

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

Ved at konfigurere CSS på denne måde kan du anvende border-box på alle elementer for at undgå uventede størrelsesændringer.

Sammendrag

box-sizing styrer, om padding og border medregnes i et elements width og height.
Brug af border-box gør størrelsesberegninger lettere og er velegnet til responsivt design.

`visibility`-egenskaben

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

visibility-egenskaben bruges til at vise eller skjule elementer, men i modsætning til display-egenskaben påvirker den layoutet, selvom elementet er skjult. Den skjuler kun elementet og bevarer dets oprindelige position og størrelse uden at påvirke layoutet af andre elementer.

Grundlæggende syntaks

1element {
2    visibility: value;
3}

værdi: En værdi, der angiver synligheden af elementet.

Værdityper

visibility-egenskaben kan indstilles til følgende værdier:.

`visible`

Ved at angive visible vises elementet. Dette er standardværdien.

`hidden`

Ved at angive hidden skjules elementet, men dets layout-plads forbliver reserveret.

`collapse`

collapse bruges primært til tabelrækker eller kolonner. Elementet bliver usynligt, og dets plads ignoreres også. Når den anvendes på tabelrækker eller kolonner, fjernes de skjulte rækker eller kolonner fuldstændigt fra layoutet.
Men når det bruges på almindelige blok- eller inlineelementer, undtagen tabelelementer, opfører det sig som hidden, og layoutpladsen bevares.

`inherit`

Angivelse af inherit vil arve værdien af visibility-egenskaben fra det overordnede element.

Forskelle mellem `visibility` og `display`

Der er følgende forskelle mellem visibility og display.

visibility: hidden skjuler elementet, men bevarer dets plads og layout.
display: none fjerner elementet fuldstændigt fra layoutet, hvilket tillader andre elementer at udfylde den plads.

Du kan følge med i ovenstående artikel ved hjælp af Visual Studio Code på vores YouTube-kanal. Husk også at tjekke YouTube-kanalen.

YouTube Video

CSS-egenskaber til kodedisplay og citater Baggrundsrelaterede CSS-egenskaber

CSS-egenskaber relateret til boksmodellen

YouTube Video

HTML til forhåndsvisning

Boksmodelrelateret

width- og height-egenskaber

Værdier, der kan angives

Angivelse af minimale og maksimale værdier

margin- og padding-egenskaber

margin egenskab

Forkortet notation:

padding-egenskab

Funktion:

Forkortet notation:

box-sizing-egenskab

Værdier af box-sizing

content-box

border-box

Sammenfatning af forskelle i box-sizing

Fordele ved box-sizing

Sådan anvender du border-box globalt

Sammendrag

visibility-egenskaben

Grundlæggende syntaks

Værdityper

visible

hidden

collapse

inherit

Forskelle mellem visibility og display

YouTube Video

`width`- og `height`-egenskaber

`margin`- og `padding`-egenskaber

`margin` egenskab

`padding`-egenskab

`box-sizing`-egenskab

Værdier af `box-sizing`

`content-box`

`border-box`

Sammenfatning af forskelle i `box-sizing`

Fordele ved `box-sizing`

Sådan anvender du `border-box` globalt

`visibility`-egenskaben

`visible`

`hidden`

`collapse`

`inherit`

Forskelle mellem `visibility` og `display`