CSS-egenskaper relatert til boksmodellen

Articles

Denne artikkelen forklarer CSS-egenskapene relatert til boksmodellen.

Du kan lære om bruksområder og syntaks for egenskaper som bredde, høyde og margin.

YouTube Video

HTML for 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>

Relatert til boksmodellen

`width`- og `height`-egenskaper

 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-egenskapene er CSS-egenskaper som brukes til å angi bredden og høyden til et element. Disse brukes spesielt når man angir størrelsen på blokk-elementer, bilder, videoer osv.

I width-height-fixed-klassen er faste verdier spesifisert for bredde og høyde.
I width-height-percent-klassen er prosentverdier spesifisert for bredde og høyde.

Verdier som kan spesifiseres

width- og height-egenskapene kan ha følgende verdier.

auto: Standardstørrelse. Justerer størrelsen automatisk i forhold til det overordnede elementet.
Faste verdier: Angir en fast bredde i piksler, prosent eller relative enheter.(ex: 100px, 50%, 10rem)
- For eksempel, 250px setter elementets størrelse til 250 piksler, og 50% setter det til 50% av det overordnede elementets størrelse.
min-content: Passer til innholdets minste størrelse.
max-content: Passer til innholdets største størrelse.
fit-content: Justerer elementets størrelse passende basert på innholdets størrelse.

Spesifisere minimums- og maksimumsverdier

min-width, max-width, min-height og max-height er CSS-egenskaper som brukes til å angi størrelsesbegrensninger for bredden og høyden på et element. Ved å bruke disse kan du sikre at et element holder seg innenfor et bestemt størrelsesområde.

`margin`- og `padding`-egenskaper

 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 egenskaper brukt i CSS for å kontrollere ytre og indre avstander på elementer innenfor boksmodellen. De brukes til å justere avstanden mellom elementer og rydde opp i utseendet.

I margin-padding-klassen er både margin og padding spesifisert. Det er margin-plass utenfor den solide rammen og padding-plass innenfor den solide rammen.
I margin-only-klassen er kun margin spesifisert. Du kan se at det blå området er mindre sammenlignet med margin-padding-klassen fordi det ikke er padding-plass innenfor den solide rammen.
I no-margin-klassen er både margin og padding satt til 0. Du kan se at det blå området er skjøvet helt til venstre fordi det ikke er margin-plass utenfor den solide rammen.

På denne måten setter margin-egenskapen den ytre plassen til et element og justerer avstanden mellom elementer. På den annen side setter padding-egenskapen den indre plassen til et element og justerer avstanden mellom innholdet og rammen.

`margin`-egenskap

Margin-egenskapen setter den ytre plassen (marginen) til et element. Den brukes til å lage plass mellom tilstøtende elementer. Følgende verdier kan spesifiseres:.
Faste verdier: Du kan spesifisere størrelsen på marginen i piksler, relative enheter (em, rem) eller prosent.(ex: 10px, 1em, 5%)
auto: Nyttig for å sentrere blokkelementer. Når bredden er spesifisert, justerer den automatisk marginene på venstre og høyre side.
Positive og negative verdier: Positive verdier utvider plassen, mens negative verdier bringer elementer nærmere hverandre.

Forkortet notasjon:

 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-egenskapen kan ta fra én til fire verdier.

Én verdi: Gjelder for alle sider.
To verdier: Den første gjelder topp og bunn, den andre gjelder venstre og høyre.
Tre verdier: Gjelder i rekkefølgen topp, venstre og høyre, bunn.
Fire verdier: Gjelder i rekkefølgen topp, høyre, bunn, venstre.

`padding`-egenskap

Funksjon:

padding-egenskapen setter det indre rommet (padding) til et element. Den brukes til å lage mellomrom mellom innholdet og rammen til et element. Følgende verdier kan spesifiseres:.
Faste verdier: Angir størrelsen på paddingen.(ex: 10px, 1em, 5%)
Negative verdier kan ikke brukes. Padding-verdier kan bare spesifiseres som positive tall.

Forkortet notasjon:

 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}

Akkurat som med margin, kan du spesifisere fra én til fire verdier.

Én verdi: Gjelder for alle sider.
To verdier: Den første gjelder topp og bunn, den andre gjelder venstre og høyre.
Tre verdier: Gjelder i rekkefølgen topp, venstre og høyre, bunn.
Fire verdier: Gjelder i rekkefølgen topp, høyre, bunn, venstre.

`box-sizing`-egenskap

 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-egenskap som kontrollerer hvordan bredden og høyden til et element beregnes.

I content-box-klassen er bredden på elementet 360px. width er 300px, med venstre og høyre padding som til sammen utgjør 40px og venstre og høyre border som til sammen utgjør 20px, hvilket gir en total på 360px.
I border-box er bredden på elementet 300px. padding og border er inkludert i den spesifiserte width.

