Свойството CSS display е мощен инструмент за уеб дизайнери. Позволява ви да контролирате оформлението на елементите на уебсайта с минимален стил, с прости стойности, които са лесни за запомняне.

Но какво прави всяка от тези стойности и как работят? Нека разберем.

Какво представлява свойството CSS display?

Свойството display указва типа изобразяване на полето, използвано за HTML елементи на уеб страница. Това води до различни поведения, включително не се показват изобщо. Можете да редактирате тези стойности на уебсайта си чрез стиловия лист или съответните секции за персонализиране на CSS в CMS инструменти като WordPress.

Поддържайте елементите в съответствие с CSS дисплей: вграден

Стойностите за ширина и височина не се прилагат за елемент с вграден дисплей; съдържанието вътре определя неговите измерения. Вградените HTML елементи могат да стоят един до друг с други елементи, като се държат като a. Display inline се използва най-често за текст.

<!DOCTYPE html>
<html lang="en">
<глава>
<мета charset=





instagram viewer


"utf-8">
<заглавие>Стойности за показване на CSS</title>
<стил>
.в редица {
 дисплей: вграден;
 размер на шрифта: 3 rem;
 }
#inline-1 {
 цвят на фона: жълт;
 подложка: 10px 0px 10px 10px;
 }
#inline-2 {
 цвят на фона: светлозелен;
 подложка: 10px 10px 10px 0px;
 }
</style>
</head>
<тяло>
<h1>CSS Display Inline</h1>
<div клас="в редица" id="вграден-1">Това е текст</div>
<div клас="в редица" id="inline-2">със стойността на вграденото свойство.</div>
</body>
</html>

Това HTML маркиране и CSS по-горе служат като добър пример за показваната вградена стойност. Когато се използва заедно, това ще покаже един ред текст, направен с два различни HTML елемента.

Контролирайте оформлението на уебсайта с CSS дисплей: блок

В някои отношения стойността на блока за показване е противоположна на вградената стойност. Могат да се задават размери на височина и ширина и елементи с тази стойност не могат да се намират един до друг. Примерът по-горе показва два елемента с блокова стойност. Елементите със стойността на блоковия дисплей са зададени по подразбиране при максималната ширина на техния родителски елемент.

<!DOCTYPE html>
<html lang="en">
<глава>
<мета charset="utf-8">
<заглавие>Стойности за показване на CSS</title>
<стил>
.блокиране {
 дисплей: блок;
 размер на шрифта: 3 rem;
 ширина: fit-content;
 }
#block-1 {
 цвят на фона: жълт;
 подложка: 10px 10px 10px 10px;
 }
#block-2 {
 цвят на фона: светлозелен;
 подложка: 10px 10px 10px 10px;
 }
</style>
</head>
<тяло>
<h1>CSS дисплей блок</h1>
<div клас="блок" id="блок-1">Това е текст</div>
<div клас="блок" id="блок-2">със стойността на свойството на блока.</div>
</body>
</html>

За разлика от примера за вграден стил, този пример за стойност на блок за показване разделя редовете текст на два различни реда. Стойността на fit-content width задава ширината на елементите така, че да съответства на дължината на текста.

Един до друг HTML елементи с CSS дисплей: inline-block

Стойността на вградения блок за показване на CSS работи точно като обикновена вградена стойност, само с възможност за добавяне на конкретни измерения. Това прави възможно създаването на мрежови оформления, без да има поставени родителски елементи. Връщайки се към предишния пример, добавянето на стойността на inline-block позволява на елементите да седят един до друг.

<!DOCTYPE html>
<html lang="en">
<глава>
<мета charset="utf-8">
<заглавие>Стойности за показване на CSS</title>
<стил>
.inline-block {
 дисплей: inline-block;
 размер на шрифта: 3 rem;
 ширина: fit-content;
 }
#inline-block-1 {
 цвят на фона: жълт;
 подложка: 10px 10px 10px 10px;
 }
#inline-block-2 {
 цвят на фона: светлозелен;
 подложка: 10px 10px 10px 10px;
 }
