Здравствуйте, уважаемые читатели блога сайт. Сегодня рассмотрим группу стилевых атрибутов отвечающих за то как html элемент будет отображаться на web странице, будет ли он блочным или строчным, и будет ли отображаться вообще. В эту группу входят два css свойства display и visibility. Особенно важным свойством является display, его наиболее часто применяемые значения вы уже скорей всего встречали в CSS коде: display block, none или inline
. Давайте рассмотрим все это подробнее не примерах.
Видимость html элементов — свойство visibility
Свойство стиля visibility предназначено для отображения или скрытия элемента на веб странице:
visibility: visible|hidden|collapse
Атрибут может принимать три значения:
- visible - элемент отображается на web-странице (значение по умолчанию);
- hidden - элемент не отображается на странице, или точней сказать, становится полностью прозрачным, так как под него все еще выделено место;
- collapse - применим только к строкам и столбцам таблицы. Соответствующие строки и столбцы убираются, а таблица перестраивается. Если это значение применяется не к строкам или колонкам таблицы, то результат будет таким же, как со значением hidden.
Ниже можно посмотреть как работает это свойство:
В примере выше (область в прямоугольнике) изначально виден абзац с текстом «Наведи на меня курсором мыши!», а ниже под ним пустая область — это элемент p к которому применено правило CSS «visibility: hidden» и соответственно браузер делает его невидимым. Если навести курсор мыши на верхний абзац, то нижний абзац становится видимым, потому что в этом случае к нему применяется правило «visibility: visible».
Стили CSS для этого примера выглядят так:
А html код так:
Наведи на меня курсором мыши!
Я невидимый абзац. Я появляюсь, когда вы наводите на соседний со мной сверху абзац!
Первое правило CSS говорит браузеру, что хтмл элемент с атрибутом class равным el1 должен быть невидимым на странице. А второе CSS правило означает, что при наведении на элемент с атрибутом class равным el2 его соседний элемент с атрибутом class равным el1 должен стать видимым.
Свойство стиля CSS visibility применяется довольно редко, в основном только для создания подобных эффектов исчезающих и появляющихся элементов страницы.
А вот атрибут намного популярнее в использовании. Он позволяет не только скрывать и отображать html элементы, но и вообще задавать способы их отображения. При помощи атрибута display блочные элементы можно сделать строчными и даже списком, или вообще скрыть их используя правило display:none. Например, чтобы создать выпадающие меню на чистом CSS без свойства display не обойтись.
Доступных значений у этого стиля довольно много:
display:none|inline|block|inline-block|list-item|run-in|table|inline-table|table-caption|table-column|table-column-group|table-header-group|table-row-group|table-footer-group|table-row|table-cell
Если кратко, то каждое значение оказывает на html элементы следующее действие:
- block — элемент отображается как блочный;
- inline — элемент выводится как строчный;
- inline-block — формирует блочный элемент, который обтекается другими элементами хтмл страницы, по своему действию похож на встраиваемые элементы (вроде тега );
- inline-table — делает из элемента таблицу, как при использовании тега
, но при этом таблица является встроенным элементом и она обтекается другими элементами;
- list-item — элемент становится блочным и к нему добавляется маркер списка;
none — удаляет элемент из документа, причем занимаемое им место не резервируется и веб-страница формируется так, словно элемента не было;- run-in — элемент становится блочным или строчным в зависимости от контекста;
- table — задает, что элемент является таблицей как при использовании тега
;
- table-caption — формирует из элемента заголовок таблицы, как при применении тега
; - table-cell — элемент представляет из себя ячейку таблицы, подобно тегу
или ; - table-column — элемент является колонкой таблицы, как при теге
; - table-column-group — определяет, что элемент является группой одной или нескольких колонок таблицы, как при использовании тега
; - table-footer-group — действует подобно тегу .
- table-header-group — по своему действию значение похоже на тег .
- table-row — делает из элемента строку таблицы как тег
; - table-row-group — действует как тег .
Делаем блочный элемент строчным — значения block и inline
Из статьей по языку HTML вам должно быть известно, что элементы на веб страницах формируются на основе тегов. То, как эти элементы, будут отображаться в браузере зависит от правил стилевой разметки CSS заданных вами, либо принятых по умолчанию.
При описании html тегов я часто обращал ваше внимание на тип тега — строчный он или блочный . От этого во многом зависит поведение элемента на веб странице: будет ли он стремиться занять всю ширину страницы и установить разрыв строки над и под элементом (блочные элементы), либо не будет (строчные элементы). За такое поведение элементов, как раз отвечает правило CSS display.
Узнать к какому типу по умолчанию относится тот или иной тег, можно на странице спецификации CSS «Default style sheet for HTML 4 ». В самом начале на этой странице перечислены все элементы, относящиеся к блочным, так как для них установлено правило
Для остальных элементов, если не указано иного, применяется правило display:inline .
При необходимости, с помощью правила display, всегда можно сделать блочный элемент строчным и наоборот, просто указав нужное значение в стилях CSS.
Давайте рассмотрим такой пример:
Заголовок h1
В примере два элемента: один блочный (h1) и один строчный (span). Для наглядности каждый элемент залит своим фоном с помощью :
На скриншоте видно, что элемент заголовка h1, у которого по умолчанию display равен block, занимает всю доступную ему по ширине область страницы, не смотря на то, что содержащийся в нем текст заканчивается гораздо раньше. А элемент span, у которого значение display по умолчанию принимается равной inline, по горизонтали занимает ровно столько места сколько нужно для заключенного в нем контента.
В следующем примере сделаем из блочного элемента h1 строчный . Для этого в стилях добавим для него правило display:inline:
Заголовок h1
Элемент span — строчный элементВ результате видим, что элемент h1 перестал занимать все доступное ему по ширине пространство и исчез разрыв строки после него, в следствии чего к нему прижался следующий за ним строчный элемент span.
Точно также, с помощью добавления правила display:block, можно строчный элемент span сделать блочным :
Заголовок h1
Элемент span — строчный элементВ итоге получится, что элемент span перенесется на следующую строку и будет занимать всю доступную ему по ширине область страницы, в не зависимости от количества заключенного в него контента.
Таким образом, можно манипулировать любыми элементами хтмл страниц: например, превращать в строчные элементы, а строчные в блочные.
Динамика на html странице с помощью правила CSS — display none
Прописанное для любого элемента правило display:none удаляет его из документа и никак его не отображает. При этом для него даже не резервируется занимаемое место на веб странице, как это было с правилом visibility:hidden, рассмотренном выше. Веб страница формируется так словно элемента и не было на странице.
Значение «none» для правила display применяется в основном для реализации динамики на странице , используя селекторы псевдоклассов и псевдоэлементов. Например, используя псевдокласс hover, можно задавать правила, которые начинают работать только при наведении мыши на нужный html элемент.
Таким образом можно реализовать создание выпадающего меню , сделав выпадение содержимого списка при наведении на него мышки. При в обычном состоянии для списка должно быть прописано правило «display:none», а при наведении на него мышкой устанавливать для него правило «display:block»:
- пункт 1
- пункт 2
И код примера:
- пункт 1
- пункт 2
Кроме рассмотренных подробно block, inline и none, правило display может принимать еще множество различных значений. Но они используются редко.
Например правило display:list-item позволяет сделать блочные теги элементами списка. Например у нас есть несколько подряд идущих абзацев:
абзац 1
абзац 2
абзац 3
Которые по умолчанию будут выглядеть примерно так:
Теперь если для этих абзацев прописать правило display:list-item, то браузер сформирует специальную область в которой отобразит маркеры. Правда, чтобы их увидеть, необходимо каким-то образом отодвинуть абзацы от левого края. Сделать это можно с помощью правила margin-left, указав нужный отступ:
абзац 1
абзац 2
абзац 3
Результат:
В итоге без использования тегов
- и
- мы создали маркированный html список. При желании можно настроить вид маркера при помощи CSS правила .
Кроме списка правило display позволяет преобразовывать хтмл теги в таблицу и ее составные части. Для этого каждому ставиться в соответствие свое значение дисплей: table, inline-table, table-caption, table-column, table-column-group, table-header-group, table-row-group, table-footer-group, table-row, table-cell.
И последнее значение display:inline-block , которое генерирует блочный элемент обтекаемый другими внешними и соседними элементами страницы. По своему действию это правило CSS похоже на встраиваемые элементы, подобные .
Таким образом с помощью правила display можно поменять уже имеющиеся на странице элементы на любые другие. При это не надо вносить изменения в сам html код, а достаточно просто изменить отображение тегов в браузере. Для этого достаточно внести пару строк в содержимое css файла и все.
На этом заканчиваю, не забывайте подписываться на обновления блога и нажимать на кнопочки социальных сетей! До новых встреч!
Разрешите представить вам перевод статьи «Cross-Browser Inline-Block», написанной Райном Доэрти холодным февралем 2009 года. В статье рассказывается о верстке элементов списка с установкой для свойства display значения inline-block . Статья об этом, а также о трудностях, возникающих в процессе достижения результата и о методах их «лечения».
Inline-block , заманчивое значение для свойства display , которое обещает очень много, а выполняет совсем мало. Очень часто я получал PSD-файлы, подобные этому:
И плакал.
Обычно такой способ отображения не вызывает проблем. Фиксированная ширина, фиксированная высота, float: left и готово. Если бы не одно, но! Дизайн должен отображаться корректно при любом количестве содержимого. В нашем случае, если в одном из блоков окажется чуть больше данных, то он «сломает» всю сетку.
Так как первый элемент выше следующих, пятый становится не под ним, как нам того хотелось бы, а «обтекает» по правому краю. В общем, нам необходима эластичность таблицы, но в правильной, семантичной верстке.
Начнем с простого примера, где у пунктов списка для свойства display установлено значение inline-block :
-
This is awesome
...
- выравнивается с базовой линией родительского элемента
- . Это просто текстовый узел, находящийся непосредственно в
- дополнительным
-
This is awesome
- будут выводиться на экран так, будто используют значение inline-block . Как? Будем использовать hasLayout , волшебное свойство IE, делающее доступными многие манипуляции. Вы не можете явно указать для элемента hasLayout: true или сделать это каким-либо подобным простым образом, однако можете запустить механизм, указав zoom: 1 .
- , то научим IE 7 отображать их совсем как inline-block :
- с нужной высотой. Если же содержимое превысит указанную величину, то просто растянет свой контейнер. Все остальные браузеры проигнорируют _height .
-
This is awesome
- поддержка значений table-footer-group
и table-header-group
происходит только для элементов
и
;
- для элементов
- понимает значение block как list-item ;
- значение inline-block применяется только для строчных элементов, с блочными элементами работает некорректно.
Opera 9.2, а также Firefox 2.0:
- значение table-column
применяется только для
; - значение table-column-group
поддерживается только для
.
Chrome до версии 4, а также Safari до версии 5:
- значение run-in поддерживают только для элементов, которые располагаются перед строчными элементами или такими, у которых значение display установлено как inline .
- Значение table-cell не работает, если нет элементов со значениями свойства display : table и table-row .
- Значение run-in больше не поддерживается.
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация ) - спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация ) - группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация ) - на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект ) - более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor"s draft (Редакторский черновик ) - черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации ) - первая черновая версия стандарта.
Браузеры
none, inline, block 4 12 1 7 1 1 inline-block 5.5 12 1 7 1 3 inline-flex, flex 11 12 29 17 9 28 list-item 6 12 1 7 1 1 run-in 8 12 1 7 1 inline-table 8 12 1 7 1 3 table, table-cell, table-column, table-column-group,table-header-group, table-row-group, table-footer-group, table-row, table-caption 8 12 1 7 1 1 Свойства HTML display и visibility используются, чтобы вывести или скрыть HTML-элементы . Но тогда какая между ними разница? Чтобы понять это, посмотрите на приведенный ниже рисунок, здесь я использовал три элемента div :
Мы используем три элемента div , которые показаны в разделе 1 (с левой стороны ). Изначально все элементы div выводятся без применения свойств display или visibility .
Во второй части рисунка отображаются только div 1 и div 3 . Для div 2 задано visibility: hidden , но мы все равно видим пространство, которое занимает этот элемент.
Посмотреть онлайн демо-версию и код
В третьем разделе также отображаются только div 1 и div 3 , в то время как div 2 скрыт с помощью свойства HTML display none . Можно увидеть разницу: div 3 смещается вверх и для div 2 больше не отводится пространство.
Посмотреть онлайн демо-версию и код
Синтаксис свойства CSS visibility
Вот, как использовать свойство CSS visibility :
visibility: hidden;
Значение по умолчанию для свойства CSS visibility — visible . Также можно использовать:
visibility: collapse;
Данное значение используется в HTML-таблицах .
Синтаксис свойства CSS display
Это позволяет скрыть элемент, для которого задано значение данного свойства. Именно его я применил для раздела 3 в приведенном выше примере.
Свойство HTML display также используется, чтобы изменить поведение строчных или блочных элементов:
display: inline;
Этот код задает для блочного элемента поведение строчного. Например, div представляет собой блочный элемент. Применив к нему display: inline , мы задаем для него поведение строчного элемента:
Значение block делает противоположное. Например, элемент span является строчным. Если мы применим к нему display: block , он будет вести себя как блочный элемент.
Пример применения свойства display для отображения / скрытия меню
Я использовал элемент div , который содержит маркированный список
- , элементы списка и гиперссылки. Ссылки представляют собой пункты меню.
- Родительский div очерчен черной рамкой и занимает всю доступную ширину;
- span очерчен синей рамкой, внутри div он занимает только необходимое для отображения пространство и начинается с той же самой строки;
- Абзац, который очерчен красной рамкой, также занимает все доступное пространство и начинается с новой строки.
- если не задано значение width, элемент растягивается на весь родительский контейнер.
какой-то текст
какой-то текст
- если задано значение width, ширина складывается из margin, border, padding, width (). Поэтому красная рамка выходит за пределы родительского блока при width: 100%.
какой-то текст
width: 100%;
border: 4px double red;какой-то текст
- если не задано значение height, элемент растягивается на высоту, необходимую содержимому блоку, иначе высота складывается из margin, border, padding, height.
- при превышении указанной высоты/ширины содержимое отображается поверх блока, коли не указано иное с помощью свойства . В нашем случае красная рамка видна над голубой родительского блока. Пример использования
- маленькая
- с длинным текстом
<span class="svetlyi">Аspan >какой-то текст прямоугольник А переносится на новую строку какой-то текст
- width и height игнорируются. Его ширина - это ширина содержимого плюс margin, border и padding.
- margin-top и margin-bottom игнорируются.
- совместно с padding-top и padding-bottom следует корректировать line-height, иначе строки будут "наезжать" друг на друга.
какой-то текст прямоугольник А переносится на новую строку и наезжает на соседние строки из-за установленного значения padding какой-то текст
- не может иметь . Но при этом поддаётся его воздействию, если данное свойство задано родителю-блоку.
- маленькая
- с длинным текстом
- маленькая
- на строку, на которой расположилась таблица, уже нельзя добавить другой элемент.
- если не задано значение width, элемент растягивается по длине содержимого, иначе ширина складывается из margin, border, padding, width. При превышении указанной высоты/ширины содержимое отображается поверх блока.
какой-то текст
width: auto;
display: table;какой-то текст
- не поддаются влиянию блоки, если у родителя , только их содержимое.
- не действуют такие свойства, как .
- применимы свойства .
- применимы свойства .
- на строку, на которой расположилась строка таблицы, уже нельзя добавить другой элемент.
- элемент растягивается по длине содержимого.
- width, border, padding, margin, vertical-align игнорируются.
- можно изменить значение height.
- не поддаются влиянию блоки, если у родителя , только их содержимое.
- элементы следуют друг за другом.
- если не задано значение width, элемент растягивается по длине содержимого, иначе ширина складывается из border, padding, width. Но не более ширины контейнера и пропорционально всем длинам ячеек. Поэтому я советую, не задавать width для ячеек нижних строчек.
- высота всех ячеек в строке одинакова и составляет высоту самой высокой ячейки. Удобно при построении двух- и т.д. колоночных макетов, где требуются колонки одинаковой высоты.
- margin игнорируется. Это свойство заменяется border-spacing у родителя.
- на его содержимое можно воздействовать посредством и .
- маленькая
- подпункт1
- подпункт2
- с длинным текстом
- маленькая
- подпункт1
- подпункт2
- с длинным текстом
- маленькая
- подпункт1
- подпункт2 длинный
- с длинным текстом
Для разработки этого меню использовался ряд других свойств CSS . Свойство display изначально задано не было. Это означает, что меню будет отображаться.
Посмотреть онлайн демо-версию и код
Родительский div содержит меню, которое представляет собой сочетание элементов ul , li и . При использовании display: none элемент div будет скрыт, как и все меню. Когда меню исчезает, ссылки перемещаются вверх, занимая пространство меню, потому что при использовании HTML display none элемент, к которому применено свойство, больше не будет занимать отведенное для него пространство.
Демо-версия меню с использованием свойства visibility
Я использую тот же пример, что и выше, но на этот раз применю свойство CSS visibility , чтобы показать и скрыть меню. Разница заключается в используемом коде jQuery :
visibility: hidden
Посмотреть онлайн демо-версию и код
В этом примере можно увидеть разницу. Когда нажимается ссылка скрыть меню, меню исчезает. При клике по ссылке показать меню, оно вновь становится видимым. Но ссылки при этом остаются на своих местах и не смещаются (в отличие от HTML display ).
Пример использования свойства CSS visibility для HTML-таблицы
В следующем примере мы создадим HTML-таблицу с помощью фреймворка Bootstrap . Таблица содержит пять строк, которые первоначально отображаются. На данном этапе таблица выглядит следующим образом:
Посмотреть онлайн демо-версию и код
Для строк таблицы использованы разные классы, чтобы задать их стили. Например, danger , active , warning и т.д. Строки таблицы пронумерованы от 1 до 5 (первый столбец слева ).
Теперь я использую свойство visibility для второй строки, чтобы скрыть ее. Это делается следующим образом:
visibility: collapse;
Таким образом значение collapse также используется для элементов таблицы. Оно применяется для удаления строки, при этом структура таблицы не изменяется. Посмотрите на приведенный ниже рисунок и на код демо-версии:
Посмотреть онлайн демо-версию и код
Вторая строка не видна, но структура таблицы остается неизменной. Если вы используете значение collapse для любых других элементов, оно будет работать, как значение hidden .
Применение свойства CSS display к таблице
Теперь тот же самый пример, за исключением того, что я буду использовать свойство HTML display , чтобы скрыть строку в таблице:
Посмотреть онлайн демо-версию и код
Вторая строка исчезла, а третья строка перемещается вверх, чтобы занять ее место.
Использование display для строчных элементов
Свойство CSS display также используется для изменения поведения строчных и блочных элементов.
Напомню, что блочные элементы занимают все доступное им пространство и начинаются с новой строки. Например, абзацы или блоки div — это блочные элементы.
Строчные элементы занимают только необходимое для отображения пространство и не начинаются с новой строки. В качестве примеров строчных элементов можно привести span , тег ссылки и т.д.
Свойство HTML display позволяет изменять поведение строчных и блочных элементов.
Чтобы изменить поведение блочного элемента на поведение строчного:
display: inline;
Чтобы изменить поведение строчного элемента на поведение блочного:
В следующем примере поведение элемента span изменяется на поведение блочного элемента. А поведение абзаца с помощью свойства CSS display изменяется на поведение строчного элемента.
Чтобы понять, в чем заключается разница, сначала посмотрите на приведенный ниже рисунок и исходный код, в котором свойство HTML display еще не применено:
Посмотреть онлайн демо-версию и код
На странице демо-версии отображен родительский div , а внутри него span и абзац. Изначально их поведение является стандартным для этих элементов:
Теперь с помощью HTML display block я изменю поведение span на поведение блочного элемента, а поведение абзаца на поведение строчного. Родительский div остается без изменений. Смотрите результат и демо-версию.
.
Акакой-то текст
какой-то текст
Уберём ненужные отступы (padding, margin), маркер (list-style) и подчёркивание (text-decoration) и добавим рамку (border)
display: inline;
По умолчанию присвоен a, span, b, em и т.д.
Пробелы между тегами li нужно убирать. Когда разделяются слова пробелом, между ними появляется пустое пространство, здесь то же самое.
display: inline-block;
По умолчанию присвоен img, input и т.д. По отношению к внешним элементам ведёт себя как inline, а внутренним block.
Пример использованияdisplay: list-item;
По умолчанию присвоен li. Элемент показан как блочный с маркером списка. Вид маркера изменяет свойство . В примере выше маркер отсутствует, поскольку у li display отличный от list-item.
display: run-in;
Если после элемента с display в значении run-in следует блок, то он становится в одну строку с ним и является его частью. Иначе элемент вызывает разрыв строки. Не поддерживается Mozilla Firefox.
Акакой-то текстdisplay: run-in;
вторая строкакакой-то текст
display: table;
По умолчанию присвоен table.
display: inline-table;
Аналогичен display: inline-block.
display: table-row;
По умолчанию присвоен tr. Объединяет группу ячеек, которые не будут перенесены на другую строку.
display: table-cell;
По умолчанию присвоен td и th. Я рассматриваю ситуацию, когда родитель имеет display: table-row.
1112334556
Пример использованиямаленькая с длинным текстом в две строкицена ценаdisplay: table-caption (table-column, table-column-group, table-footer-group, table-header-group, table-row-group)
По умолчанию присвоен caption (col, colgroup, tfoot, thead, tbody). Пока не вижу практической ценности.
display: none;
Элемент становится невидимым, не сохраняя занимаемое место.
Пример использования
Результат выглядит корректно в Firefox 3, Safari 3 и в Opera:
Кажется, будто что-то не так с вертикальным выравниванием. Говоря по правде, никаких ошибок нет, это как раз корректное поведение браузера, но совсем не тот результат, которого мы бы хотели.
А происходит здесь следующее, базовая линия (baseline) каждого элемента
Базовая линия на рисунке выше обозначена линией, идущей через основание символов. Значением по-умолчанию для свойства vertical-align у inline и inline-block элементов является baseline . Это значит, что базовая линия элементов выравнивается с базовой линией родителя. На рисунке ниже представлен пример такого выравнивания:
Как видите, каждая базовая линия блоков на рисунке выше выравнена по базовой линии текста «This is the baseline», который не является элементом
Получить желаемый изначально вариант выравнивания довольно просто, достаточно для свойства vertical-align указать значение top и получить в результате отличную сетку:
Вот только это не работает в Firefox 2, IE 6 и 7:
Для начала займемся Firefox 2.
Firefox 2 не поддерживает значение inline-block , зато отлично понимает специфичное для Мозиллы значение -moz-inline-stack для свойства display . Оно приводит к результатам, подобным действию inline-block . Когда мы добавляем его перед display: inline-block , то Firefox 2 игнорирует вышеуказанное, так как не понимает его, и использует -moz-inline-stack . Другие браузеры используют inline-block , игнорируя непонятное для них -moz-inline-stack .
К сожалению, это вызывает небольшой баг:
Честно, я не знаю, что является его причиной. К счастью, лечится он довольно просто обертыванием всего содержимого элемента
.Теперь перейдем к IE 7. Он тоже не поддерживает inline-block , но мы можем использовать трюк, благодаря которому элементы
Технически элементы с hasLayout , установленным в значение true сами отвечают за рендеринг самих себя и дочерних элементов. Объедините это с min-height и width , и получите результат, очень близкий к display: block . Это как магический порошок, заставляющий исчезать все появляющиеся при отображении проблемы.
Когда мы добавим zoom: 1 и *display: inline (звездочка является хаком для IE 6 и IE 7) для элементов
Почти готово. Остался лишь IE 6:
IE 6 не поддерживает min-height , но взамен мы можем использовать его неверное обращение к свойству height . Установим для _height (обратите внимание на подчеркивание спереди) значение в 250px и получим все элементы
Финальный CSS и HTML выглядит так:
Многоцелевое свойство, которое определяет, как элемент должен быть показан в документе.
Краткая информация
Синтаксис
Display: block | inline | inline-block | inline-table | inline-flex | flex | 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
Обозначения
×Описание Пример <тип> Указывает тип значения. <размер> A && B Значения должны выводиться в указанном порядке. <размер> && <цвет> A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count Группирует значения. [ crop || cross ] * Повторять ноль или больше раз. [,<время>]* + Повторять один или больше раз. <число>+ ? Указанный тип, слово или группа не является обязательным. inset? {A, B} Повторять не менее A, но не более B раз. <радиус>{1,4} # Повторять один или больше раз через запятую. <время># Значения
block Элемент показывается как блочный. Применение этого значения для строчных элементов, например , заставляет его вести подобно блокам — происходит перенос строк в начале и в конце содержимого. inline Элемент отображается как строчный. Использование блочных элементов, таких, как
иАвтоматически создаёт перенос и показывает их содержимое с новой строки. Значение inline отменяет эту особенность, поэтому содержимое блочных элементов начинается с того места, где окончился предыдущий элемент. inline-block Это значение генерирует блочный элемент, который обтекается другими элементами веб-страницы подобно строчному элементу. Фактически такой элемент по своему действию похож на встраиваемые элементы (вроде ). При этом его внутренняя часть форматируется как блочный элемент, а сам элемент — как строчный. inline-table Определяет, что элемент является таблицей, как при использовании
, но при этом таблица является строчным элементом и происходит её обтекание другими элементами, например, текстом. inline-flex Элемент ведёт себя как строчный и выкладывает содержимое согласно флекс-модели. flex Элемент ведёт себя как блочный и выкладывает содержимое согласно флекс-модели. list-item Элемент выводится как блочный и добавляется маркер списка. none Временно удаляет элемент из документа. Занимаемое им место не резервируется, и веб-страница формируется так, словно элемента и не было. Изменить значение и сделать вновь видимым элемент можно с помощью скриптов, обращаясь к свойствам через объектную модель. В этом случае происходит переформатирование данных на странице с учётом вновь добавленного элемента. run-in Устанавливает элемент как блочный или строчный, в зависимости от контекста. table Определяет, что элемент является блочной таблицей, подобно использованию
. table-caption Задаёт заголовок таблицы, подобно применению
. table-cell Указывает, что элемент представляет собой ячейку таблицы ( . table-header-groupили ). table-column
Назначает элемент колонкой таблицы, словно был добавлен. table-column-group
Определяет, что элемент является группой одной или более колонок таблицы, как при использовании. table-footer-group
Используется для хранения одной или нескольких строк ячеек, которые отображаются в самом низу таблицы. По своему действию сходно с работой
Элемент предназначен для хранения одной или нескольких строк ячеек, которые представлены вверху таблицы. По своему действию сходно с работой . table-row Элемент отображается как строка таблицы (). table-row-group .
Создаёт структурный блок, состоящий из нескольких строк таблицы, аналогично действиюПример
display Пример
Формула серной кислоты: H2 SO4
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства display
Объектная модель
Объект .style.display
Примечание
Internet Explorer до версии 7 включительно:
-
- list-item — элемент становится блочным и к нему добавляется маркер списка;