CSS - Свойство Display: Ваш портал в визуальное волшебство!

Здравствуйте, будущие маги CSS! ? Я рад отправиться в это путешествие с вами и исследовать fascinierende мир свойства CSS display. Как кто-то, кто teaches CSS более десяти лет, я могу заверить вас, что овладение этим свойством похоже на открытие сундука с сокровищами возможностей веб-дизайна. Так что погружаемся!

Что такое Свойство Display?

Прежде чем мы углубимся в детали, давайте поймем, что же такое собственно display свойство. Короче говоря, оно контролирует, как элемент отображается на веб-странице. Представьте его как режиссера пьесы, который говорит каждому актеру (элементу), как себя вести на сцене (вашей веб-странице).

Possible Values

Свойство display похоже на швейцарский армейский нож - у него много инструментов (значений) для разных ситуаций. Вот таблица самых.common значений, о которых мы будем говорить:

Значение	Описание
inline	Отображает элемент как строчный элемент (например, <span>)
block	Отображает элемент как блочный элемент (например, <div>)
inline-block	Отображает элемент как строчно-уровневый блочный контейнер
none	Элемент полностью удаляется из документа
flex	Отображает элемент как блочно-уровневый контейнер flex
inline-flex	Отображает элемент как строчно-уровневый контейнер flex
grid	Отображает элемент как блочно-уровневый контейнер grid
inline-grid	Отображает элемент как строчно-уровневый контейнер grid
table	Позволяет элементу вести себя как элемент <table>
list-item	Позволяет элементу вести себя как элемент <li>

Применяется к

Свойство display применяется ко всем HTML-элементам. Да, вы правильно heard - ко всем! От скромных <span> до могущественных <div>, каждый элемент может быть influenced этим мощным свойством.

Синтаксис DOM

工作时与 JavaScript 和文档对象模型 (DOM) 一起使用时，您可以像这样操纵 display свойство:

element.style.display = "value";

Например:

document.getElementById("myElement").style.display = "none";

Это спрячет элемент с ID "myElement". Волшебство, правда?

CSS display - inline Значение

Давайте начнем с значения inline. Это значение по умолчанию для элементов, таких как <span>, <a> и <img>.

<style>
.inline-element {
display: inline;
background-color: yellow;
padding: 5px;
}
</style>

<p>Этот абзац содержит <span class="inline-element">строчный элемент</span> внутри него.</p>

В этом примере элемент <span> будет flow с текстом, не начиная с новой строки. Это как слово в предложении - оно не нарушает поток.

CSS display - block Значение

Следующее значение - block. Это значение по умолчанию для элементов, таких как <div>, <p> и <h1> до <h6>.

<style>
.block-element {
display: block;
background-color: lightblue;
padding: 10px;
margin: 10px 0;
}
</style>

<div class="block-element">Этот элемент блочный.</div>
<div class="block-element">Этот элемент блочный.</div>

Блочные элементы начинаются с новой строки и растягиваются до полной ширины, доступной. Они как абзацы в книге - каждый начинается с новой строки.

CSS display - inline-block Значение

Значение inline-block похоже на гибрид - оно combine функции inline и block.

<style>
.inline-block-element {
display: inline-block;
width: 100px;
height: 100px;
background-color: lightgreen;
margin: 5px;
}
</style>

<div class="inline-block-element"></div>
<div class="inline-block-element"></div>
<div class="inline-block-element"></div>

Эти элементы будут sit рядом (как inline), но вы можете устанавливать ширину и высоту на них (как block). Это идеально для создания网格чатых макетов без использованияactual grid или flex.

CSS display - none Значение

Значение none похоже на невидимую накидку для ваших элементов.

<style>
.hidden {
display: none;
}
</style>

<p>Этот абзац виден.</p>
<p class="hidden">Этот абзац не виден!</p>

Элементы с display: none полностью удаляются из макета. Это как если бы они не существовали на странице вообще.

CSS display - With table Значения

CSS может сделать элементы ведут себя как элементы таблицы, даже если они неactual <table> теги.

