CSS Макет. Свойство display

Курс по основам CSS. W3Schools на русском языке. Уроки для начинающих

❮ Prev Next ❯

Свойство display является наиболее важным CSS свойством для управления макетом веб-страницы.

Свойство display

Свойство display определяет, если/как элемент отображается.

Каждый HTML элемент имеет отображаемое значение по умолчанию в зависимости от типа элемента. Значением по умолчанию для большинства элементов является block (блочный) или inline (строчный).

Нажмите, чтобы показать панель

Эта панель содержит элемент <div> который по умолчанию скрыт (display: none).

Он стилизован с помощью CSS, и мы используем JavaScript для его отображения (измените его на (display: block).

Block-level Elements - Блочные элементы

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

Элемент <div> является блочным элементом.

Примеры блочных элементов:

<div>
<h1> - <h6>
<p>
<form>
<header>
<footer>
<section>

Inline Elements - Встроенные (строчные) элементы

Встроенный (строчный) элемент не начинается с новой строки и занимает столько ширины, сколько необходимо.

Это встроенный элемент <span> внутри параграфа.

Примеры встроенных элементов:

<span>
<a>
<img>

Display: none;

display: none; обычно используется с JavaScript для скрытия и отображения элементов без их удаления и повторного создания. Посмотрите последний пример на этой странице, если вы хотите знать, как этого можно достичь.

Элемент <script> использует display: none; по умолчанию.

Переопределить по умолчанию значение display

Как уже упоминалось, каждый элемент имеет значение display по умолчанию. Тем не менее, вы можете переопределить его.

Изменение встроенного элемента на блочный элемент или наоборот может быть полезным для того, чтобы страница выглядела определенным образом и при этом соответствовала веб-стандартам.

Типичным примером являются встроенные элементы <li> для горизонтального меню:

Пример

li {
display: inline;
}

Попробуйте сами »

Примечание: Установка свойства отображения элемента только изменяет способ отображения элемента, а НЕ КАКОЙ это элемент. Таким образом, встроенный элемент с display: block; не может содержать другие элементы блока внутри него.

В следующем примере элементы <span> отображаются как блочные элементы:

Пример

span {
display: block;
}

Попробуйте сами »

В следующем примере элементы <a> отображаются как блочные элементы:

Пример

a {
display: block;
}

Попробуйте сами »

Скрыть элемент - display:none или visibility:hidden?

display:none

visibility:hidden

Сброс

Скрыть элемент можно, установив свойство display в значение none. Элемент будет скрыт, а страница будет отображаться так, как если бы элемента там не было:

Пример

h1.hidden {
display: none;
}

Попробуйте сами »

visibility:hidden; также скрывает элемент.

Однако элемент все равно будет занимать то же пространство, что и раньше. Элемент будет скрыт, но все равно влияет на макет:

Пример

h1.hidden {
visibility: hidden;
}

Попробуйте сами »

Больше примеров

Различия между display: none; и visibility: hidden;
Этот пример демонстрирует display: none; в сравнении с visibility: hidden;

Пример

Использование CSS вместе с JavaScript для отображения контента
Этот пример демонстрирует, как использовать CSS и JavaScript, чтобы показать элемент при клике.

Проверьте себя с помощью упражнений!

Упражнение 1 » Упражнение 2 » Упражнение 3 » Упражнение 4 »

CSS Display/Visibility Свойства

Свойство	Описание
display	Определяет, как должен отображаться элемент
visibility	Указывает, должен ли элемент быть видимым

❮ Prev Next ❯