</style>
</head>
<тяло>
<h1>CSS Display Inline-Block (зададена ширина)</h1>
<div клас="вграден блок" id="inline-block-1">Това е текст</div>
<div клас="вграден блок" id="inline-block-2">със свойството inline-block
 стойност.</div>
</body>
</html>

Стойността на вградения блок не изглежда много по-различна от вградената стойност. Важно е да се отбележи, че можете да зададете размерите на елементи с тази стойност, но това улеснява работата в определени случаи.

Най-простата стойност на дисплея е „няма“. Тази стойност скрива елемента и всички дъщерни елементи, заедно с полета и други свойства на разстояние. Елементите със стойност CSS display none все още се виждат в инспекторите на браузъра.

Създавайте гъвкави и отзивчиви елементи с CSS дисплей: flex

Display flex е един от най-новите режими на CSS оформление. Когато display flex е върху родителски елемент, всички елементи в него стават гъвкави CSS елементи. Родителският елемент в тази конфигурация е flexbox.

Flexboxes създават адаптивен дизайн с предварително дефинирани променливи, като ширина и височина. Струва си научаване за HTML/CSS flexboxes преди да започнете.

<!DOCTYPE html>
<html lang="en">
<глава>
<мета charset="utf-8">
<заглавие>Стойности за показване на CSS</title>
<стил>
.flex {
 дисплей: гъвкав;
 размер на шрифта: 3 rem;
 }
#flex-1 {
 цвят на фона: жълт;
 ширина: 40%;
 височина: 100px;
 }
#flex-2 {
 цвят на фона: светлозелен;
 ширина: 25%;
 височина: 100px;
 }
#flex-3 {
 цвят на фона: светлосин;
 ширина: 35%;
 височина: 100px;
 }
</style>
</head>
<тяло>
<h1>CSS Display Flex</h1>
<div клас="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">
<глава>
<мета charset="utf-8">
<заглавие>Стойности за показване на CSS</title>
<стил>
.inline-flex {
 дисплей: inline-flex;
 размер на шрифта: 3 rem;
ширина: 49.8%;
 }
#inline-flex-1 {
 цвят на фона: жълт;
 ширина: 40%;
 височина: 100px;
 }
#inline-flex-2 {
 цвят на фона: светлозелен;
 ширина: 25%;
 височина: 100px;
 }
#inline-flex-3 {
 цвят на фона: светлосин;
 ширина: 35%;
 височина: 100px;
 }
</style>
</head>
<тяло>
<h1>CSS дисплей Inline-Flex</h1>
<div клас="inline-flex">
<div id="inline-flex-1"></div>
<div id="inline-flex-2"></div>
<div id="inline-flex-3"></div>
</div>
<div клас="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 дисплей: таблица-ред

Стойността на реда на таблицата работи точно като a

HTML елемент. Като родител на елементи със стойността table-cell, той ще раздели вашата таблица на хоризонтални редове.

CSS дисплей: таблица-колона

Стойността на колоната на таблицата работи подобно на стойността на реда на таблицата, само че не разделя вашата таблица. Вместо това можете да използвате тази стойност, за да добавите конкретни CSS правила към различните колони, които вече съществуват.

<!DOCTYPE html>
<html lang="en">
<глава>
<мета charset="utf-8">
<заглавие>Стойности за показване на CSS</title>
<стил>
.маса {
 дисплей: маса;
 размер на шрифта: 3 rem;
 }
.заглавие {
 дисплей: таблица-заглавка-група;
 размер на шрифта: 3 rem;
 }
#колона-1 {
 дисплей: таблица-колона-група;
 цвят на фона: жълт;
 }
#колона-2 {
 дисплей: таблица-колона-група;
 цвят на фона: светлозелен;
 }
#колона-3 {
 дисплей: таблица-колона-група;
 цвят на фона: светлосин;
 }
#row-1 {
 дисплей: таблица-ред;
 }
#row-2 {
 дисплей: таблица-ред;
 }
#row-3 {
 дисплей: таблица-ред;
 }
#клетка {
 дисплей: таблица-клетка;
 подложка: 10px;
 ширина: 20%;
 }
