Доброго времени суток, гости и подписчики моего блога!
Сегодня главной задачей статьи стоит помочь вам разобраться со свойством css display. Я дам вам точное описание данного инструмента, перечислю все его возможные значения, расскажу, как меняется поведение свойства в зависимости от браузера, и конечно же приведу пример. Погнали…
Содержание статьи:
Все что нужно знать
Display является одним из важнейших свойств каскадных таблиц стилей, без которого очень часто невозможно обойтись. Оно позволяет управлять отображением объектов на странице. Да-да, именно отображением.
Все элементы языка html имеют свои параметры отображения по умолчанию.
Они могут относиться к блочным элементам, т.е. всегда начинаться с новой строки и занимать всю доступную ширину экрана, а могут к строчным, т.е. тем элементам, которые, например, могут включаться в параграфы, не нарушая их структуру.
А данный инструмент позволяет изменить эти виды отображения.
Для этого разработчики предусмотрели около 20 значений, которые могут изменить внешний вид страницы.
Однако тут стоит отметить, что как бы не старались разработать новые и интересные виды расположения объектов на странице, все равно они не все работают.
Все зависит от браузера, которым вы пользуетесь. Все они поддерживают разные встроенные значения. Однако есть решение! Все браузеры без исключения поддерживают 4 ключевых слова. Это inline, block, list-item и none.
Давайте разберемся подробнее со всеми значениями.
| Значение | Описание |
| none | В этом случае элемент временно удаляется из документа. Заметьте, он не является скрытым (hide) как при visibility:hidden, а именно удаляется. При этом разметка генерируется так, будто этого объекта и не было. Чтобы элемент сделать вновь видимым во время работы сервиса, необходимо обратиться за помощью к скриптам. Тогда на странице происходит переформатирование всех элементов управления уже с учетом вновь появившегося. |
| block | Задает элементам блочное отображение, т.е. появляется перенос на новую строку до измененного объекта и после. |
| list-item | Объект располагается на сайте как блочный и при этом к нему добавляется маркер списка. |
| inline | В этом случае элемент размещается как строчный (встроенный). Поэтому если к блочным элементам (например, div или p) применить такое значение, то их контент начнется сразу после места, где закончился другой объект. |
| inline-table | Отображает объект так, как обычно отображаются таблицы (<table>). Однако при этом такой объект будет строчным. Поэтому его будут обтекать другие теги. |
| inline-block | Такое значение задает блочное расположение объекта, который при этом будет вести себя как встроенный, т.е. обтекаться другими элементами. Такой вид можно сравнить со стандартными тегами типа <img>. Сам он является встроенным, а содержимое – блочным. |
| table | Элемент будет функционировать как при использование тега <table>, только вы не сможете задавать отступы, как при table cellspacing или cellpadding. |
| table-caption | Заголовок созданной таблицы будет соответствовать всем характеристикам тега <caption>. |
| table-column | Элемент выступает колонкой таблицы. Действует аналогично <col>. |
| table-cell | Помеченный элемент становится ячейкой таблицы, словно он расположен внутри парных тегов <td> или <tr>. |
| table-row | Как вы уже поняли, объект размещается как табличная строка, т.е. <tr>. |
| table-column-group | Ведет себя как <colgroup>. В этом случае объект отображается на одну или группу колонок. |
| table-row-group | Функционирует аналогично <tbody>, т.е. элемент обращается в структурный блок, состоящий из набора табличных строк. |
| table-header-group | Отображает объект как одну или несколько ячеек в заголовке таблицы. По своему действию напоминает <thead>. |
| table-footer-group | Аналогично предыдущему пункту, только для футера таблицы (тег <tfoot>). |
| run-in | В зависимости от размеров контекста элемент размещается на сайте как встроенный или как блочный. |
Помимо этих значений с css3 появились и такие ключевые слова, как flex (гибкий контейнер уровня блока), inline-flex (строчный гибкий контейнер), grid (реализация сетки) и другие.
Отношение браузеров к разнообразию значений
Как я уже говорил, в зависимости от веб-обозревателя меняется и набор работающих ключевых слов.
В общем-то, все значения, кроме четырех указанных выше, не работают в IE 6 и 7 версии, а также более ранних версий. Также есть проблемы с тегом <li>. При использовании block в этих версиях он срабатывает как list-item.
Что касается Firefox 2.0 и Opera 9.2, то в них значения table-column и table-column-group срабатывают только для тегов <col> и <colgroup> соответственно.
Также проблемы с использованием возникают в большинстве браузеров с run-in.
Время примера
В этом небольшом примере обратите внимание на то, как располагаются параграфы. Из-за «display: inline» они выстраиваются друг за другом, а не начинаются с новой строки. При этом заголовок не отображается на странице, так как используется «display: none».
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
width: 100%;
}
h1 {
color: white;
text-align: center;
display: none;
margin: 25px;
background: grey;
}
p {
display: inline;
color: white;
font-family: verdana;
font-size: 20px;
padding: 17px;
background: grey;
}
</style>
</head>
<body>
<h1> Example of changing contents design with "display"</h1>
<p>First paragraph.</p>
<p>Second paragraph.</p>
<p>third paragraph.</p>
</body>
</html> |
Спасибо, что оставались со мной. Становитесь подписчиками блога и делитесь публикациями с друзьями. До новых встреч!
С уважением, Роман
