CSS-egenskaper relaterade till boxmodellen

Articles

Den här artikeln förklarar CSS-egenskaperna som är relaterade till boxmodellen.

Du kan lära dig om användningsområden och syntax för egenskaper som width, height och margin.

YouTube Video

HTML för förhandsgranskning

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>

Relaterat till boxmodellen

`width`- och `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- och height-egenskaperna är CSS-egenskaper som används för att specificera bredden och höjden på ett element. Dessa används särskilt när man sätter storleken på blockelement, bilder, videoklipp, etc.

I klassen width-height-fixed specificeras fasta värden för bredd och höjd.
I klassen width-height-percent specificeras procentvärden för bredd och höjd.

Värden som kan specificeras

width- och height-egenskaperna kan ha följande värden.

auto: Standardstorlek. Justerar automatiskt storleken i förhållande till det överordnade elementet.
Fasta värden: Specificerar en fast bredd i pixlar, procent eller relativa enheter.(ex: 100px, 50%, 10rem)
- Till exempel ställer 250px in elementets storlek till 250 pixlar, och 50% ställer in den till 50% av det överordnade elementets storlek.
min-content: Passar in på innehållets minimistorlek.
max-content: Passar in på innehållets maximala storlek.
fit-content: Justerar elementets storlek lämpligt baserat på innehållets storlek.

Specificera minimala och maximala värden

min-width, max-width, min-height och max-height är CSS-egenskaper som används för att sätta storleksbegränsningar för ett elements bredd och höjd. Genom att använda dessa kan du säkerställa att ett element håller sig inom ett specifikt storleksintervall.

`margin`- och `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 och padding är egenskaper som används i CSS för att kontrollera det yttre och inre avståndet mellan element inom boxmodellen. De används för att justera mellanrummet mellan element och för att snygga till utseendet.

I klassen margin-padding specificeras både margin och padding. Det finns margin-utrymme utanför den solida ramen och padding-utrymme innanför den solida ramen.
I klassen margin-only specificeras endast margin. Du kan se att det blå området är mindre jämfört med klassen margin-padding eftersom det inte finns något padding-utrymme innanför den solida ramen.
I klassen no-margin är både margin och padding satta till 0. Du kan se att det blå området trycks hela vägen till vänster eftersom det inte finns något margin-utrymme utanför den solida ramen.

På detta sätt ställer margin-egenskapen in ett elements yttre utrymme och justerar avståndet mellan element. Å andra sidan ställer padding-egenskapen in ett elements inre utrymme och justerar avståndet mellan innehållet och ramen.

`margin`-egenskap

margin-egenskapen ställer in ett elements yttre utrymme (margin). Den används för att skapa avstånd mellan intilliggande element. Följande värden kan specificeras:.
Fasta värden: Du kan ange marginalens storlek i pixlar, relativa enheter (em, rem) eller procent.(ex: 10px, 1em, 5%)
auto: Användbart för att centrera blockelement. När bredden anges justeras de vänstra och högra marginalerna automatiskt.
Positiva och negativa värden: Positiva värden utökar avståndet, medan negativa värden för elementen närmare varandra.

Kort skrivsätt:

 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 från ett till fyra värden.

Ett värde: Gäller för alla sidor.
Två värden: Det första gäller för toppen och botten, det andra för vänster och höger.
Tre värden: Gäller i ordningen topp, vänster och höger, botten.
Fyra värden: Gäller i ordningen topp, höger, botten, vänster.

`padding`-egenskapen

Funktion:

Padding-egenskapen ställer in elementets inre utrymme (padding). Den används för att skapa mellanrum mellan innehållet och kanten på ett element. Följande värden kan specificeras:.
Fasta värden: Anger storleken på padding.(ex: 10px, 1em, 5%)
Negativa värden kan inte användas. Paddingvärden kan bara anges som positiva tal.

Kort skrivsätt:

 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}

Precis som för margin kan du ange ett till fyra värden.

Ett värde: Gäller för alla sidor.
Två värden: Det första gäller för toppen och botten, det andra för vänster och höger.
Tre värden: Gäller i ordningen topp, vänster och höger, botten.
Fyra värden: Gäller i ordningen topp, höger, botten, vänster.

`box-sizing`-egenskapen

 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 är en CSS-egenskap som styr hur bredden och höjden på ett element beräknas.

I content-box-klassen är elementets bredd 360px. Width är 300px, med en total padding på vänster och höger som blir 40px och en total border på vänster och höger som blir 20px, vilket ger totalt 360px.
I border-box är elementets bredd 300px. Padding och border inkluderas i den angivna width.

