Home-theater-designers
Vlastnost CSS display je mocný nástroj pro webové designéry. Umožňuje vám ovládat rozvržení prvků webových stránek s minimálním stylem, s jednoduchými hodnotami, které si snadno zapamatujete.
Ale co každá z těchto hodnot dělá a jak fungují? Pojďme to zjistit.
VYUŽÍVÁNÍ VIDEA DNE
Co je vlastnost zobrazení CSS?
Vlastnost display určuje typ vykreslování rámečku použitého pro prvky HTML na webové stránce. To má za následek různé chování, včetně toho, že se vůbec neobjeví. Tyto hodnoty můžete upravit na svém webu prostřednictvím šablony stylů nebo příslušných sekcí přizpůsobení CSS v CMS nástroje jako WordPress .
Udržujte prvky v souladu se zobrazením CSS: inline
Hodnoty šířky a výšky se nevztahují na prvek s vloženým zobrazením; obsah uvnitř nastavuje své rozměry. Vložené prvky HTML mohou sedět vedle sebe s jinými prvky a chovat se jako a . Display inline se nejčastěji používá pro 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>
Toto označení HTML a CSS výše slouží jako dobrý příklad zobrazené vložené hodnoty. Při společném použití se zobrazí jeden řádek textu vytvořený se dvěma různými prvky HTML.
kteří levně opravují obrazovky iphone
Ovládání rozvržení webových stránek pomocí zobrazení CSS: blok
V některých ohledech je hodnota bloku zobrazení opakem vložené hodnoty. Rozměry výšky a šířky lze nastavit a prvky s touto hodnotou nemohou sedět vedle sebe. Výše uvedený příklad ukazuje dva prvky s hodnotou bloku. Prvky s hodnotou bloku se standardně zobrazují na maximální šířku jejich nadřazeného prvku.
<!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>Na rozdíl od příkladu stylu inline tento příklad hodnoty bloku zobrazení rozděluje řádky textu na dva různé řádky. Hodnota fit-content width nastavuje šířku prvků tak, aby odpovídala délce textu.
Prvky HTML vedle sebe se zobrazením CSS: inline-block
Hodnota inline-block zobrazení CSS funguje stejně jako běžná vložená hodnota, pouze s možností přidat konkrétní dimenze. To umožňuje vytvářet rozvržení podobná mřížce, aniž byste museli mít rodičovské prvky. Vraťme se k předchozímu příkladu a přidání hodnoty inline-block umožňuje prvkům sedět vedle sebe.
<!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>
Hodnota vloženého bloku se od vložené hodnoty příliš neliší. Je důležité poznamenat, že pomocí této hodnoty můžete nastavit rozměry prvků, což v určitých případech usnadňuje práci.
Skrýt prvky webu se zobrazením CSS: žádné
Nejjednodušší zobrazovaná hodnota je „žádná“. Tato hodnota skryje prvek a všechny podřízené prvky spolu s okraji a dalšími vlastnostmi mezer. Prvky s hodnotou CSS display none jsou stále viditelné v inspektorech prohlížeče.
Vytvářejte flexibilní a citlivé prvky pomocí zobrazení CSS: flex
Display flex je jedním z nejnovějších režimů rozvržení CSS. Když je flex zobrazení na nadřazeném prvku, všechny prvky v něm se stanou flexibilními prvky CSS. Nadřazeným prvkem v této konfiguraci je flexbox.
Flexboxy vytvářejí citlivé návrhy s předdefinovanými proměnnými, jako je šířka a výška. Stojí za to učení o HTML/CSS flexboxech než začnete.
<!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> Umístění Flexboxů vedle sebe S displejem: inline-flex
Inline-flex se chová stejně jako běžný flexbox, s další výhodou prvku, který může sedět vedle jiných prvků.
jak přesunout nainstalované programy na jinou jednotku
<!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>Vytvářejte složité tabulky s CSS zobrazením: tabulka
Hodnota zobrazované tabulky připomíná starší časy designu webových stránek. Zatímco většina webových stránek dnes nepoužívá tabulky pro svá rozvržení, jsou stále platné pro zobrazování dat a obsahu v čitelném formátu.
Přidání hodnoty tabulky do prvku HTML způsobí, že se bude chovat jako prvek tabulky, ale ke správnému fungování tabulky potřebujete další hodnoty.
CSS zobrazení: tabulka-buňka
Prvky s hodnotou buňky tabulky fungují jako samostatné buňky v hlavní tabulce. Hodnoty sloupců tabulky a řádku tabulky seskupují tyto jednotlivé buňky dohromady.
CSS zobrazení: tabulka-řádek
Hodnota řádku tabulky funguje stejně jako prvek HTML
CSS zobrazení: tabulka-sloupec
Hodnota sloupce tabulky funguje podobně jako hodnota řádku tabulky, pouze vaši tabulku nerozdělí. Místo toho můžete tuto hodnotu použít k přidání konkrétních pravidel CSS do různých sloupců, které již existují.
jak zrušit účet paypal
<!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>Vytvářejte vedle sebe tabulky se zobrazením CSS: vložená tabulka
Stejně jako ostatní inline varianty, na které jsme se již podívali, inline-table umožňuje umístit prvky tabulky vedle jiných prvků.
Vytvářejte responzivní rozvržení webových stránek pomocí zobrazení CSS: mřížka
Hodnota mřížky zobrazení CSS je podobná hodnotě tabulky, pouze sloupce a řádky mřížky mohou mít flexibilní velikost. Díky tomu jsou mřížky ideální pro vytváření hlavního rozvržení webových stránek. Nechávají prostor pro záhlaví a zápatí v plné šířce a zároveň umožňují mít oblasti obsahu různých velikostí.
<!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>
Mřížky jsou podobné flexboxům, pouze mohou umístit prvky pod sebe a vedle sebe. Vlastnost grid-template-areas je pro to zásadní. Jak můžete vidět z kódu, naše záhlaví a zápatí zabírají čtyři místa v poli, protože mají plnou šířku. Postranní panely zabírají každý jeden slot, zatímco obsah zabírá dva, což efektivně rozděluje prostřední řádek mřížky na tři sloupce.
CSS zobrazení: inline-grid
Použití hodnoty inline-grid umožní, aby vaše mřížka seděla vedle jiných prvků, stejně jako ostatní vložené hodnoty v této příručce.
Použití CSS Display pro webový design
Vlastnost zobrazení CSS nabízí praktický způsob, jak upravit struktury prvků webu, aniž byste museli měnit označení HTML. To je ideální pro ty, kteří používají platformy pro doručování obsahu, jako je Shopify nebo WordPress, ale může být také užitečné pro obecný webový design.