Типы представления

Ключом к успешному манипулированию элементами HTML является понимание того, что в том, как большинство из них работает, нет ничего особенного. Большинство веб-страниц могут быть созданы при помощи всего нескольких тегов, которым затем можно назначить любой стиль. По умолчанию, визуальное отображение браузерами большинства элементов HTML состоит из варьирования стилей шрифтов, отступов, полей и, главным образом, типов представления.

Основополагающими типами представления являются строчный, блоковый и невидимый. Манипулировать типами представления можно при помощи свойства display и его значений inline, block и none. Сюда же относится и свойство visibility со значениями hidden и visible

Свойство display

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

По умолчанию у каждого HTML элемента есть свое значение типа представления, зависящее от типа этого элемента. Для большинства элементов это значение будет либо block (блоковый элемент), либо inline (строчный элемент).

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

Блоковые элементы

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

Примеры элементов блочного типа:

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

Строчные элементы

Элементы, отображаемые по типу inline (строчный тип), следуют ходу строки, т. е. такие элементы не начинаются с новой строки и занимают только столько места, сколько необходимо для отображения их содержимого. Примерами элементов, отображаемых по строчному типу, являются тег <strong>, тег <em>, тег <a>.

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

Примеры элементов строчного типа:

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

Невидимые элементы

Невидимый тип представления display: none вовсе не отображает элемент. Он может показаться совершенно бесполезным, однако используется для создания интересных эффектом, альтернативных стилей или расширенных эффектов наведения курсора мыши.

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

Переопределение типов представления по умолчанию

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

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

Следующий пример изменяет тип представления некоторых элементов, чтобы их отображение соответствовало задуманному дизайну.

h1 {
   display: inline;
   font-size: 2em;
}

#header p {
   display: inline;
   font-size: 0.9em;
   padding-left: 2em;
}

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

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

#navigation, #seeAlso, #comments, #standards {
   display: none;
}

Обратите внимание, что определение свойства display изменяет только то, как элемент отображается, но не меняет тип элемента. Таким образом, строковый элемент со значением 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 отличаются друг от друга тем, что первое совершенно изымает элемент из потока, а второе сохраняет элемент на соответствующем месте, отключая лишь его визуальное отображение. Например, если есть три параграфа – 1, 2, 3, и к параграфу 2 применить display: none, то параграф 3 будет отображаться сразу же за параграфом 1, а если к нему применить visibility: hidden, то параграф 3 будет отображаться за параграфом 1, но через промежуток, равный размеру параграфа 2.

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

Главное отличие значения display: inline-block от display: inline состоит в том, что оно позволяет устанавливать ширину и высоту элемента.

Также, у элемента со значением display: inline-block учитываются верхние и нижние отступы/поля, а со значением display: inline нет.

Главное отличие значения display: inline-block от display: block состоит в том, что после такого элемента не добавляется перевод на новую строку. В результате такой элемент может располагаться в одном ряду с другими элементами.

Следующий пример показывает разницу в поведении элементов со значениями display: inline, display: inline-block и display: block:

span.a {
  display: inline; /* по умолчанию для элемента span */
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;
  background-color: yellow;
}

span.b {
  display: inline-block;
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;
  background-color: yellow;
}

span.c {
  display: block;
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;
  background-color: yellow;
}

Результат:

Использование inline-block для создания ссылок навигации

Одно из наиболее частых применений значения display: inline-block - это, чтобы элементы списка отображались горизонтально, а не вертикально.

В следующем примере создаются горизонтальные ссылки навигации:

.nav {
  background-color: yellow;
  list-style-type: none;
  text-align: center; 
  padding: 0;
  margin: 0;
}

.nav li {
  display: inline-block;
  font-size: 20px;
  padding: 20px;
}

Табличные представления

Возможно, лучший способ понять табличные типы представления, это вспомнить о HTML таблицах. Значение display: table; задает начальный тип представления, а строки и ячейки можно имитировать при помощи значений display: table-row; и display: table-cell;.

Но CSS идет еще дальше, позволяя свойству display принимать значения table-column, table-row-group, table-column-group, table-header-group, table-footer-group и table-caption, которые, если к ним присмотреться как следует, говорят сами за себя. Здесь сразу же можно заметить вполне очевидную пользу - у нас появляется возможность конструировать таблицы, основой которых будут столбцы, а не строки, как в HTML.

И, наконец, значение inline-table по существу устанавливает "строчную" таблицу, т.е. без перевода строки перед и после нее.

Тем не менее, чрезмерное увлечение CSS таблицами может самым серьезным образом разрушить доступность вашего сайта. HTML должен использоваться для определения значения контента, а значит если у вас есть табличные данные, то и размещаться они должны в HTML таблицах. Использование исключительно CSS таблиц может привести к месиву из данных, совершенно не читаемых без CSS. А это очень плохо.

Другие типы представления

Значение display: list-item представляет элемент так, как делает HTML тег <li>. Чтобы все работало как следует, элемент должен быть вложен в элемент <ul> или элемент <ol>.

Значение run-in устанавливает элемент как блочный или строчный в зависимости от типа представления его родителя. Это значение не работает в браузерах IE и Mozilla.

Значение compact также устанавливает элемент как блочный или строчный в зависимости от контекста. Также не везде работает.

Значение marker используется исключительно с псевдоэлементами :before и :after для определения представления для значения свойства content. Представление свойства content по умолчанию уже имеет значение marker, так что использование его имеет смысл только в том случае, если ранее переопределялось свойство display для псевдоэлементов.

CSS свойства определения типа представления