CSS-visningsegenskaben er et kraftfuldt værktøj for webdesignere. Det giver dig mulighed for at styre layout af hjemmesideelementer med minimal styling med enkle værdier, der er nemme at huske.
Men hvad gør hver af disse værdier, og hvordan fungerer de? Lad os finde ud af det.
Hvad er CSS-displayegenskaben?
Visningsegenskaben angiver typen af boksgengivelse, der bruges til HTML-elementer på en webside. Dette resulterer i en række forskellige adfærdsmønstre, herunder slet ikke at dukke op. Du kan redigere disse værdier på dit websted via typografiarket eller de relevante CSS-tilpasningssektioner i CMS-værktøjer som WordPress.
Hold elementer på linje med CSS-visning: inline
Bredde- og højdeværdier gælder ikke for et element med inline-display; indholdet indeni sætter sine dimensioner. Inline HTML-elementer kan sidde side om side med andre elementer og opføre sig som en. Display inline bruges mest til tekst.
<!DOCTYPE html>
<html lang="da">
<hoved>
<meta tegnsæt="utf-8">
<titel>CSS-visningsværdier
</title>
<stil>
.inline {
display: inline;
skriftstørrelse: 3rem;
}
#inline-1 {
baggrundsfarve: gul;
polstring: 10px 0px 10px 10px;
}
#inline-2 {
baggrundsfarve: lysegrøn;
polstring: 10px 10px 10px 0px;
}
</style>
</head>
<legeme>
<h1>CSS Display Inline</h1>
<div klasse="inline" id="inline-1">Dette er tekst</div>
<div klasse="inline" id="inline-2">med den inline ejendomsværdi.</div>
</body>
</html>
Denne HTML-markering og CSS ovenfor tjener som et godt eksempel på den viste inline-værdi. Når det bruges sammen, vil dette vise en enkelt tekstlinje lavet med to forskellige HTML-elementer.
Styr webstedslayouts med CSS-visning: blok
På nogle måder er displayblokværdien den modsatte af inline-værdien. Højde- og breddemål kan indstilles, og elementer med denne værdi kan ikke sidde ved siden af hinanden. Eksemplet ovenfor viser to elementer med blokværdien. Elementer med blokvisningsværdien som standard ved den maksimale bredde af deres overordnede element.
<!DOCTYPE html>
<html lang="da">
<hoved>
<meta tegnsæt="utf-8">
<titel>CSS-visningsværdier</title>
<stil>
.blok {
display: blok;
skriftstørrelse: 3rem;
bredde: pasform-indhold;
}
#blok-1 {
baggrundsfarve: gul;
polstring: 10px 10px 10px 10px;
}
#blok-2 {
baggrundsfarve: lysegrøn;
polstring: 10px 10px 10px 10px;
}
</style>
</head>
<legeme>
<h1>CSS-skærmblok</h1>
<div klasse="blok" id="blok-1">Dette er tekst</div>
<div klasse="blok" id="blok-2">med blokegenskabsværdien.</div>
</body>
</html>I modsætning til eksemplet med inline-stil opdeler dette eksempel på visningsblokværdier tekstlinjerne i to forskellige linjer. Tilpasningsindholdsbreddeværdien indstiller elementernes bredde til at matche tekstens længde.
Side-by-side HTML-elementer Med CSS-display: inline-blok
CSS display inline-blok værdien fungerer ligesom en almindelig inline værdi, kun med mulighed for at tilføje specifikke dimensioner. Dette gør det muligt at skabe gitterlignende layout uden at have overordnede elementer på plads. Går vi tilbage til det forrige eksempel, vil tilføjelse af inline-blokværdien gøre det muligt for elementerne at sidde ved siden af hinanden.
<!DOCTYPE html>
<html lang="da">
<hoved>
<meta tegnsæt="utf-8">
<titel>CSS-visningsværdier</title>
<stil>
.inline-blok {
display: inline-blok;
skriftstørrelse: 3rem;
bredde: pasform-indhold;
}
#inline-blok-1 {
baggrundsfarve: gul;
polstring: 10px 10px 10px 10px;
}
#inline-blok-2 {
baggrundsfarve: lysegrøn;
polstring: 10px 10px 10px 10px;
}
</style>
</head>
<legeme>
<h1>CSS Display Inline-Block (breddesæt)</h1>
<div klasse="inline-blok" id="inline-blok-1">Dette er tekst</div>
<div klasse="inline-blok" id="inline-blok-2">med inline-blok-egenskaben
værdi.</div>
</body>
</html>
Den inline-blok-værdi ser ikke meget anderledes ud fra den inline-værdi. Det er dog vigtigt at bemærke, at du kan indstille dimensionerne på elementer med denne værdi, hvilket gør det lettere at arbejde med i visse tilfælde.
Den enkleste visningsværdi er "ingen". Denne værdi skjuler elementet og eventuelle underordnede elementer sammen med margener og andre afstandsegenskaber. Elementer med CSS viser ingen værdi er stadig synlige i browserinspektører.
Opret fleksible og responsive elementer med CSS-skærm: flex
Display flex er en af de nyeste CSS-layouttilstande. Når display flex er på et overordnet element, bliver alle elementer inde i det fleksible CSS-elementer. Det overordnede element i denne konfiguration er en flexbox.
Flexboxes skaber responsive designs med foruddefinerede variabler som bredde og højde. Det er værd lære om HTML/CSS flexboxes før du går i gang.
<!DOCTYPE html>
<html lang="da">
<hoved>
<meta tegnsæt="utf-8">
<titel>CSS-visningsværdier</title>
<stil>
.flex {
display: flex;
skriftstørrelse: 3rem;
}
#flex-1 {
baggrundsfarve: gul;
bredde: 40%;
højde: 100px;
}
#flex-2 {
baggrundsfarve: lysegrøn;
bredde: 25%;
højde: 100px;
}
#flex-3 {
baggrundsfarve: lyseblå;
bredde: 35%;
højde: 100px;
}
</style>
</head>
<legeme>
<h1>CSS Display Flex</h1>
<div klasse="bøje">
<div id="flex-1"></div>
<div id="flex-2"></div>
<div id="flex-3"></div>
</div>
</body>
</html>Placer Flexboxes Side-by-Side Med display: inline-flex
Inline-flex opfører sig ligesom en almindelig flexbox, med den ekstra fordel, at elementet kan sidde ved siden af andre elementer.
<!DOCTYPE html>
<html lang="da">
<hoved>
<meta tegnsæt="utf-8">
<titel>CSS-visningsværdier</title>
<stil>
.inline-flex {
display: inline-flex;
skriftstørrelse: 3rem;
bredde: 49.8%;
}
#inline-flex-1 {
baggrundsfarve: gul;
bredde: 40%;
højde: 100px;
}
#inline-flex-2 {
baggrundsfarve: lysegrøn;
bredde: 25%;
højde: 100px;
}
#inline-flex-3 {
baggrundsfarve: lyseblå;
bredde: 35%;
højde: 100px;
}
</style>
</head>
<legeme>
<h1>CSS Display Inline-Flex</h1>
<div klasse="inline-flex">
<div id="inline-flex-1"></div>
<div id="inline-flex-2"></div>
<div id="inline-flex-3"></div>
</div>
<div klasse="inline-flex">
<div id="inline-flex-1"></div>
<div id="inline-flex-2"></div>
<div id="inline-flex-3"></div>
</div>
</body>
</html>Opret komplekse tabeller med CSS-skærm: tabel
Visningstabelværdien minder om ældre dages hjemmesidedesign. Selvom de fleste websteder ikke bruger tabeller til deres layout i dag, er de stadig gyldige til at vise data og indhold i et læsbart format.
Tilføjelse af tabelværdien til et HTML-element vil få det til at fungere som et tabelelement, men du har brug for yderligere værdier for at få din tabel til at fungere korrekt.
CSS-skærm: tabel-celle
Elementer med tabelcelleværdien fungerer som individuelle celler i hovedtabellen. Og værdierne for tabelkolonne og tabelrækker grupperer disse individuelle celler sammen.
CSS-skærm: tabel-række
Tabelrækkeværdien fungerer ligesom en
CSS-skærm: tabel-kolonne
Tabelkolonneværdien fungerer på samme måde som tabelrækkeværdien, men den deler ikke din tabel op. I stedet kan du bruge denne værdi til at tilføje specifikke CSS-regler til de forskellige kolonner, der allerede findes.
<!DOCTYPE html>
<html lang="da">
<hoved>
<meta tegnsæt="utf-8">
<titel>CSS-visningsværdier</title>
<stil>
.bord {
display: tabel;
skriftstørrelse: 3rem;
}
.header {
display: tabel-header-gruppe;
skriftstørrelse: 3rem;
}
#kolonne-1 {
display: tabel-kolonne-gruppe;
baggrundsfarve: gul;
}
#kolonne-2 {
display: tabel-kolonne-gruppe;
baggrundsfarve: lysegrøn;
}
#kolonne-3 {
display: tabel-kolonne-gruppe;
baggrundsfarve: lyseblå;
}
#række-1 {
display: tabel-række;
}
#række-2 {
display: tabel-række;
}
#række-3 {
display: tabel-række;
}
#celle {
display: tabel-celle;
polstring: 10px;
bredde: 20%;
}
</style>
</head>
<legeme>
<h1>CSS-skærmtabel</h1>
<div klasse="bord">
<div id="kolonne-1"></div>
<div id="kolonne-2"></div>
<div id="kolonne-3"></div>
<div klasse="header">
<div id="celle">Navn</div>
<div id="celle">Alder</div>
<div id="celle">Land</div>
</div>
<div id="række-1">
<div id="celle">Jeff</div>
<div id="celle">21</div>
<div id="celle">USA</div>
</div>
<div id="række-2">
<div id="celle">Sagsøge</div>
<div id="celle">34</div>
<div id="celle">Spanien</div>
</div>
<div id="række-3">
<div id="celle">Boris</div>
<div id="celle">57</div>
<div id="celle">Singapore</div>
</div>
</div>
</body>
</html>Opret side-by-side-tabeller med CSS-skærm: inline-tabel
Ligesom de andre inline-varianter, vi allerede har set på, gør inline-table det muligt at placere tabelelementer ved siden af andre elementer.
Byg responsive hjemmesidelayouts med CSS-skærm: gitter
CSS-visningsgitteretsværdien ligner tabelværdien, kun et gitters kolonner og rækker kan have fleksibel størrelse. Dette gør gitter ideelle til at skabe hovedlayoutet til websider. De giver plads til sidehoveder og sidefødder i fuld bredde, samtidig med at de gør det muligt at have indholdsområder i forskellige størrelser.
<!DOCTYPE html>
<html lang="da">
<hoved>
<meta tegnsæt="utf-8">
<titel>CSS-visningsværdier</title>
<stil>
.gitter {
display: gitter;
skriftstørrelse: 3rem;
gitter-skabelon-områder:
'header header header header'
'indhold i venstre sidebjælke højre sidebjælke'
'footer footer footer footer';
mellemrum: 10px;
}
#gitter-1 {
gitter-område: overskrift;
baggrundsfarve: gul;
højde: 100px;
polstring: 20px;
tekst-align: center;
}
#gitter-2 {
gitterområde: venstre sidebjælke;
baggrundsfarve: lysegrøn;
højde: 200px;
polstring: 20px;
tekst-align: center;
}
#gitter-3 {
grid-område: indhold;
baggrundsfarve: lyseblå;
højde: 200px;
polstring: 20px;
tekst-align: center;
}
#gitter-4 {
gitterområde: højre sidebjælke;
baggrundsfarve: lysegrøn;
højde: 200px;
polstring: 20px;
tekst-align: center;
}
#gitter-5 {
gitter-område: sidefod;
baggrundsfarve: gul;
højde: 100px;
polstring: 20px;
tekst-align: center;
}
</style>
</head>
<legeme>
<h1>CSS Display Grid</h1>
<div klasse="gitter">
<div id="gitter-1">Header</div>
<div id="gitter-2">Venstre sidebjælke</div>
<div id="gitter-3">Indhold</div>
<div id="gitter-4">Højre sidebjælke</div>
<div id="gitter-5">Sidefod</div>
</div>
</body>
</html>
Grids ligner flexboxes, kun de kan placere elementer under og ved siden af hinanden. Ejendommen med gitter-skabelon-områder er afgørende for dette. Som du kan se fra koden, fylder vores sidehoved og sidefod fire pladser i arrayet, da de er i fuld bredde. Sidebjælkerne fylder en plads hver, mens indholdet tager to, hvilket effektivt deler den midterste række af gitteret i tre kolonner.
CSS-skærm: inline-gitter
Brug af inline-gitterværdien vil gøre det muligt for dit gitter at sidde ved siden af andre elementer, ligesom de andre inline-værdier i denne vejledning.
Brug af CSS Display til webdesign
CSS-visningsegenskaben tilbyder en praktisk måde at justere webstedselementstrukturer på uden at skulle ændre HTML-markering. Dette er ideelt for dem, der bruger indholdsleveringsplatforme som Shopify eller WordPress, men det kan også være praktisk til generelt webdesign.
