Свойство CSS display — мощный инструмент для веб-дизайнеров. Он позволяет управлять макетами элементов веб-сайта с минимальным стилем и простыми значениями, которые легко запомнить.
Но что делает каждое из этих значений и как они работают? Давай выясним.
Что такое свойство отображения CSS?
Свойство display указывает тип отображения блока, используемого для HTML-элементов на веб-странице. Это приводит к разнообразному поведению, в том числе к полному неявке. Вы можете изменить эти значения на своем веб-сайте с помощью таблицы стилей или соответствующих разделов настройки CSS в Инструменты CMS, такие как WordPress.
Держите элементы в соответствии с отображением CSS: встроенный
Значения ширины и высоты не применяются к элементу со встроенным отображением; содержимое внутри устанавливает его размеры. Встроенные элементы HTML могут располагаться рядом с другими элементами, ведя себя как. Встроенное отображение чаще всего используется для текста.
<!ДОКТИП HTML>
<html язык="en">
<глава>
<мета кодировка =
"утф-8">
<заглавие>Отображаемые значения CSS</title>
<стиль>
.в соответствии {
дисплей: встроенный;
размер шрифта: 3rem;
}
# встроенный-1 {
цвет фона: желтый;
отступ: 10px 0px 10px 10px;
}
# встроенный-2 {
цвет фона: светло-зеленый;
отступ: 10px 10px 10px 0px;
}
</style>
</head>
<тело>
<h1>Отображение встроенного CSS</h1>
<раздел класс ="в соответствии" идентификатор ="встроенный-1">это текст</div>
<раздел класс ="в соответствии" идентификатор ="встроенный-2">со встроенным значением свойства.</div>
</body>
</html>
Эта HTML-разметка и CSS выше служат хорошим примером отображаемого встроенного значения. При совместном использовании это будет отображать одну строку текста, состоящую из двух разных элементов HTML.
Управление макетами веб-сайтов с помощью отображения CSS: блок
В некотором смысле значение отображаемого блока противоположно встроенному значению. Можно задать размеры высоты и ширины, и элементы с этим значением не могут располагаться рядом друг с другом. В приведенном выше примере показаны два элемента со значением блока. Элементы со значением отображения блока по умолчанию имеют максимальную ширину своего родительского элемента.
<!ДОКТИП HTML>
<html язык="en">
<глава>
<мета кодировка ="утф-8">
<заглавие>Отображаемые значения CSS</title>
<стиль>
.блокировать {
дисплей: блок;
размер шрифта: 3rem;
ширина: подгонка содержимого;
}
#блок-1 {
цвет фона: желтый;
отступ: 10px 10px 10px 10px;
}
#блок-2 {
цвет фона: светло-зеленый;
отступ: 10px 10px 10px 10px;
}
</style>
</head>
<тело>
<h1>Блок отображения CSS</h1>
<раздел класс ="блокировать" идентификатор ="блок-1">это текст</div>
<раздел класс ="блокировать" идентификатор ="блок-2">со значением свойства блока.</div>
</body>
</html>В отличие от примера встроенного стиля, в этом примере значения отображаемого блока строки текста разбиваются на две разные строки. Значение ширины fit-content задает ширину элементов в соответствии с длиной текста.
Параллельные элементы HTML с отображением CSS: встроенный блок
Отображаемое значение встроенного блока CSS работает так же, как обычное встроенное значение, только с возможностью добавления определенных размеров. Это позволяет создавать макеты в виде сетки без наличия родительских элементов. Возвращаясь к предыдущему примеру, добавление значения встроенного блока позволяет элементам располагаться рядом друг с другом.
<!ДОКТИП HTML>
<html язык="en">
<глава>
<мета кодировка ="утф-8">
<заглавие>Отображаемые значения CSS</title>
<стиль>
.inline-блок {
отображение: встроенный блок;
размер шрифта: 3rem;
ширина: подгонка содержимого;
}
# встроенный блок-1 {
цвет фона: желтый;
отступ: 10px 10px 10px 10px;
}
# встроенный блок-2 {
цвет фона: светло-зеленый;
отступ: 10px 10px 10px 10px;
}
</style>
</head>
<тело>
<h1>CSS Display Inline-Block (установленная ширина)</h1>
<раздел класс ="встроенный блок" идентификатор ="встроенный блок-1">это текст</div>
<раздел класс ="встроенный блок" идентификатор ="встроенный блок-2">со свойством встроенного блока
ценность.</div>
</body>
</html>
Значение встроенного блока не сильно отличается от встроенного значения. Важно отметить, что вы можете установить размеры элементов с этим значением, что упрощает работу в определенных случаях.
Самое простое отображаемое значение — «none». Это значение скрывает элемент и любые дочерние элементы, а также поля и другие свойства интервалов. Элементы со значением CSS display none по-прежнему видны в инспекторах браузера.
Создавайте гибкие и отзывчивые элементы с помощью отображения CSS: flex
Display flex — один из новейших режимов компоновки CSS. Когда display flex находится на родительском элементе, все элементы внутри него становятся гибкими элементами CSS. Родительским элементом в этой конфигурации является flexbox.
Флексбоксы создают адаптивный дизайн с предопределенными переменными, такими как ширина и высота. Это стоит изучение флексбоксов HTML/CSS прежде чем начать.
<!ДОКТИП HTML>
<html язык="en">
<глава>
<мета кодировка ="утф-8">
<заглавие>Отображаемые значения CSS</title>
<стиль>
.флекс {
дисплей: гибкий;
размер шрифта: 3rem;
}
# флекс-1 {
цвет фона: желтый;
ширина: 40%;
высота: 100 пикселей;
}
# флекс-2 {
цвет фона: светло-зеленый;
ширина: 25%;
высота: 100 пикселей;
}
# флекс-3 {
цвет фона: голубой;
ширина: 35%;
высота: 100 пикселей;
}
</style>
</head>
<тело>
<h1>CSS Display Flex</h1>
<раздел класс ="сгибаться">
<Идентификатор раздела ="флекс-1"></div>
<Идентификатор раздела ="флекс-2"></div>
<Идентификатор раздела ="флекс-3"></div>
</div>
</body>
</html>Расположение Flexbox рядом друг с другом С дисплеем: inline-flex
Inline-flex ведет себя так же, как обычный flexbox, с дополнительным преимуществом, заключающимся в том, что элемент может располагаться рядом с другими элементами.
<!ДОКТИП HTML>
<html язык="en">
<глава>
<мета кодировка ="утф-8">
<заглавие>Отображаемые значения CSS</title>
<стиль>
.inline-flex {
дисплей: встроенный гибкий;
размер шрифта: 3rem;
ширина: 49.8%;
}
# встроенный-гибкий-1 {
цвет фона: желтый;
ширина: 40%;
высота: 100 пикселей;
}
# встроенный-гибкий-2 {
цвет фона: светло-зеленый;
ширина: 25%;
высота: 100 пикселей;
}
# встроенный-гибкий-3 {
цвет фона: голубой;
ширина: 35%;
высота: 100 пикселей;
}
</style>
</head>
<тело>
<h1>Отображение CSS Inline-Flex</h1>
<раздел класс ="встроенный гибкий">
<Идентификатор раздела ="встроенный гибкий-1"></div>
<Идентификатор раздела ="встроенный гибкий-2"></div>
<Идентификатор раздела ="встроенный гибкий-3"></div>
</div>
<раздел класс ="встроенный гибкий">
<Идентификатор раздела ="встроенный гибкий-1"></div>
<Идентификатор раздела ="встроенный гибкий-2"></div>
<Идентификатор раздела ="встроенный гибкий-3"></div>
</div>
</body>
</html>Создавайте сложные таблицы с отображением CSS: таблица
Значение отображаемой таблицы напоминает о старых днях дизайна веб-сайтов. Хотя сегодня большинство веб-сайтов не используют таблицы для своих макетов, они по-прежнему подходят для отображения данных и контента в удобочитаемом формате.
Добавление значения таблицы к элементу HTML заставит его действовать как элемент таблицы, но вам нужны дополнительные значения, чтобы ваша таблица работала правильно.
Отображение CSS: таблица-ячейка
Элементы со значением table-cell действуют как отдельные ячейки в основной таблице. А значения table-column и table-row группируют эти отдельные ячейки вместе.
Отображение CSS: таблица-строка
Значение table-row работает так же, как
HTML-элемент. Как родитель элементов со значением table-cell, он разделит вашу таблицу на горизонтальные строки.Отображение CSS: таблица-столбец
Значение table-column работает аналогично значению table-row, только оно не разделяет вашу таблицу. Вместо этого вы можете использовать это значение для добавления определенных правил CSS в различные уже существующие столбцы.
<!ДОКТИП HTML>
<html язык="en">
<глава>
<мета кодировка ="утф-8">
<заглавие>Отображаемые значения CSS</title>
<стиль>
.стол {
дисплей: таблица;
размер шрифта: 3rem;
}
.заголовок {
отображение: таблица-заголовок-группа;
размер шрифта: 3rem;
}
# столбец-1 {
отображение: таблица-колонка-группа;
цвет фона: желтый;
}
# столбец-2 {
отображение: таблица-колонка-группа;
цвет фона: светло-зеленый;
}
# столбец-3 {
отображение: таблица-колонка-группа;
цвет фона: голубой;
}
#строка-1 {
отображение: таблица-строка;
}
#строка-2 {
отображение: таблица-строка;
}
#строка-3 {
отображение: таблица-строка;
}
#клетка {
отображение: таблица-ячейка;
отступ: 10 пикселей;
ширина: 20%;
}
</style>
</head>
<тело>
<h1>Таблица отображения CSS</h1>
<раздел класс ="стол">
<Идентификатор раздела ="столбец-1"></div>
<Идентификатор раздела ="столбец-2"></div>
<Идентификатор раздела ="столбец-3"></div>
<раздел класс ="заголовок">
<Идентификатор раздела ="клетка">Имя</div>
<Идентификатор раздела ="клетка">Возраст</div>
<Идентификатор раздела ="клетка">Страна</div>
</div>
<Идентификатор раздела ="строка-1">
<Идентификатор раздела ="клетка">Джефф</div>
<Идентификатор раздела ="клетка">21</div>
<Идентификатор раздела ="клетка">США</div>
</div>
<Идентификатор раздела ="ряд-2">
<Идентификатор раздела ="клетка">Сью</div>
<Идентификатор раздела ="клетка">34</div>
<Идентификатор раздела ="клетка">Испания</div>
</div>
<Идентификатор раздела ="ряд-3">
<Идентификатор раздела ="клетка">Борис</div>
<Идентификатор раздела ="клетка">57</div>
<Идентификатор раздела ="клетка">Сингапур</div>
</div>
</div>
</body>
</html>Создавайте параллельные таблицы с отображением CSS: встроенная таблица
Как и другие встроенные варианты, которые мы уже рассматривали, встроенная таблица позволяет размещать элементы таблицы рядом с другими элементами.
Создавайте адаптивные макеты веб-сайтов с отображением CSS: сетка
Значение отображаемой сетки CSS похоже на значение таблицы, только столбцы и строки сетки могут иметь гибкий размер. Это делает сетки идеальными для создания основного макета веб-страниц. Они оставляют место для полноразмерных верхних и нижних колонтитулов, а также позволяют иметь области содержимого разных размеров.
<!ДОКТИП HTML>
<html язык="en">
<глава>
<мета кодировка ="утф-8">
<заглавие>Отображаемые значения CSS</title>
<стиль>
.сетка {
отображение: сетка;
размер шрифта: 3rem;
области шаблона сетки:
'заголовок заголовок заголовок заголовок'
'содержимое левой боковой панели содержимое правой боковой панели'
'нижний колонтитул нижний колонтитул';
зазор: 10 пикселей;
}
# сетка-1 {
область сетки: заголовок;
цвет фона: желтый;
высота: 100 пикселей;
отступ: 20 пикселей;
выравнивание текста: по центру;
}
# сетка-2 {
область сетки: левая боковая панель;
цвет фона: светло-зеленый;
высота: 200 пикселей;
отступ: 20 пикселей;
выравнивание текста: по центру;
}
# сетка-3 {
область сетки: содержимое;
цвет фона: голубой;
высота: 200 пикселей;
отступ: 20 пикселей;
выравнивание текста: по центру;
}
# сетка-4 {
область сетки: правая боковая панель;
цвет фона: светло-зеленый;
высота: 200 пикселей;
отступ: 20 пикселей;
выравнивание текста: по центру;
}
# сетка-5 {
область сетки: нижний колонтитул;
цвет фона: желтый;
высота: 100 пикселей;
отступ: 20 пикселей;
выравнивание текста: по центру;
}
</style>
</head>
<тело>
<h1>Отображение сетки CSS</h1>
<раздел класс ="сетка">
<Идентификатор раздела ="сетка-1">Заголовок</div>
<Идентификатор раздела ="сетка-2">Левая боковая панель</div>
<Идентификатор раздела ="сетка-3">Содержание</div>
<Идентификатор раздела ="сетка-4">Правая боковая панель</div>
<Идентификатор раздела ="сетка-5">Нижний колонтитул</div>
</div>
</body>
</html>
Сетки похожи на флексбоксы, только они могут размещать элементы ниже и рядом друг с другом. Для этого жизненно важно свойство grid-template-areas. Как видно из кода, наши верхний и нижний колонтитулы занимают четыре пробела в массиве, так как они имеют полную ширину. Боковые панели занимают по одному слоту, а контент — два, эффективно разделяя среднюю строку сетки на три столбца.
Отображение CSS: встроенная сетка
Использование значения встроенной сетки позволит вашей сетке располагаться рядом с другими элементами, как и другие встроенные значения в этом руководстве.
Использование отображения CSS для веб-дизайна
Свойство отображения CSS предлагает удобный способ настройки структуры элементов веб-сайта без изменения разметки HTML. Это идеально подходит для тех, кто использует платформы доставки контента, такие как Shopify или WordPress, но также может быть удобен для общего веб-дизайна.
