Макет CSS - свойство display

display является одним из самых важных свойств CSS для управления макетом.

Свойство display

display пroperty определяет, будет ли элемент отображаться и как он будет отображаться.

Каждый элемент HTML имеет по умолчанию значение display, которое зависит от типа элемента. У большинства элементов значение display по умолчанию равно block или inline.

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

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

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

Блоковые элементы (block element)

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

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

Некоторые примеры блоковых элементов:

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

внутренние элементы (inline element)

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

Это абзацвнутрисимвольный <span> элемент.

Некоторые примеры внутрисимвольных элементов:

  • <span>
  • <a>
  • <img>

Display: none;

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

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

Override defaultValue Display

Как было сказано ранее, каждый элемент имеет defaultValue display. Но вы можетеoverride его.

преобразование внутренних элементов в блоковые и наоборот, полезно для отображения страницы в определенном виде, следуя стандартам Web.

Одним из распространенных примеров является создание линейных <li> элементы:

пример

li {
  display: inline;
}

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

Примечание:установка свойства display изменяет толькообраз отображения элементови не изменяет тип элемента. Таким образом, способ отображения 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; VS visibility: hidden;
Комбинация CSS и JavaScript для отображения содержимого
Этот пример демонстрирует, как использовать CSS и JavaScript для отображения элементов при нажатии.

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

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