Använda CSS-skärm för att styra webbplatslayouter

Använda CSS-skärm för att styra webbplatslayouter

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å.





MAKEUSE AV DAGENS VIDEO

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

  text med css inline-värde

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="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.inline {
display: inline;
font-size: 3rem;
}
#inline-1 {
background-color: yellow;
padding: 10px 0px 10px 10px;
}
#inline-2 {
background-color: lightgreen;
padding: 10px 10px 10px 0px;
}
</style>
</head>
<body>
<h1>CSS Display Inline</h1>
<div class="inline" id="inline-1">This is text</div>
<div class="inline" id="inline-2">with the inline property value.</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.



trådlöst tangentbord med pekplatta för mac

Kontrollera webbplatsens layouter med CSS-visning: blockera

  element med css-visningsblock

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="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.block {
display: block;
font-size: 3rem;
width: fit-content;
}
#block-1 {
background-color: yellow;
padding: 10px 10px 10px 10px;
}
#block-2 {
background-color: lightgreen;
padding: 10px 10px 10px 10px;
}
</style>
</head>
<body>
<h1>CSS Display Block</h1>
<div class="block" id="block-1">This is text</div>
<div class="block" id="block-2">with the block property value.</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

  html-element med css inline-block-värde

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="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.inline-block {
display: inline-block;
font-size: 3rem;
width: fit-content;
}
#inline-block-1 {
background-color: yellow;
padding: 10px 10px 10px 10px;
}
#inline-block-2 {
background-color: lightgreen;
padding: 10px 10px 10px 10px;
}
</style>
</head>
<body>
<h1>CSS Display Inline-Block (width set)</h1>
<div class="inline-block" id="inline-block-1">This is text</div>
<div class="inline-block" id="inline-block-2">with the inline-block property
value.</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.





Dölj webbplatselement med CSS-visning: inga

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

  css display flexbox

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="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.flex {
display: flex;
font-size: 3rem;
}
#flex-1 {
background-color: yellow;
width: 40%;
height: 100px;
}
#flex-2 {
background-color: lightgreen;
width: 25%;
height: 100px;
}
#flex-3 {
background-color: lightblue;
width: 35%;
height: 100px;
}
</style>
</head>
<body>
<h1>CSS Display Flex</h1>
<div class="flex">
<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

  css display flexbox med inline värde

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="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.inline-flex {
display: inline-flex;
font-size: 3rem;
width: 49.8%;
}
#inline-flex-1 {
background-color: yellow;
width: 40%;
height: 100px;
}
#inline-flex-2 {
background-color: lightgreen;
width: 25%;
height: 100px;
}
#inline-flex-3 {
background-color: lightblue;
width: 35%;
height: 100px;
}
</style>
</head>
<body>
<h1>CSS Display Inline-Flex</h1>
<div class="inline-flex">
<div id="inline-flex-1"></div>
<div id="inline-flex-2"></div>
<div id="inline-flex-3"></div>
</div>
<div class="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

  grundläggande html-tabell gjord med css

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 ett HTML-element. Som förälder till element med tabellcellvärdet kommer den att dela upp din tabell i horisontella rader.

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="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.table {
display: table;
font-size: 3rem;
}
.header {
display: table-header-group;
font-size: 3rem;
}
#column-1 {
display: table-column-group;
background-color: yellow;
}
#column-2 {
display: table-column-group;
background-color: lightgreen;
}
#column-3 {
display: table-column-group;
background-color: lightblue;
}
#row-1 {
display: table-row;
}
#row-2 {
display: table-row;
}
#row-3 {
display: table-row;
}
#cell {
display: table-cell;
padding: 10px;
width: 20%;
}
</style>
</head>
<body>
<h1>CSS Display Table</h1>
<div class="table">
<div id="column-1"></div>
<div id="column-2"></div>
<div id="column-3"></div>
<div class="header">
<div id="cell">Name</div>
<div id="cell">Age</div>
<div id="cell">Country</div>
</div>
<div id="row-1">
<div id="cell">Jeff</div>
<div id="cell">21</div>
<div id="cell">USA</div>
</div>
<div id="row-2">
<div id="cell">Sue</div>
<div id="cell">34</div>
<div id="cell">Spain</div>
</div>
<div id="row-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-element med rutnätsvärde

CSS-visningsrutnätsvärdet liknar tabellvärdet, endast 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="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.grid {
display: grid;
font-size: 3rem;
grid-template-areas:
'header header header header'
'left-sidebar content content right-sidebar'
'footer footer footer footer';
gap: 10px;
}
#grid-1 {
grid-area: header;
background-color: yellow;
height: 100px;
padding: 20px;
text-align: center;
}
#grid-2 {
grid-area: left-sidebar;
background-color: lightgreen;
height: 200px;
padding: 20px;
text-align: center;
}
#grid-3 {
grid-area: content;
background-color: lightblue;
height: 200px;
padding: 20px;
text-align: center;
}
#grid-4 {
grid-area: right-sidebar;
background-color: lightgreen;
height: 200px;
padding: 20px;
text-align: center;
}
#grid-5 {
grid-area: footer;
background-color: yellow;
height: 100px;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<h1>CSS Display Grid</h1>
<div class="grid">
<div id="grid-1">Header</div>
<div id="grid-2">Left Sidebar</div>
<div id="grid-3">Content</div>
<div id="grid-4">Right Sidebar</div>
<div id="grid-5">Footer</div>
</div>
</body>
</html>

Galler liknar flexboxar, bara de kan placera element under och bredvid varandra. Fastigheten 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 den mellersta raden 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.