<style>
.table {
display: table;
width: 100%;
border-collapse: collapse;
}
.table-row {
display: table-row;
}
.table-cell {
display: table-cell;
border: 1px solid black;
padding: 5px;
}
</style>

<div class="table">
<div class="table-row">
<div class="table-cell">Ячейка 1</div>
<div class="table-cell">Ячейка 2</div>
</div>
<div class="table-row">
<div class="table-cell">Ячейка 3</div>
<div class="table-cell">Ячейка 4</div>
</div>
</div>

Это создает структуру, похожую на таблицу, без использованияactual таблиц elements. Это很好 для создания макетов, которые нужно вести себя как таблицы, но с большей гибкостью.

CSS display - flex Значение

Flexbox - это мощный инструмент макета, и он начинается с display: flex.

<style>
.flex-container {
display: flex;
justify-content: space-around;
background-color: lightgray;
}
.flex-item {
background-color: white;
margin: 10px;
padding: 20px;
}
</style>

<div class="flex-container">
<div class="flex-item">Элемент Flex 1</div>
<div class="flex-item">Элемент Flex 2</div>
<div class="flex-item">Элемент Flex 3</div>
</div>

Это создает гибкий контейнер с элементами, которые можно легко выровнять и distribute. Это как если бы у вас было целая толпа гимнастов, которые могут тянуться и сжиматься, чтобы идеально fitting их пространство.

CSS display - inline-flex Значение

inline-flex похож на flex, но сам контейнер ведет себя как строчный элемент.

<style>
.inline-flex-container {
display: inline-flex;
background-color: lightpink;
}
.flex-item {
margin: 5px;
padding: 10px;
background-color: white;
}
</style>

<div class="inline-flex-container">
<div class="flex-item">Элемент 1</div>
<div class="flex-item">Элемент 2</div>
</div>
<div class="inline-flex-container">
<div class="flex-item">Элемент 3</div>
<div class="flex-item">Элемент 4</div>
</div>

Это позволяет вам иметь несколько flex контейнеров на одной строке, что может быть полезно для создания сложных макетов.

CSS display - grid Значение

Grid - это еще один мощный инструмент макета, ион начинается с display: grid.

<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
gap: 10px;
background-color: lightblue;
padding: 10px;
}
.grid-item {
background-color: white;
padding: 20px;
text-align: center;
}
</style>

<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
</div>

Grid позволяет вам создавать сложные макеты с строками и столбцами. Это как если бы у вас была perfect spreadsheet для ваших элементов!

CSS display - inline-grid Значение

Похоже на inline-flex, inline-grid создает grid контейнер, который ведет себя как строчный элемент.

<style>
.inline-grid-container {
display: inline-grid;
grid-template-columns: auto auto;
gap: 10px;
background-color: lightyellow;
padding: 10px;
}
.grid-item {
background-color: white;
padding: 10px;
text-align: center;
}
</style>

<div class="inline-grid-container">
<div class="grid-item">A</div>
<div class="grid-item">B</div>
</div>
<div class="inline-grid-container">
<div class="grid-item">C</div>
<div class="grid-item">D</div>
</div>

Это позволяет вам иметь несколько grid контейнеров на одной строке, открывая еще больше возможностей для макета.

CSS display - list-item Значение

Наконец, у нас есть list-item, который делает элемент ведут себя как элемент списка.

<style>
.custom-list {
display: list-item;
list-style-type: square;
margin-left: 20px;
}
</style>

<div class="custom-list">Этот элемент списка кастомный</div>
<div class="custom-list">Этот элемент списка кастомный</div>

Это полезно, когда вы хотите создать структуры, похожие на списки, без использованияactual <ul> или <ol> элементов.

И вот и все,folks! Мы совершили путешествие через страну display свойств, от скромного inline до могущественного grid. Помните, ключ к овладению CSS - это практика. Так что идите и экспериментируйте с этими свойствами. Кто знает? Вы можете создать следующее большое дело в веб-дизайне!

Счастливого кодирования, и пусть ваши макеты всегда будут идеальными! ??

Credits: Image by storyset