265 lines
No EOL
12 KiB
Markdown
265 lines
No EOL
12 KiB
Markdown
# Все значения свойства "display"
|
||
|
||
Свойство `display` имеет много разных значений. Обычно, используются только три из них: `none`, `inline` и `block`, потому что когда-то браузеры другие не поддерживали.
|
||
|
||
Но после ухода IE7-, стало возможным использовать и другие значения тоже. Рассмотрим здесь весь список.
|
||
|
||
## Значение none
|
||
|
||
Самое простое значение. Элемент не показывается, вообще. Как будто его и нет.
|
||
|
||
```html
|
||
<!--+ autorun height=40 -->
|
||
<div style="border:1px solid black">
|
||
Невидимый div (
|
||
<div style="*!*display: none*/!*">Я - невидим!</div>
|
||
) Стоит внутри скобок
|
||
</div>
|
||
```
|
||
|
||
## Значение block
|
||
|
||
<ul>
|
||
<li>Блочные элементы располагаются один над другим, вертикально (если нет особых свойств позиционирования, например `float`).</li>
|
||
<li>Блок стремится расшириться на всю доступную ширину. Можно указать ширину и высоту явно.</li>
|
||
</ul>
|
||
|
||
Это значение `display` многие элементы имеют по умолчанию: `<div>`, заголовок `<h1>`, параграф `<p>`.
|
||
|
||
```html
|
||
<!--+ autorun height=80 -->
|
||
<div style="border:1px solid black">
|
||
<div style="border:1px solid blue; width: 50%">Первый</div>
|
||
<div style="border:1px solid red">Второй</div>
|
||
</div>
|
||
```
|
||
|
||
Блоки прилегают друг к другу вплотную, если у них нет `margin`.
|
||
|
||
## Значение inline
|
||
|
||
<ul>
|
||
<li>Элементы располагаются на той же строке, последовательно.</li>
|
||
<li>Ширина и высота элемента определяются по содержимому. Поменять их нельзя.</li>
|
||
</ul>
|
||
|
||
Например, инлайновые элементы по умолчанию: `<span>`, `<a>`.
|
||
|
||
```html
|
||
<!--+ autorun height=40 no-beautify -->
|
||
<span style="border:1px solid black">
|
||
<span style="border:1px solid blue; width:50%">Ширина</span>
|
||
<a style="border:1px solid red">Игнорируется</a>
|
||
</span>
|
||
```
|
||
|
||
Если вы присмотритесь внимательно к примеру выше, то увидите, что между внутренними `<span>` и `<a>` есть пробел. Это потому, что он есть в HTML.
|
||
|
||
Если расположить элементы вплотную -- его не будет:
|
||
|
||
```html
|
||
<!--+ autorun height=40 -->
|
||
<span style="border:1px solid black">
|
||
<span style="border:1px solid blue; width:50%">Без</span><a style="border:1px solid red">Пробела</a>
|
||
</span>
|
||
```
|
||
|
||
Содержимое инлайн-элемента может переноситься на другую строку.
|
||
|
||
При этом каждая строка в смысле отображения является отдельным прямоугольником ("line box"). Так что инлайн-элемент состоит из объединения прямоугольников, но в целом, в отличие от блока, прямоугольником не является.
|
||
|
||
Это проявляется, например, при назначении фона.
|
||
|
||
Например, три прямоугольника подряд:
|
||
|
||
```html
|
||
<!--+ autorun height=80 no-beautify -->
|
||
<div style="width:400px">
|
||
...<span style="background: lightgreen">
|
||
Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля
|
||
Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля
|
||
</span>...
|
||
</div>
|
||
```
|
||
|
||
Если инлайн-элемент граничит с блоком, то между ними обязательно будет перенос строки:
|
||
|
||
```html
|
||
<!--+ autorun height=80 -->
|
||
<div style="border:1px solid black">
|
||
<span style="border:1px solid red">Инлайн</span>
|
||
<div style="border:1px solid blue; width:50%">Блок</div>
|
||
<span style="border:1px solid red">Инлайн</span>
|
||
</div>
|
||
```
|
||
|
||
## Значение inline-block
|
||
|
||
Это значение -- означает элемент, который продолжает находиться в строке (`inline`), но при этом может иметь важные свойства блока.
|
||
|
||
Как и инлайн-элемент:
|
||
<ul>
|
||
<li>Располагается в строке.</li>
|
||
<li>Размер устанавливается по содержимому.</li>
|
||
</ul>
|
||
|
||
Во всём остальном -- это блок, то есть:
|
||
<ul>
|
||
<li>Элемент всегда прямоугольный.</li>
|
||
<li>Работают свойства `width/height`.</li>
|
||
</ul>
|
||
|
||
Это значение `display` используют, чтобы отобразить в одну строку блочные элементы, в том числе разных размеров.
|
||
|
||
Например:
|
||
|
||
```html
|
||
<!--+ autorun height=160 no-beautify -->
|
||
<style>
|
||
li {
|
||
*!*
|
||
display: inline-block;
|
||
*/!*
|
||
list-style: none;
|
||
border: 1px solid red;
|
||
}
|
||
</style>
|
||
|
||
<ul style="border:1px solid black; padding:0">
|
||
<li>Инлайн Блок<br>3 строки<br>высота/ширина явно не заданы</li>
|
||
<li style="width:100px;height:100px">Инлайн<br>Блок 100x100</li>
|
||
<li style="width:60px;height:60px">Инлайн<br>Блок 60x60</li>
|
||
<li style="width:100px;height:60px">Инлайн<br>Блок 100x60</li>
|
||
<li style="width:60px;height:100px">Инлайн<br>Блок 60x100</li>
|
||
</ul>
|
||
```
|
||
|
||
Свойство `vertical-align` позволяет выровнять такие элементы внутри внешнего блока:
|
||
|
||
```html
|
||
<!--+ autorun height=160 no-beautify -->
|
||
<style>
|
||
li {
|
||
display: inline-block;
|
||
list-style: none;
|
||
border:1px solid red;
|
||
*!*
|
||
vertical-align: middle;
|
||
*/!*
|
||
}
|
||
</style>
|
||
|
||
<ul style="border:1px solid black; padding:0">
|
||
<li>Инлайн Блок<br>3 строки<br>высота/ширина явно не заданы</li>
|
||
<li style="width:100px;height:100px">Инлайн<br>Блок 100x100</li>
|
||
<li style="width:60px;height:60px">Инлайн<br>Блок 60x60</li>
|
||
<li style="width:100px;height:60px">Инлайн<br>Блок 100x60</li>
|
||
<li style="width:60px;height:100px">Инлайн<br>Блок 60x100</li>
|
||
</ul>
|
||
```
|
||
|
||
Как и в случае с инлайн-элементами, пробелы между блоками появляются из-за пробелов в HTML. Если элементы списка идут вплотную, например, генерируются в JavaScript -- их не будет.
|
||
|
||
## Значения table-*
|
||
|
||
Современные браузеры (IE8+) позволяют описывать таблицу любыми элементами, если поставить им соответствующие значения `display`.
|
||
|
||
Для таблицы целиком `table`, для строки -- `table-row`, для ячейки -- `table-cell` и т.д.
|
||
|
||
Пример использования:
|
||
|
||
```html
|
||
<!--+ run autorun -->
|
||
<form style="display: *!*table*/!*">
|
||
<div style="display: *!*table-row*/!*">
|
||
<label style="display: *!*table-cell*/!*">Имя:</label>
|
||
<input style="display: *!*table-cell*/!*">
|
||
</div>
|
||
<div style="display: *!*table-row*/!*">
|
||
<label style="display: *!*table-cell*/!*">Фамилия:</label>
|
||
<input style="display: *!*table-cell*/!*">
|
||
</div>
|
||
</form>
|
||
```
|
||
|
||
Важно то, что это действительно полноценная таблица. Используются табличные алгоритмы вычисления ширины и высоты элемента, [описанные в стандарте](http://www.w3.org/TR/CSS2/tables.html#width-layout).
|
||
|
||
**Это хорошо для семантической вёрстки и позволяет избавиться от лишних тегов.**
|
||
|
||
С точки зрения современного CSS, обычные `<table>`, `<tr>`, `<td>` и т.д. -- это просто элементы с предопределёнными значениями `display`:
|
||
|
||
```css
|
||
/*+ no-beautify */
|
||
table { display: table }
|
||
tr { display: table-row }
|
||
thead { display: table-header-group }
|
||
tbody { display: table-row-group }
|
||
tfoot { display: table-footer-group }
|
||
col { display: table-column }
|
||
colgroup { display: table-column-group }
|
||
td, th { display: table-cell }
|
||
caption { display: table-caption }
|
||
```
|
||
|
||
Очень подробно об алгоритмах вычисления размеров и отображении таблиц рассказывает стандарт [CSS 2.1 - Tables](http://www.w3.org/TR/CSS2/tables.html).
|
||
|
||
### Вертикальное центрирование с table-cell
|
||
|
||
Внутри ячеек свойство [vertical-align](http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align) выравнивает содержимое по вертикали.
|
||
|
||
Это можно использовать для центрирования:
|
||
|
||
```html
|
||
<!--+ run autorun height=120 -->
|
||
<style>
|
||
div { border:1px solid black }
|
||
</style>
|
||
|
||
<div style="height:100px; *!*display: table-cell; vertical-align: middle*/!*">
|
||
<div>Элемент<br>С неизвестной<br>Высотой</div>
|
||
</div>
|
||
```
|
||
|
||
CSS не требует, чтобы вокруг `table-cell` была структура таблицы: `table-row` и т.п. Может быть просто такой одинокий `DIV`, это допустимо.
|
||
|
||
При этом он ведёт себя как ячейка `TD`, то есть подстраивается под размер содержимого и умеет вертикально центрировать его при помощи `vertical-align`.
|
||
|
||
## Значения list-item и run-in
|
||
|
||
У свойства `display` есть и другие значения. Они используются реже, поэтому посмотрим на них кратко:
|
||
|
||
<dl>
|
||
<dt>`list-item`</dt>
|
||
<dd>Этот display по умолчанию используется для элементов списка. Он добавляет к блоку содержимым ещё и блок с номером(значком) списка, который стилизуется стандартными списочными свойствами:
|
||
|
||
```html
|
||
<!--+ autorun height=40 -->
|
||
<div style="*!*display: list-item*/!*; list-style:inside square">Пункт 1</div>
|
||
```
|
||
|
||
</dd>
|
||
<dt>`run-in`</dt>
|
||
<dd>Если после `run-in` идёт `block`, то `run-in` становится его первым инлайн-элементом, то есть отображается в начале `block`.
|
||
|
||
Если ваш браузер поддерживает это значение,** то примере ниже `h3`, благодаря `display:run-in`, окажется визуально внутри `div`:
|
||
|
||
```html
|
||
<!--+ autorun height=100 -->
|
||
<h3 style="*!*display: run-in*/!*; border:2px solid red">Про пчёл.</h3>
|
||
<div style="border:2px solid black">Пчёлы - отличные создания, они делают мёд.</div>
|
||
```
|
||
|
||
Если же вы видите две строки, то ваш браузер НЕ поддерживает `run-in`.
|
||
|
||
Вот, для примера, правильный вариант отображения `run-in`, оформленный другим кодом:
|
||
|
||
```html
|
||
<!--+ autorun height=60 -->
|
||
<div style="border:2px solid black">
|
||
<h3 style="display: inline; border:2px solid red">Про пчёл.</h3>Пчёлы - отличные создания, они делают мёд.
|
||
</div>
|
||
```
|
||
|
||
Если этот вариант отличается от того, что вы видите выше -- ваш браузер не поддерживает `run-in`. На момент написания этой статьи только IE поддерживал `display:run-in`.
|
||
</dd>
|
||
</dl> |