Värden för `box-sizing`

Det finns huvudsakligen två värden för box-sizing: content-box och border-box, där content-box är standardvärdet.

`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 anges, ställs endast innehållets bredd och höjd in med width och height. Padding och border läggs till för att avgöra den slutliga storleken. Med andra ord hänvisar width och height endast till innehållsområdet.

I detta exempel är den specificerade width 200px, men med bredden av vänster och höger padding och border tillagd blir den slutliga faktiska bredden för 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 anges beräknas width och height inklusive padding och border. Med andra ord blir den angivna width och height den totala storleken på innehållet, padding och border.

I detta fall är den specificerade width 200px, och eftersom padding och border också inkluderas förblir elementets slutliga faktiska bredd 200px. padding och border justeras inom det.

Sammanfattning av skillnader i `box-sizing`

Egenskap	Beräkningsmetod	Faktisk breddberäkning
`content-box` (standard)	`width` hänvisar endast till innehållet. `padding` och `border` läggs till.	`width` + `padding` + `border`
`border-box`	`width` är allt (inkluderar innehåll, `padding`, `border`)	Den specificerade `width` används som den är.

Fördelar med `box-sizing`

Att använda border-box stabiliserar layouten. Att lägga till padding eller border ändrar inte den specificerade storleken, vilket gör beräkningarna enkla.
Det är användbart när man skapar flexibla layouter. I responsiva designer eller komplexa layouter används border-box ofta för att undvika oväntade storleksförändringar.

Så här använder du `border-box` globalt

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

Genom att ställa in CSS på detta sätt kan du använda border-box på alla element för att undvika oväntade storleksändringar.

Sammanfattning

box-sizing styr om padding och border är inkluderade i ett elements width och height.
Att använda border-box gör storleksberäkningar enklare och är lämpligt för responsiv design.

`visibility`-egenskap

 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 används för att visa eller dölja element, men till skillnad från display-egenskapen påverkar den layouten även om elementet är dolt. Den döljer bara elementet, behåller dess ursprungliga position och storlek utan att påverka layouten för andra element.

Grundläggande syntax

1element {
2    visibility: value;
3}

value: Ett värde som specificerar synligheten för elementet.

Värdetyper

visibility-egenskapen kan ställas in på följande värden:.

`visible`

Att specificera visible kommer att visa elementet. Det här är standardvärdet.

`hidden`

Att specificera hidden döljer elementet, men dess layoututrymme kommer att reserveras.

`collapse`

collapse används huvudsakligen för tabellrader eller kolumner. Elementet blir osynligt och dess utrymme ignoreras också. När det appliceras på tabellrader eller kolumner tas de dolda raderna eller kolumnerna helt bort från layouten.
Men när det används på vanliga block- eller inline-element, förutom table-element, beter det sig som hidden och layoututrymmet behålls.

`inherit`

Att ange inherit innebär att värdet för visibility egenskapen ärvs från förälderelementet.

Skillnader mellan `visibility` och `display`

Det finns följande skillnader mellan visibility och display.

visibility: hidden döljer elementet men behåller dess utrymme och layout.
display: none tar helt bort elementet från layouten, vilket tillåter andra element att fylla det utrymmet.

Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.

YouTube Video

CSS-egenskaper för kodvisning och citat Bakgrundsrelaterade CSS-egenskaper

CSS-egenskaper relaterade till boxmodellen

YouTube Video

HTML för förhandsgranskning

Relaterat till boxmodellen

width- och height-egenskaper

Värden som kan specificeras

Specificera minimala och maximala värden

margin- och padding-egenskaper

margin-egenskap

Kort skrivsätt:

padding-egenskapen

Funktion:

Kort skrivsätt:

box-sizing-egenskapen

Värden för box-sizing

content-box

border-box

Sammanfattning av skillnader i box-sizing

Fördelar med box-sizing

Så här använder du border-box globalt

Sammanfattning

visibility-egenskap

Grundläggande syntax

Värdetyper

visible

hidden

collapse

inherit

Skillnader mellan visibility och display

YouTube Video

`width`- och `height`-egenskaper

`margin`- och `padding`-egenskaper

`margin`-egenskap

`padding`-egenskapen

`box-sizing`-egenskapen

Värden för `box-sizing`

`content-box`

`border-box`

Sammanfattning av skillnader i `box-sizing`

Fördelar med `box-sizing`

Så här använder du `border-box` globalt

`visibility`-egenskap

`visible`

`hidden`

`collapse`

`inherit`

Skillnader mellan `visibility` och `display`