</style>
</head>
<тяло>
<h1>Таблица за показване на CSS</h1>
<div клас="маса">
<div id="колона-1"></div>
<div id="колона-2"></div>
<div id="колона-3"></div>
<div клас="заглавка">
<div id="клетка">Име</div>
<div id="клетка">Възраст</div>
<div id="клетка">Държава</div>
</div>
<div id="ред-1">
<div id="клетка">Джеф</div>
<div id="клетка">21</div>
<div id="клетка">САЩ</div>
</div>
<div id="ред-2">
<div id="клетка">съдя</div>
<div id="клетка">34</div>
<div id="клетка">Испания</div>
</div>
<div id="ред-3">
<div id="клетка">Борис</div>
<div id="клетка">57</div>
<div id="клетка">Сингапур</div>
</div>
</div>
</body>
</html>

Създаване на успоредни таблици с CSS дисплей: inline-table

Подобно на другите вградени варианти, които вече разгледахме, inline-table прави възможно поставянето на елементи на таблица до други елементи.

Създайте адаптивни оформления на уебсайтове с CSS дисплей: мрежа

Стойността на мрежата за показване на CSS е подобна на стойността на таблицата, само колоните и редовете на мрежата могат да имат гъвкаво оразмеряване. Това прави решетките идеални за създаване на основното оформление на уеб страници. Те оставят място за горни и долни колонтитули с пълна ширина, като същевременно правят възможно да има области със съдържание с различни размери.

<!DOCTYPE html>
<html lang="en">
<глава>
<мета charset="utf-8">
<заглавие>Стойности за показване на CSS</title>
<стил>
.мрежа {
 дисплей: решетка;
 размер на шрифта: 3 rem;
 grid-template-areas:
'заглавка заглавка заглавка заглавка'
'лява странична лента съдържание съдържание дясна странична лента'
'долен колонтитул долен колонтитул долен колонтитул';
 междина: 10px;
 }
#grid-1 {
 мрежова област: заглавка;
 цвят на фона: жълт;
 височина: 100px;
 подложка: 20px;
 подравняване на текст: център;
 }
#grid-2 {
 мрежова област: лява странична лента;
 цвят на фона: светлозелен;
 височина: 200px;
 подложка: 20px;
 подравняване на текст: център;
 }
#grid-3 {
 мрежова област: съдържание;
 цвят на фона: светлосин;
 височина: 200px;
 подложка: 20px;
 подравняване на текст: център;
 }
#grid-4 {
 мрежова област: дясна странична лента;
 цвят на фона: светлозелен;
 височина: 200px;
 подложка: 20px;
 подравняване на текст: център;
 }
#grid-5 {
 мрежова област: долен колонтитул;
 цвят на фона: жълт;
 височина: 100px;
 подложка: 20px;
 подравняване на текст: център;
 }
</style>
</head>
<тяло>
<h1>CSS Display Grid</h1>
<div клас="решетка">
<div id="решетка-1">Заглавка</div>
<div id="решетка-2">Лява странична лента</div>
<div id="решетка-3">Съдържание</div>
<div id="решетка-4">Дясна странична лента</div>
<div id="решетка-5">Долен колонтитул</div>
</div>
</body>
</html>

Решетките са подобни на flexboxes, само че могат да поставят елементи под и един до друг. Свойството grid-template-areas е жизненоважно за това. Както можете да видите от кода, нашият горен и долен колонтитул заемат четири интервала в масива, тъй като са с пълна ширина. Страничните ленти заемат по един слот всеки, докато съдържанието заема два, ефективно разделяйки средния ред на решетката на три колони.

CSS дисплей: inline-grid

Използването на стойността на вградената решетка ще позволи на вашата мрежа да седи до други елементи, точно както другите вградени стойности в това ръководство.

Използване на CSS дисплей за уеб дизайн

Свойството CSS display предлага удобен начин за коригиране на структурите на елементите на уебсайта, без да се налага да променяте HTML маркирането. Това е идеално за тези, които използват платформи за доставка на съдържание като Shopify или WordPress, но може да бъде полезно и за общ уеб дизайн.