display в CSS

Мы уже видели, что есть в основном два типа элементов HTML: блочные и строчные элементы. Мы также упомянули несколько альтернативных, вроде list-item или table-cell.

Свойство display позволяет изменять тип элемента HTML. По умолчанию для абзаца <р> (блочный элемент) значение display будет block, но может отображаться как inline:

p { display: inline; }

Почему бы не использовать строчные элементы, такие как <span>?

Потому что вы выбираете элемент HTML по его смыслу, а не отображению. Если мы решили, что абзац подходит нашему содержимому лучше всего, мы не должны менять тег ради стилизации. Это CSS заботится о стилизации.

Короче говоря, display позволяет сменить тип элемента без изменения его смысла.

Для каждого варианта display есть определённое поведение:

• block будет занимать всю доступную ширину;
• inline будет действовать как обычный текст;
• inline-block является, как предполагает его название, соединением блочного и строчного поведения, вариант «лучшее из обоих миров»;
• list-item похож на block, так как он занимает всю доступную ширину, но показывает дополнительный маркер пункта списка;
• у table, table-row и table-cell очень специфическое, хотя и неожиданное поведение, которое позволяет строить более интересные макеты.

display: block

Превратит любой элемент в блочный.

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

CSS

.menu a { background: red; color: white; }

HTML

<ul class="menu">
  <li>
    <a>Главная</a>
  </li>
  <li>
    <a>Возможности</a>
  </li>
  <li>
    <a>Цены</a>
  </li>
  <li>
    <a>О нас</a>
  </li>
</ul>

Если превратить эти ссылки в блочные, мы увеличим их область:

.menu a { background: red; color: white; display: block; }

display: inline

Превращает любой элемент в строчный, как если бы он был только простым текстом.

Часто используется для создания горизонтальной навигации, где семантически, но не визуально полезны пункты списка.

CSS

.menu li { display: inline; }

HTML

<ul class="menu">
  <li>
    <a>Главная</a>
  </li>
  <li>
    <a>Возможности</a>
  </li>
  <li>
    <a>Цены</a>
  </li>
  <li>
    <a>О нас</a>
  </li>
</ul>

display: list-item

Элементы HTML, отображаемые как list-item, являются (неудивительно) пунктами списка <li>, но также описанием термина <dd>.

Пункт списка отображается с маркером (в неупорядоченном списке <ul>) или с порядковым номером (в упорядоченном списке <ol>).

Поскольку отображение этих маркеров и цифр меняется во всех браузерах, также трудно стилизовать их в CSS, правило display: list-item никогда не используется. На самом деле, часто <li> отображаются как display: block или display: inline, так как они более гибкие для стилизации.

display: none

Применение display: none к элементу HTML удаляет его из веб-страницы, как если бы он никогда не существовал в вашем коде.

CSS

.gone-baby-gone { display: none; }

HTML

<p>Я слышал кто-то выступает?</p>
<p class="gone-baby-gone">Ха-ха-ха</p>
<p>Я, должно быть, сплю...</p>

Здесь в коде три абзаца, но видны только два, как будто второго человека никогда не существовало.

visibility: hidden

Свойство visibility немного похоже на display. Применение visibility: hidden скрывает элемент со страницы, но только делает его невидимым: он по-прежнему занимает место, где только что был.

CSS

.hollow-man { visibility: hidden; }

HTML

<p>So far away from me </p>
<p class="hollow-man">So far i just can't see</p>
<p class="hollow-man">So far away from me</p>
<p class="hollow-man">You're so far away from me</p>
<p>You're so far away...</p>

Здесь в коде пять абзацев, но появляются только два, при этом пространство, которое занимали скрытые абзацы, остаётся, но абзацы видеть вы не можете.

Перейти к заданиям