Содержание:
- 1 display: block;
- 2 display: inline;
- 3 display: inline-block;
- 4 display: list-item;
- 5 display: run-in;
- 6 display: table;
- 7 display: inline-table;
- 8 display: table-row;
- 9 display: table-caption (table-column, table-column-group, table-footer-group, table-header-group, table-row-group)
- 10 display: none;
- 11 Значение none
- 12 Значение block
- 13 Значение inline
- 14 Значение inline-block
- 15 Значения table-*
- 16 Значения list-item, run-in и flex
display: block;
По умолчанию присвоен p, div, form, ul, h1 и т.д.
-
на строку, на которой расположился блок, уже нельзя добавить другой элемент, даже когда остаётся пустое пространство. Искл., при применении свойств position, float, transform.
- маленькая
- с длинным текстом
Для того, чтобы вся строка была ссылкой
- маленькая
- с длинным текстом
Уберём ненужные отступы (padding, margin), маркер (list-style) и подчёркивание (text-decoration) и добавим рамку (border)
- маленькая
- с длинным текстом
display: inline;
По умолчанию присвоен a, span, b, em и т.д.
-
элементы следуют друг за другом.
display: inline-block;
По умолчанию присвоен img, input и т.д. По отношению к внешним элементам ведёт себя как inline, а внутренним block.
- элементы следуют друг за другом.
- имеет w >какой-то текст
display: list-item;
По умолчанию присвоен li. Элемент показан как блочный с маркером списка. Вид маркера изменяет свойство list-style. В примере выше маркер отсутствует, поскольку у li display отличный от list-item.
display: run-in;
Если после элемента с display в значении run-in следует блок, то он становится в одну строку с ним и является его частью. Иначе элемент вызывает разрыв строки. Не поддерживается Mozilla Firefox.
display: table;
По умолчанию присвоен table.
- на строку, на которой расположилась таблица, уже нельзя добавить другой элемент.
- если не задано значение w >какой-то текст
display: inline-table;
Аналогичен display: inline-block.
display: table-row;
По умолчанию присвоен tr. Объединяет группу ячеек, которые не будут перенесены на другую строку.
- на строку, на которой расположилась строка таблицы, уже нельзя добавить другой элемент.
- элемент растягивается по длине содержимого.
- w >По умолчанию присвоен td и th. Я рассматриваю ситуацию, когда родитель имеет display: table-row.
- элементы следуют друг за другом.
- если не задано значение w >
По умолчанию присвоен caption (col, colgroup, tfoot, thead, tbody). Пока не вижу практической ценности.
display: none;
Элемент становится невидимым, не сохраняя занимаемое место.
10 комментариев:
Marina Voronova Привет) мне необходимо разместить два списка ul в одну строку. применяю к ul display: inline-block; но ничего не получается(
в чем м.б. ошибка? NMitra Привет. display: inline-block; нужно применять к li Marina Voronova а как тогда расположить два списка ul в одну строку?
применяю к ul display:block; но это не работает( NMitra Посмотрите про float: left; http://shpargalkablog.ru/2011/05/float-left-div-css.html
Возможно нужно это http://shpargalkablog.ru/2013/07/justify.html или это http://shpargalkablog.ru/2013/12/border.html#box-sizing-border-box (причины, почему съезжает элемент вниз). К последней ссылке http://shpargalkablog.ru/2013/01/skachet-menu.html SelenIT «display: inline-block; По умолчанию присвоен img, input и т.д.» — внешне оно так выглядит, но формально у них по умолчанию всё-таки display:inline. Просто это так называемые «замещаемые» элементы, для которых визуальное форматирование описано в отдельном подразделе спецификации. Но в Firefox, например, если картинка не загрузилась, то ее alt отображается как обычный текст, при необходимости переносясь на новую строку, как и должно быть при display:inline. NMitra Спасибо, Илья, очень важное замечание! Анонимный Здравствуйте, Наталья!
У меня есть один вопрос. Он относиться к описанию стиля "display: table-cell;"
Все ячейки, т.е. элементы "див" со стилем display:table-cell? имеют заданные индивидуальные величины ширины.
Ячейка1 — "111" — 20%
Ячейка2 — "2" — 10%
Ячейка3 — "33" — 30%
Ячейка4 — "4" — 20%
Итого: суммарно 80% от всей ширины содержащего их контейнера.
Вопрос: Почему в таком случае они заполняют весь контейнер? Смысл в таком случае устанавливать значения ширины? NMitra Здравствуйте. Это особенность таблицы. Сделайте ещё одну пустую ячейку или контейнеру с display: table; укажите максимально возможную ширину. Анонимный Здравствуйте. Спасибо за последний ответ.
Получается так: при указании максимальной ширины ( >=20%) для последней ячейки — все четыре предыдущие занимают свою ширину согласно задекларированным значениям, а последняя — всё оставшееся место.
Если же указать ширину последней ячейки меньше оставшегося пространства ( NMitra Я не разбирала этот вопрос столь детально. Возьмите родителя, задайте ему display: table; и table-layout: fixed; Таблица будет вести себя более предсказуемо.
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
6.0+ | 2.0+ | 7.0+ | 1.0+ | 1.0+ | 2.1+ | 1.0+ |
Краткая информация
Значение по умолчанию | inline |
---|---|
Наследуется | Нет |
Применяется | Ко всем элементам |
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/visuren.html#display-prop |
Версии CSS
CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
---|
Описание
Многоцелевое свойство, которое определяет, как элемент должен быть показан в документе.
Синтаксис
display: block | inline | inline-block | inline-table | list-item | none | run-in | table | table-caption | table-cell | table-column-group | table-column | table-footer-group | table-header-group | table-row | table-row-group
Значения
Список возможных значений этого свойства, понимаемый разными браузерами очень короткий — block , inline , list-item и none . Все остальные допустимые значения поддерживаются браузерами выборочно. В табл. 1 приведены некоторые популярные браузеры и их поддержка различных значений.
HTML5 CSS 2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства display
Объектная модель
[window.]document.getElementBy >elementID «).style.display
Браузеры
Internet Explorer до версии 7 включительно:
- поддержка значений table-footer-group и table-header-group происходит только для тегов и ;
- для элементов
- понимает значение block как list-item ;
- значение inline-block применяется только для встроенных элементов, с блочными элементами работает некорректно.
Opera 9.2, а также Firefox 2.0:
- значение table-column применяется только для тега ;
- значение table-column-group поддерживается только для тега .
Chrome 2.0, а также Safari версии 3 и старше, iOS:
- значение run-in поддерживают только для элементов, которые располагаются перед встроенными элементами или такими, у которых значение display установлено как inline .
- Значение table-cell не работает, если нет элементов со значениями свойства display : table и table-row .
Свойство display имеет много разных значений. Обычно, используются только три из них: none , inline и block , потому что когда-то браузеры другие не поддерживали.
Но после ухода IE7-, стало возможным использовать и другие значения тоже. Рассмотрим здесь весь список.
Значение none
Самое простое значение. Элемент не показывается, вообще. Как будто его и нет.
Значение block
- Блочные элементы располагаются один над другим, вертикально (если нет особых свойств позиционирования, например float ).
- Блок стремится расшириться на всю доступную ширину. Можно указать ширину и высоту явно.
Это значение display многие элементы имеют по умолчанию:
Блоки прилегают друг к другу вплотную, если у них нет margin .
Значение inline
- Элементы располагаются на той же строке, последовательно.
- Ширина и высота элемента определяются по содержимому. Поменять их нельзя.
Например, инлайновые элементы по умолчанию: , .
Если вы присмотритесь внимательно к примеру выше, то увидите, что между внутренними и есть пробел. Это потому, что он есть в HTML.
Если расположить элементы вплотную – его не будет:
Содержимое инлайн-элемента может переноситься на другую строку.
При этом каждая строка в смысле отображения является отдельным прямоугольником («line box»). Так что инлайн-элемент состоит из объединения прямоугольников, но в целом, в отличие от блока, прямоугольником не является.
Это проявляется, например, при назначении фона.
Например, три прямоугольника подряд:
Если инлайн-элемент граничит с блоком, то между ними обязательно будет перенос строки:
Значение inline-block
Это значение – означает элемент, который продолжает находиться в строке ( inline ), но при этом может иметь важные свойства блока.
Как и инлайн-элемент:
- Располагается в строке.
- Размер устанавливается по содержимому.
Во всём остальном – это блок, то есть:
- Элемент всегда прямоугольный.
- Работают свойства width/height .
Это значение display используют, чтобы отобразить в одну строку блочные элементы, в том числе разных размеров.
Свойство vertical-align позволяет выровнять такие элементы внутри внешнего блока:
Как и в случае с инлайн-элементами, пробелы между блоками появляются из-за пробелов в HTML. Если элементы списка идут вплотную, например, генерируются в JavaScript – их не будет.
Значения table-*
Современные браузеры (IE8+) позволяют описывать таблицу любыми элементами, если поставить им соответствующие значения display .
Для таблицы целиком table , для строки – table-row , для ячейки – table-cell и т.д.
Важно то, что это действительно полноценная таблица. Используются табличные алгоритмы вычисления ширины и высоты элемента, описанные в стандарте.
Это хорошо для семантической вёрстки и позволяет избавиться от лишних тегов.
С точки зрения современного CSS, обычные
и т.д. – это просто элементы с предопределёнными значениями display : |
Очень подробно об алгоритмах вычисления размеров и отображении таблиц рассказывает стандарт CSS 2.1 – Tables.
Вертикальное центрирование с table-cell
Внутри ячеек свойство vertical-align выравнивает содержимое по вертикали.
Это можно использовать для центрирования:
CSS не требует, чтобы вокруг table-cell была структура таблицы: table-row и т.п. Может быть просто такой одинокий DIV , это допустимо.
При этом он ведёт себя как ячейка TD , то есть подстраивается под размер содержимого и умеет вертикально центрировать его при помощи vertical-align .
Значения list-item, run-in и flex
У свойства display есть и другие значения. Они используются реже, поэтому посмотрим на них кратко:
Этот display по умолчанию используется для элементов списка. Он добавляет к блоку содержимым ещё и блок с номером(значком) списка, который стилизуется стандартными списочными свойствами:
Если после run-in идёт block , то run-in становится его первым инлайн-элементом, то есть отображается в начале block .
Если ваш браузер поддерживает это значение, то в примере ниже h3 , благодаря display:run-in , окажется визуально внутри div :
Если же вы видите две строки, то ваш браузер НЕ поддерживает run-in .
Вот, для примера, правильный вариант отображения run-in , оформленный другим кодом:
Если этот вариант отличается от того, что вы видите выше – ваш браузер не поддерживает run-in . На момент написания этой статьи только IE поддерживал display:run-in .
Flexbox позволяет удобно управлять дочерними и родительскими элементами на странице, располагая их в необходимом порядке. Официальная спецификация находится здесь: CSS Flexible Box Layout Module