Verdier for `box-sizing`

Det er hovedsakelig to verdier for box-sizing: content-box og border-box, der content-box er standardverdien.

`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 spesifisert, angis bare innholdsbredden og høyden av width og height. padding og border legges til for å bestemme den endelige størrelsen. Med andre ord refererer width og height kun til innholdsområdet.

I dette eksempelet er den spesifiserte width 200px, men med breddene for venstre og høyre padding og border lagt til, blir den endelige faktiske bredden på 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 spesifisert, beregnes width og height inkludert padding og border. Med andre ord blir den spesifiserte width og height den totale størrelsen på innholdet, padding og border.

I dette tilfellet er den spesifiserte width 200px, og siden padding og border også er inkludert, forblir den endelige faktiske bredden på elementet 200px. padding og border justeres innenfor det.

Sammendrag av forskjellene i `box-sizing`

Egenskap	Beregningsmetode	Faktisk breddeberegning
`content-box` (standard)	`width` refererer kun til innholdet. `padding` og `border` legges til.	`width` + `padding` + `border`
`border-box`	`width` er alt (inkluderer innhold, `padding`, `border`)	Den spesifiserte `width` brukes som den er.

Fordeler med `box-sizing`

Bruk av border-box stabiliserer oppsettet. Å legge til padding eller border endrer ikke den spesifiserte størrelsen, noe som forenkler beregningene.
Det er nyttig når man lager fleksible oppsett. I responsive design eller komplekse oppsett brukes border-box ofte for å unngå uventede størrelsesvariasjoner.

Hvordan bruke `border-box` globalt

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

Ved å sette CSS på denne måten kan du bruke border-box på alle elementer for å unngå uventede størrelsesendringer.

Sammendrag

box-sizing kontrollerer om padding og border inkluderes i et elements width og height.
Bruk av border-box gjør størrelsesberegninger enklere og er godt egnet for responsivt design.

`visibility`-egenskapen

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

visibility-egenskapen brukes for å vise eller skjule elementer, men i motsetning til display-egenskapen påvirker den oppsettet selv om elementet er skjult. Den skjuler bare elementet, men beholder dets originale posisjon og størrelse uten å påvirke oppsettet til andre elementer.

Grunnleggende Syntax

1element {
2    visibility: value;
3}

verdi: En verdi som spesifiserer synligheten til elementet.

Verdityper

visibility-egenskapen kan settes til følgende verdier:.

`visible`

Ved å spesifisere visible vises elementet. Dette er standardverdien.

`hidden`

Ved å spesifisere hidden skjules elementet, men oppsettplassen beholdes.

`collapse`

collapse brukes hovedsakelig for tabellrader eller kolonner. Elementet blir usynlig, og plassen det opptar ignoreres også. Når det brukes på tabellrader eller kolonner, fjernes de skjulte radene eller kolonnene helt fra oppsettet.
Men når det brukes på vanlige blokk- eller inline-elementer, bortsett fra tabellelementer, oppfører det seg som hidden og oppsettplassen beholdes.

`inherit`

Ved å spesifisere inherit vil visibility-egenskapens verdi arves fra overordnet element.

Forskjeller mellom `visibility` og `display`

Det er følgende forskjeller mellom visibility og display.

visibility: hidden skjuler elementet, men beholder dets plass og oppsett.
display: none fjerner elementet helt fra oppsettet, slik at andre elementer kan fylle plassen.

Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.

YouTube Video

CSS-egenskaper for kodedisplay og sitater Bakgrunnsrelaterte CSS-egenskaper

CSS-egenskaper relatert til boksmodellen

YouTube Video

HTML for Forhåndsvisning

Relatert til boksmodellen

width- og height-egenskaper

Verdier som kan spesifiseres

Spesifisere minimums- og maksimumsverdier

margin- og padding-egenskaper

margin-egenskap

Forkortet notasjon:

padding-egenskap

Funksjon:

Forkortet notasjon:

box-sizing-egenskap

Verdier for box-sizing

content-box

border-box

Sammendrag av forskjellene i box-sizing

Fordeler med box-sizing

Hvordan bruke border-box globalt

Sammendrag

visibility-egenskapen

Grunnleggende Syntax

Verdityper

visible

hidden

collapse

inherit

Forskjeller mellom visibility og display

YouTube Video

`width`- og `height`-egenskaper

`margin`- og `padding`-egenskaper

`margin`-egenskap

`padding`-egenskap

`box-sizing`-egenskap

Verdier for `box-sizing`

`content-box`

`border-box`

Sammendrag av forskjellene i `box-sizing`

Fordeler med `box-sizing`

Hvordan bruke `border-box` globalt

`visibility`-egenskapen

`visible`

`hidden`

`collapse`

`inherit`

Forskjeller mellom `visibility` og `display`