Home-theater-designers
Свойството CSS display е мощен инструмент за уеб дизайнери. Позволява ви да контролирате оформлението на елементите на уебсайта с минимален стил, с прости стойности, които са лесни за запомняне.
Но какво прави всяка от тези стойности и как работят? Нека разберем.
MAKEUSEOF ВИДЕО НА ДЕНЯ
Какво представлява свойството CSS display?
Свойството display указва типа изобразяване на полето, използвано за HTML елементи на уеб страница. Това води до различни поведения, включително не се показват изобщо. Можете да редактирате тези стойности на уебсайта си чрез стиловия лист или съответните секции за персонализиране на CSS в CMS инструменти като WordPress .
Поддържайте елементите в съответствие с CSS дисплей: вграден
Стойностите за ширина и височина не се прилагат за елемент с вграден дисплей; съдържанието вътре определя неговите измерения. Вградените HTML елементи могат да стоят един до друг с други елементи, като се държат като a . Display inline се използва най-често за текст.
<!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>
Това HTML маркиране и CSS по-горе служат като добър пример за показваната вградена стойност. Когато се използва заедно, това ще покаже един ред текст, направен с два различни HTML елемента.
Контролирайте оформлението на уебсайта с CSS дисплей: блок
В някои отношения стойността на блока за показване е противоположна на вградената стойност. Могат да се задават размери на височина и ширина и елементи с тази стойност не могат да се намират един до друг. Примерът по-горе показва два елемента с блокова стойност. Елементите със стойността на блоковия дисплей са зададени по подразбиране при максималната ширина на техния родителски елемент.
създайте партиден файл за стартиране на exe
<!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>За разлика от примера за вграден стил, този пример за стойност на блок за показване разделя редовете текст на два различни реда. Стойността на fit-content width задава ширината на елементите така, че да съответства на дължината на текста.
Един до друг HTML елементи с CSS дисплей: inline-block
Стойността на вградения блок за показване на CSS работи точно като обикновена вградена стойност, само с възможност за добавяне на конкретни измерения. Това прави възможно създаването на мрежови оформления, без да има поставени родителски елементи. Връщайки се към предишния пример, добавянето на стойността на inline-block позволява на елементите да седят един до друг.
<!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>
Стойността на вградения блок не изглежда много по-различна от вградената стойност. Важно е да се отбележи, че можете да зададете размерите на елементи с тази стойност, но това улеснява работата в определени случаи.
Скриване на елементите на уебсайта с CSS дисплей: няма
Най-простата стойност на дисплея е „няма“. Тази стойност скрива елемента и всички дъщерни елементи, заедно с полета и други свойства на разстояние. Елементите със стойност CSS display none все още се виждат в инспекторите на браузъра.
Създавайте гъвкави и отзивчиви елементи с CSS дисплей: flex
Display flex е един от най-новите режими на CSS оформление. Когато display flex е върху родителски елемент, всички елементи в него стават гъвкави CSS елементи. Родителският елемент в тази конфигурация е flexbox.
Flexboxes създават адаптивен дизайн с предварително дефинирани променливи, като ширина и височина. Струва си научаване за HTML/CSS flexboxes преди да започнете.
<!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> Позиционирайте гъвкавите кутии една до друга с дисплей: inline-flex
Inline-flex се държи точно като обикновен flexbox, като допълнителното предимство е, че елементът може да седи до други елементи.
<!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>Създаване на сложни таблици с CSS дисплей: таблица
Стойността на таблицата за показване напомня за по-старите дни на дизайна на уебсайтове. Докато повечето уебсайтове не използват таблици за своите оформления днес, те все още са валидни за показване на данни и съдържание в четим формат.
Добавянето на стойността на таблицата към HTML елемент ще го накара да действа като елемент на таблица, но имате нужда от допълнителни стойности, за да накарате таблицата да работи правилно.
CSS дисплей: клетка-таблица
Елементите със стойността на клетката на таблицата действат като отделни клетки в основната таблица. И стойностите на таблица-колона и таблица-ред групират тези отделни клетки заедно.
CSS дисплей: таблица-ред
Стойността на реда на таблицата работи точно като
CSS дисплей: таблица-колона
Стойността на колоната на таблицата работи подобно на стойността на реда на таблицата, само че не разделя вашата таблица. Вместо това можете да използвате тази стойност, за да добавите конкретни CSS правила към различните колони, които вече съществуват.
<!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>Създаване на успоредни таблици с CSS дисплей: inline-table
Подобно на другите вградени варианти, които вече разгледахме, inline-table прави възможно поставянето на елементи на таблица до други елементи.
Създайте адаптивни оформления на уебсайтове с CSS дисплей: мрежа
Стойността на мрежата за показване на CSS е подобна на стойността на таблицата, само колоните и редовете на мрежата могат да имат гъвкаво оразмеряване. Това прави решетките идеални за създаване на основното оформление на уеб страници. Те оставят място за горни и долни колонтитули с пълна ширина, като същевременно правят възможно да има области със съдържание с различни размери.
<!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>
Решетките са подобни на flexboxes, само че могат да поставят елементи под и един до друг. Свойството grid-template-areas е жизненоважно за това. Както можете да видите от кода, нашият горен и долен колонтитул заемат четири интервала в масива, тъй като са с пълна ширина. Страничните ленти заемат по един слот всеки, докато съдържанието заема два, ефективно разделяйки средния ред на решетката на три колони.
CSS дисплей: inline-grid
Използването на стойността на вградената решетка ще позволи на вашата мрежа да седи до други елементи, точно както другите вградени стойности в това ръководство.
Използване на CSS дисплей за уеб дизайн
Свойството CSS display предлага удобен начин за коригиране на структурите на елементите на уебсайта, без да се налага да променяте HTML маркирането. Това е идеално за тези, които използват платформи за доставка на съдържание като Shopify или WordPress, но може да бъде полезно и за общ уеб дизайн.