CSS-visningsegenskapen är ett kraftfullt verktyg för webbdesigners. Det låter dig styra layouter på webbplatselement med minimal stil, med enkla värden som är lätta att komma ihåg.
Men vad gör var och en av dessa värden och hur fungerar de? Låt oss ta reda på.
Vad är CSS-visningsegenskapen?
Egenskapen display anger vilken typ av boxrendering som används för HTML-element på en webbsida. Detta resulterar i en mängd olika beteenden, inklusive att inte dyka upp alls. Du kan redigera dessa värden på din webbplats genom stilmallen eller lämpliga CSS-anpassningssektioner i CMS-verktyg som WordPress.
Håll element i linje med CSS-visning: inline
Bredd- och höjdvärden gäller inte för ett element med inline display; innehållet inuti anger dess dimensioner. Inline HTML-element kan sitta sida vid sida med andra element och bete sig som en. Display inline används oftast för text.
<!DOCTYPE html>
<html lang="sv">
<huvud>
<meta teckenuppsättning="utf-8">
<titel>CSS-visningsvärden</title>
<stil>
.i kö {
display: inline;
teckenstorlek: 3rem;
}
#inline-1 {
bakgrundsfärg: gul;
stoppning: 10px 0px 10px 10px;
}
#inline-2 {
bakgrundsfärg: ljusgrön;
stoppning: 10px 10px 10px 0px;
}
</style>
</head>
<kropp>
<h1>CSS Display Inline</h1>
<div klass="i kö" id="inline-1">Det här är text</div>
<div klass="i kö" id="inline-2">med inline-egenskapens värde.</div>
</body>
</html>
Denna HTML-markering och CSS ovan fungerar som ett bra exempel på det inline-visningsvärde. När den används tillsammans kommer detta att visa en enda textrad gjord med två olika HTML-element.
Kontrollera webbplatsens layouter med CSS-visning: blockera
På vissa sätt är visningsblockvärdet motsatsen till inlinevärdet. Höjd- och breddmått kan ställas in, och element med detta värde kan inte sitta bredvid varandra. Exemplet ovan visar två element med blockvärdet. Element med blockvisningsvärdet som standard vid maximal bredd på deras överordnade element.
<!DOCTYPE html>
<html lang="sv">
<huvud>
<meta teckenuppsättning="utf-8">
<titel>CSS-visningsvärden</title>
<stil>
.blockera {
display: block;
teckenstorlek: 3rem;
bredd: passformsinnehåll;
}
#block-1 {
bakgrundsfärg: gul;
stoppning: 10px 10px 10px 10px;
}
#block-2 {
bakgrundsfärg: ljusgrön;
stoppning: 10px 10px 10px 10px;
}
</style>
</head>
<kropp>
<h1>CSS Display Block</h1>
<div klass="blockera" id="block-1">Det här är text</div>
<div klass="blockera" id="block-2">med blockegenskapsvärdet.</div>
</body>
</html>Till skillnad från exemplet med inline-stil delar det här exemplet på visningsblockvärde upp textraderna i två olika rader. Värdet för passningsinnehållsbredd ställer in elementens bredd för att matcha längden på texten.
Side-by-Side HTML-element Med CSS-display: inline-block
CSS-displayens inline-block-värde fungerar precis som ett vanligt inline-värde, bara med möjligheten att lägga till specifika dimensioner. Detta gör det möjligt att skapa rutnätsliknande layouter utan att ha överordnade element på plats. Om vi går tillbaka till föregående exempel, genom att lägga till inline-blockvärdet kan elementen sitta bredvid varandra.
<!DOCTYPE html>
<html lang="sv">
<huvud>
<meta teckenuppsättning="utf-8">
<titel>CSS-visningsvärden</title>
<stil>
.inline-block {
display: inline-block;
teckenstorlek: 3rem;
bredd: passformsinnehåll;
}
#inline-block-1 {
bakgrundsfärg: gul;
stoppning: 10px 10px 10px 10px;
}
#inline-block-2 {
bakgrundsfärg: ljusgrön;
stoppning: 10px 10px 10px 10px;
}
</style>
</head>
<kropp>
<h1>CSS Display Inline-Block (bredduppsättning)</h1>
<div klass="inline-block" id="inline-block-1">Det här är text</div>
<div klass="inline-block" id="inline-block-2">med inline-block-egenskapen
värde.</div>
</body>
</html>
Inline-blockvärdet ser inte mycket annorlunda ut än inlinevärdet. Det är dock viktigt att notera att du kan ställa in dimensionerna för element med detta värde, vilket gör det lättare att arbeta med i vissa fall.
Det enklaste visningsvärdet är "ingen". Detta värde döljer elementet och eventuella underordnade element, tillsammans med marginaler och andra avståndsegenskaper. Element med CSS visar inget värde är fortfarande synliga i webbläsarinspektörer.
Skapa flexibla och responsiva element med CSS-skärm: flex
Display flex är ett av de senaste CSS-layoutlägena. När display flex är på ett överordnat element blir alla element inuti det flexibla CSS-element. Det överordnade elementet i denna konfiguration är en flexbox.
Flexboxar skapar responsiva designs med fördefinierade variabler, som bredd och höjd. Det är värt lära sig om HTML/CSS flexboxar innan du sätter igång.
<!DOCTYPE html>
<html lang="sv">
<huvud>
<meta teckenuppsättning="utf-8">
<titel>CSS-visningsvärden</title>
<stil>
.böja {
display: flex;
teckenstorlek: 3rem;
}
#flex-1 {
bakgrundsfärg: gul;
bredd: 40%;
höjd: 100px;
}
#flex-2 {
bakgrundsfärg: ljusgrön;
bredd: 25%;
höjd: 100px;
}
#flex-3 {
bakgrundsfärg: ljusblå;
bredd: 35%;
höjd: 100px;
}
</style>
</head>
<kropp>
<h1>CSS Display Flex</h1>
<div klass="böja">
<div id="flex-1"></div>
<div id="flex-2"></div>
<div id="flex-3"></div>
</div>
</body>
</html>Placera Flexboxar sida vid sida Med display: inline-flex
Inline-flex beter sig precis som en vanlig flexbox, med den extra fördelen att elementet kan sitta bredvid andra element.
<!DOCTYPE html>
<html lang="sv">
<huvud>
<meta teckenuppsättning="utf-8">
<titel>CSS-visningsvärden</title>
<stil>
.inline-flex {
display: inline-flex;
teckenstorlek: 3rem;
bredd: 49.8%;
}
#inline-flex-1 {
bakgrundsfärg: gul;
bredd: 40%;
höjd: 100px;
}
#inline-flex-2 {
bakgrundsfärg: ljusgrön;
bredd: 25%;
höjd: 100px;
}
#inline-flex-3 {
bakgrundsfärg: ljusblå;
bredd: 35%;
höjd: 100px;
}
</style>
</head>
<kropp>
<h1>CSS Display Inline-Flex</h1>
<div klass="inline-flex">
<div id="inline-flex-1"></div>
<div id="inline-flex-2"></div>
<div id="inline-flex-3"></div>
</div>
<div klass="inline-flex">
<div id="inline-flex-1"></div>
<div id="inline-flex-2"></div>
<div id="inline-flex-3"></div>
</div>
</body>
</html>Skapa komplexa tabeller med CSS-skärm: tabell
Visningstabellens värde påminner om äldre dagar med webbdesign. Även om de flesta webbplatser inte använder tabeller för sina layouter idag, är de fortfarande giltiga för att visa data och innehåll i ett läsbart format.
Om du lägger till tabellvärdet i ett HTML-element kommer det att fungera som ett tabellelement, men du behöver ytterligare värden för att få din tabell att fungera korrekt.
CSS-skärm: tabell-cell
Element med tabellcellvärdet fungerar som individuella celler i huvudtabellen. Och värdena för tabellkolumnen och tabellraderna grupperar dessa individuella celler tillsammans.
CSS-display: tabellrad
Tabellradsvärdet fungerar precis som a
CSS-skärm: tabellkolumn
Tabellkolumnvärdet fungerar på samma sätt som tabellradsvärdet, bara det delar inte upp din tabell. Istället kan du använda det här värdet för att lägga till specifika CSS-regler till de olika kolumner som redan finns.
<!DOCTYPE html>
<html lang="sv">
<huvud>
<meta teckenuppsättning="utf-8">
<titel>CSS-visningsvärden</title>
<stil>
.tabell {
display: tabell;
teckenstorlek: 3rem;
}
.rubrik {
display: table-header-group;
teckenstorlek: 3rem;
}
#kolumn-1 {
display: tabell-kolumn-grupp;
bakgrundsfärg: gul;
}
#kolumn-2 {
display: tabell-kolumn-grupp;
bakgrundsfärg: ljusgrön;
}
#kolumn-3 {
display: tabell-kolumn-grupp;
bakgrundsfärg: ljusblå;
}
#rad-1 {
display: tabell-rad;
}
#rad-2 {
display: tabell-rad;
}
#rad-3 {
display: tabell-rad;
}
#cell {
display: tabell-cell;
stoppning: 10px;
bredd: 20%;
}
</style>
</head>
<kropp>
<h1>CSS-visningstabell</h1>
<div klass="tabell">
<div id="kolumn-1"></div>
<div id="kolumn-2"></div>
<div id="kolumn-3"></div>
<div klass="rubrik">
<div id="cell">namn</div>
<div id="cell">Ålder</div>
<div id="cell">Land</div>
</div>
<div id="rad-1">
<div id="cell">Jeff</div>
<div id="cell">21</div>
<div id="cell">USA</div>
</div>
<div id="rad-2">
<div id="cell">Stämma</div>
<div id="cell">34</div>
<div id="cell">Spanien</div>
</div>
<div id="rad-3">
<div id="cell">Boris</div>
<div id="cell">57</div>
<div id="cell">Singapore</div>
</div>
</div>
</body>
</html>Skapa tabeller sida vid sida med CSS-skärm: inline-tabell
Liksom de andra inline-varianterna vi redan har tittat på, gör inline-table det möjligt att placera tabellelement bredvid andra element.
Bygg responsiva webbplatslayouter med CSS-skärm: rutnät
CSS-visningsrutnätsvärdet liknar tabellvärdet, bara ett rutnäts kolumner och rader kan ha flexibel storlek. Detta gör rutnät idealiska för att skapa huvudlayouten för webbsidor. De lämnar utrymme för sidhuvuden och sidfötter i full bredd samtidigt som de gör det möjligt att ha innehållsområden i olika storlekar.
<!DOCTYPE html>
<html lang="sv">
<huvud>
<meta teckenuppsättning="utf-8">
<titel>CSS-visningsvärden</title>
<stil>
.rutnät {
display: rutnät;
teckenstorlek: 3rem;
rutnät-mall-områden:
'header header header header'
'innehåll i vänster sidofält höger sidofält'
'sidfot sidfot sidfot sidfot';
gap: 10px;
}
#grid-1 {
rutnätsområde: rubrik;
bakgrundsfärg: gul;
höjd: 100px;
stoppning: 20px;
text-align: center;
}
#rutnät 2 {
rutnätsområde: vänster sidofält;
bakgrundsfärg: ljusgrön;
höjd: 200px;
stoppning: 20px;
text-align: center;
}
#grid-3 {
rutnätsområde: innehåll;
bakgrundsfärg: ljusblå;
höjd: 200px;
stoppning: 20px;
text-align: center;
}
#grid-4 {
rutnätsområde: höger sidofält;
bakgrundsfärg: ljusgrön;
höjd: 200px;
stoppning: 20px;
text-align: center;
}
#grid-5 {
rutnätsområde: sidfot;
bakgrundsfärg: gul;
höjd: 100px;
stoppning: 20px;
text-align: center;
}
</style>
</head>
<kropp>
<h1>CSS Display Grid</h1>
<div klass="rutnät">
<div id="rutnät-1">Rubrik</div>
<div id="rutnät 2">Vänster sidofält</div>
<div id="rutnät-3">Innehåll</div>
<div id="rutnät-4">Höger sidofält</div>
<div id="rutnät-5">Sidfot</div>
</div>
</body>
</html>
Galler liknar flexboxar, bara de kan placera element under och bredvid varandra. Egenskapen rutnät-mallområden är avgörande för detta. Som du kan se av koden tar vår sidhuvud och sidfot upp fyra utrymmen i arrayen, eftersom de har full bredd. Sidofälten tar upp en plats vardera, medan innehållet tar två, vilket effektivt delar upp mittraden i rutnätet i tre kolumner.
CSS-skärm: inline-grid
Genom att använda inline-grid-värdet kommer ditt rutnät att sitta bredvid andra element, precis som de andra inline-värdena i den här guiden.
Använder CSS Display för webbdesign
CSS-visningsegenskapen erbjuder ett praktiskt sätt att justera webbplatselementstrukturer utan att behöva ändra HTML-uppmärkning. Detta är idealiskt för dem som använder innehållsleveransplattformar som Shopify eller WordPress, men det kan också vara praktiskt för allmän webbdesign.
