display | htmlbook.ru

Internet Explorer Chrome Opera Safari Firefox Android iOS
6.0+ 2.0+ 7.0+ 1.0+ 1.0+ 2.1+ 1.0+

Краткая информация

Версии 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 приведены некоторые популярные браузеры и их поддержка различных значений.

Табл. 1. Поддержка браузерами значений display
Значение Описание IE6 IE7 IE8 Cr2 Cr8 Op9.2 Op10 Sa3.1 Sa5 Fx3 Fx4
block Элемент показывается как блочный. Применение этого значения для встроенных элементов, например тега <span>, заставляет его вести подобно блокам — происходит перенос строк в начале и в конце содержимого.
inline Элемент отображается как встроенный. Использование блочных тегов, таких как <div> и <p>, автоматически создает перенос и показывает содержимое этих тегов с новой строки. Значение inline отменяет эту особенность, поэтому содержимое блочных элементов начинается с того места, где окончился предыдущий элемент.
inline-block Это значение генерирует блочный элемент, который обтекается другими элементами веб-страницы подобно встроенному элементу. Фактически такой элемент по своему действию похож на встраиваемые элементы (вроде тега <img>). При этом его внутренняя часть форматируется как блочный элемент, а сам элемент — как встроенный.
inline-table Определяет, что элемент является таблицей как при использовании тега <table>, но при этом таблица является встроенным элементом и происходит ее обтекание другими элементами, например, текстом.
list-item Элемент выводится как блочный и добавляется маркер списка.
none Временно удаляет элемент из документа. Занимаемое им место не резервируется и веб-страница формируется так, словно элемента и не было. Изменить значение и сделать вновь видимым элемент можно с помощью скриптов, обращаясь к свойствам через объектную модель. В этом случае происходит переформатирование данных на странице с учетом вновь добавленного элемента.
run-in Устанавливает элемент как блочный или встроенный в зависимости от контекста.
table Определяет, что элемент является блочной таблицей подобно использованию тега <table>.
table-caption Задает заголовок таблицы подобно применению тега <caption>.                      
table-cell Указывает, что элемент представляет собой ячейку таблицы (тег <td> или <th>).                      
table-column Назначает элемент колонкой таблицы, словно был добавлен тег <col>.                      
table-column-group Определяет, что элемент является группой одной или более колонок таблицы, как при использовании тега <colgroup>.                  
 
 
table-footer-group Используется для хранения одной или нескольких строк ячеек, которые отображаются в самом низу таблицы. По своему действию сходно с работой тега <tfoot>.                      
table-header-group Элемент предназначен для хранения одной или нескольких строк ячеек, которые представлены вверху таблицы. По своему действию сходно с работой тега <thead>.                      
table-row Элемент отображается как строка таблицы (тег <tr>).                      
table-row-group Создает структурный блок, состоящий из нескольких строк таблицы аналогично действию тега <tbody>.                      

Пример

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>display</title>
  <style>
   .example {
    border: dashed 1px #634f36; /* Параметры рамки */
    background: #fffff5; /* Цвет фона */
    font-family: "Courier New", Courier, monospace; /* Шрифт текста */
    padding: 7px; /* Поля вокруг текста */
    margin: 0 0 1em; /* Отступы вокруг */
   }
   .exampleTitle {
    border: 1px solid black; /* Параметры рамки */
    border-bottom: none; /* Убираем линию снизу */
    padding: 3px; /* Поля вокруг текста */
    display: inline; /* Устанавливаем как встроенный элемент */
    background: #efecdf; /* Цвет фона */
    font-weight: bold; /* Жирное начертание */
    font-size: 90%; /* Размер текста */
    margin: 0; /* Убираем отступы вокруг */
    white-space: nowrap; /* Отменяем переносы текста */
   }
  </style>
 </head> 
 <body> 
  <p>Пример</p>
  <p>
  &lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;&gt;<br>
  &lt;html&gt;<br>
  &lt;body&gt;<br>
  &lt;b&gt;Формула серной кислоты:&lt;/b&gt;
  &lt;i&gt;H&lt;sub&gt;&lt;small&gt;2&lt;/small&gt;&lt;/sub&gt;
  SO&lt;sub&gt;&lt;small&gt;4&lt;/small&gt;
  &lt;/sub&gt;&lt;/i&gt;<br>
  &lt;/body&gt;<br>
  &lt;/html&gt;</p>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства display

Объектная модель

[window.]document.getElementById(«elementID»).style.display

Браузеры

Internet Explorer до версии 7 включительно:

  • поддержка значений table-footer-group и table-header-group происходит только для тегов <thead> и <tfoot>;
  • для элементов <li> понимает значение block как list-item;
  • значение inline-block применяется только для встроенных элементов, с блочными элементами работает некорректно.

Opera 9.2, а также Firefox 2.0:

  • значение table-column применяется только для тега <col>;
  • значение table-column-group поддерживается только для тега <colgroup>.

Chrome 2.0, а также Safari версии 3 и старше, iOS:

  • значение run-in поддерживают только для элементов, которые располагаются перед встроенными элементами или такими, у которых значение display установлено как inline.

Safari 3.1

  • Значение table-cell не работает, если нет элементов со значениями свойства display: table и table-row.

htmlbook.ru

Свойство display

Опубликовано: 9 июля 2015 Обновлено: 12 июля 2018

Свойство display отвечает за вывод и визуальное отображение элементов на странице. Также с помощью свойства display можно изменить тип генерируемого контейнера. Свойство не наследуется.

Любой html-элемент генерирует на веб-странице прямоугольный контейнер. Все видимое на экране состоит из контейнеров разных типов.

В нормальном потоке блочные элементы генерируют структурные блоки и выводятся вертикально один над другим, занимая по ширине 100% ширины блока-контейнера.

Строковые контейнеры генерируют строковые блоки и выводятся в строке горизонтально. Ширина строковых элементов равна ширине их содержимого.

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

Таблицы обрабатываются браузером как блоки. Внутренние элементы таблицы генерируют прямоугольные блоки, имеющие содержимое, отступы padding и рамки border, но не имеющие полей margin.

Таблица 1. Значения свойства display
display
Значения:
inline Значение по умолчанию. Элемент генерирует строковый блок. Аналог — тег <span>.
block Элемент генерирует структурный блок, как и тег <div>.
flex Элемент генерирует структурный блок, который создает адаптивный контейнер для дочерних элементов.
inline-block Элемент генерирует строковый блок.
inline-flex Элемент генерирует строковый блок, который создает адаптивный контейнер для дочерних элементов.
inline-table Элемент определяет структурный блок, который генерирует строковый блок.
list-item Элемент генерирует структурный блок, который отображается как элемент списка <li>.
table Элемент генерирует структурный блок. На странице ведет себя аналогично <table>.
table-caption Элемент генерирует основной заголовок таблицы. На странице ведет себя аналогично <caption>.
table-column Элемент описывает столбец ячеек, визуальное представление не генерируется. Аналог — <col>.
table-column-group Элемент объединяет один или несколько столбцов. Аналог — <colgroup>.
table-cell Элемент генерирует отдельную ячейку таблицы, на странице ведет себя аналогично <th> и <td>.
table-header-group Элемент определяет группу строк заголовка, которая всегда отображается перед остальными строками и группами строк. Аналог — <thead>.
table-footer-group Элемент определяет группу строк заголовка, которая всегда отображается после всех остальных строк и перед любым нижним основным заголовком. Ведет себя аналогично <tfoot>.
table-row-group Элемент объединяет одну или несколько строк. Аналог — <tbody.
table-row Элемент является строкой ячеек. Пример — <tr>.
none Элемент не генерирует никакой контейнер, полностью удаляясь со страницы.
inherit Наследует свойство от родительского элемента.

html5book.ru

Использование свойства CSS «display: none»

Каскадные таблицы стилей (CSS) позволяют организовать внешний вид и оформление интернет-страницы. Одним из наиболее часто употребляемых свойств и его значений является «display: none».

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

Само свойство является многоцелевым и определяет тип отображения элемента в документе. В зависимости от выбранного значения определенный участок страницы может отображаться блочно, линейно, как пункты списка, как часть таблицы и т. д. Таким образом, благодаря свойству «display», можно изменять тип самого блока в документе.

Что касается связки «свойство-значение display: none», то она позволяет удалить элемент или блок из документа. При этом место под данный кусок страницы не резервируется, то есть он выпадает из потока. Все элементы, которые находятся за «удаленным», попросту не видят его и игнорируют размеры и положение такого блока. Для возвращения скрытого объекта необходимо обратиться к документу через скрипты, которые просто изменят значение свойства на необходимый формат. При этом произойдет автоматическое форматирование страницы с учетом нового объекта на ней.

Разница между свойствами «display» и «visibility»

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

В свою очередь, свойство «visibility: hidden» прячет элемент от пользователя, но не удаляет его из модели документа. Таким образом, на странице остается зарезервированное место под данный блок. То есть поток документа будет воспринимать и учитывать расположение и размеры элемента со свойством «visibility: hidden» ровно так же, как и без него.

Такая разница организации структуры документа этими двумя свойствами позволяет добиться необходимого результата для правильного отображения страницы.

Использование CSS — display: none

Интернет-документ позволяет использовать несколько вариантов для определения свойства элемента. В первую очередь display: none может быть прописан в отдельном файле каскадных таблиц стилей. Такой способ является наиболее продвинутым и правильным, так как позволяет вынести все селекторы, классы и их свойства в отдельный документ. Подобная модель дает возможность очень быстро находить и изменять параметры страницы.

В заголовке документа

Вторым вариантом является определение стилей в заглавной части документа между тегами style. Эффективность такого способа гораздо меньше. Его рекомендуется применять только лишь в крайних случаях, так как при наличии большого числа стилей читаемость страницы веб-дизайнером значительно ухудшается. А это приводит к возникновению ошибок и замедлению процесса разработки интернет-документа. Такой подход рекомендуется использовать только в случае добавления в этот тег малого числа стилей или для отладки документа.

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

Блок div. Display: none

Еще одним способом является добавление непосредственно в тег элемента кода «style=display: none;». Подобный подход зачастую применяют при работе с различными фреймворками, цель которых — снижение числа свойств непосредственно в таблице стилей и отображение их в самом интернет-документе. Кроме того, подобная запись часто возникает при просмотре страницы «инспектором кода». Важно помнить, что используя этот подход, можно изменить свойство и его значение, прописанные в таблице стилей. Поэтому стоит быть осторожным, так как в итоге можно создать себе дополнительные проблемы и потратить некоторое время на поиск и устранение ошибки в коде страницы.

JavaScript

Стоит также упомянуть и о дополнительной возможности изменения этого свойства. Оно относится уже не к таблице стилей и html-коду, а к скриптовому языку. Поэтому для его применения необходимо иметь хоть какие-то знания в этой области. Для того чтобы убрать элемент из потока документа, можно использовать свойство JavaScript «display=none». Оно позволяет изменить структуру документа при наступлении определенного события. Также благодаря использованию скриптов можно динамически («на лету») изменить параметр свойства и тем самым обновить вид страницы без необходимости ее перезагрузки. Такой подход является полезным при организации выпадающих меню, модальных окон и форм.

SEO

В области оптимизации веб-контента под поисковые машины существует много суеверий и неясных моментов. Так, многие начинающие СЕОшники считают использование свойства «display» плохой манерой. Объясняют они это тем, что поисковики, видя скрытый контент, начинают считать страницу спамом. В их словах есть доля логики, но не более того. На данный момент времени свойство скрытия объекта используется достаточно часто для форматирования выпадающих меню и скрытия частей документа, которые в данный момент не интересны пользователю (например, при выборе одной категории информация о других удаляется). Такой подход используют достаточно мощные интернет-порталы (один из них — «Амазон»). Таким образом, поисковые роботы не могут считать использование свойства «display: none» спамом.

Другое дело, когда такой подход используется для скрытия отдельных слов и символов. Несмотря на то что сейчас поисковые роботы еще не имеют совершенных алгоритмов распознания подобного «спама» в документах, вероятность того, что страница будет поймана на этом, достаточно высока. Поэтому рекомендуется использовать свойство «display» строго по назначению — для изменения типа блока или его временного скрытия от глаз пользователя.

fb.ru

display | CSS справочник

Поддержка браузерами

12.0+ 8.0+ 3.0+ 4.0+ 7.0+ 3.1+

Описание

CSS свойство display указывает тип элемента. От типа элемента зависит то, как он будет отображаться на веб-странице.

Обратите внимание, что по умолчанию в CSS все элементы являются строчными (display:inline). Для переопределения варианта отображения элемента со строчного на блочный, браузеры используют встроенную таблицу стилей, задающую для каждого элемента стили, применяемые к нему по умолчанию. В старых версиях браузеров используется устаревшая встроенная таблица стилей, в которой нет правил для переопределения новых элементов, добавленных в HTML5, в блочные. Поэтому, для таких элементов как <section>, <header>, <nav>, <article>, <aside> и <footer>, способ отображения должен быть задан вручную в таблице стилей:


<style>
  section, header, nav, article, aside, footer { display: block; }
</style>

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

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

Значение по умолчанию: inline
Применяется: ко всем элементам
Анимируется: нет
Наследуется: нет
Версия: CSS1
Синтаксис JavaScript: object.style.display=»inline»

Синтаксис

display: значение;

Значения свойства

Значение Описание
none Элемент исключается из общего потока, он не отображается на экране и под него не резервируется место на странице ( все элементы ведут себя как обычно, как будто этот элемент отсутствует в исходном коде).
block Элемент воспринимается браузером, как блочный (например, как <div>), т.е. имеет разрыв строки до и после элемента и занимает всю доступную ширину. Появляется возможность применения свойств для блочных элементов.
inline Элемент будет отображаться, как строчный (например, как <span>), содержимое блочных элементов, к которым было применено данное значение, будет начинаться с того места, где окончился предыдущий строчный элемент.
inline-block Элемент отображается, как строчный, но появляется возможность применять к нему свойства, доступные только блочным элементам (например: margin, padding).
list-item Элемент становится блочным и отображается, как элемент списка (тег <li>) с маркером перед началом содержимого.
table Определяет блочный элемент, который ведёт себя как <table>.
table-caption Элемент ведёт себя как <caption>.
table-cell Элемент ведёт себя как <td>.
table-column Элемент ведёт себя как <col>.
table-column-group Элемент ведёт себя как <colgroup>.
table-footer-group Элемент ведёт себя как <tfoot>.
table-header-group Элемент ведёт себя как <thead>.
table-row Элемент ведёт себя как <tr>.
table-row-group Элемент ведёт себя как <tbody>.
flex Преобразует элемент в блочный flex-контейнер. Все дочерние элементы данного контейнера автоматически становятся flex-элементами. Примечание: появляется возможность пользоваться следующими свойствами:
inline-flex Преобразует элемент в строчный flex-контейнер. Все дочерние элементы данного контейнера автоматически становятся flex-элементами.
inline-table Элемент будет вести себя как <table>, но не как блочный, а как строчно-блочный. То есть значение inline-table эквивалентно следующему CSS правилу:
table { display: inline-block;}
inherit Указывает, что значение наследуется от родительского элемента.

Пример

A span element. mySpan. Another span element.

span#mySpan {
background-color: red;
display: inline;
}

puzzleweb.ru

display | CSS | WebReference

Многоцелевое свойство, которое определяет, как элемент должен быть показан в документе.

Краткая информация

Значение по умолчаниюinline
НаследуетсяНет
ПрименяетсяКо всем элементам
АнимируетсяНет

Синтаксис ?

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
Элемент показывается как блочный. Применение этого значения для строчных элементов, например <span>, заставляет его вести подобно блокам — происходит перенос строк в начале и в конце содержимого.
inline
Элемент отображается как строчный. Использование блочных элементов, таких, как <div> и <p>, автоматически создаёт перенос и показывает их содержимое с новой строки. Значение inline отменяет эту особенность, поэтому содержимое блочных элементов начинается с того места, где окончился предыдущий элемент.
inline-block
Это значение генерирует блочный элемент, который обтекается другими элементами веб-страницы подобно строчному элементу. Фактически такой элемент по своему действию похож на встраиваемые элементы (вроде <img>). При этом его внутренняя часть форматируется как блочный элемент, а сам элемент — как строчный.
inline-table
Определяет, что элемент является таблицей, как при использовании <table>, но при этом таблица является строчным элементом и происходит её обтекание другими элементами, например, текстом.
inline-flex
Элемент ведёт себя как строчный и выкладывает содержимое согласно флекс-модели.
flex
Элемент ведёт себя как блочный и выкладывает содержимое согласно флекс-модели.
list-item
Элемент выводится как блочный и добавляется маркер списка.
none
Временно удаляет элемент из документа. Занимаемое им место не резервируется, и веб-страница формируется так, словно элемента и не было. Изменить значение и сделать вновь видимым элемент можно с помощью скриптов, обращаясь к свойствам через объектную модель. В этом случае происходит переформатирование данных на странице с учётом вновь добавленного элемента.
run-in
Устанавливает элемент как блочный или строчный, в зависимости от контекста.
table
Определяет, что элемент является блочной таблицей, подобно использованию <table>.
table-caption
Задаёт заголовок таблицы, подобно применению <caption>.
table-cell
Указывает, что элемент представляет собой ячейку таблицы (<td> или <th>).
table-column

Назначает элемент колонкой таблицы, словно был добавлен <col>.
table-column-group

Определяет, что элемент является группой одной или более колонок таблицы, как при использовании <colgroup>.
table-footer-group

Используется для хранения одной или нескольких строк ячеек, которые отображаются в самом низу таблицы. По своему действию сходно с работой <tfoot>.
table-header-group

Элемент предназначен для хранения одной или нескольких строк ячеек, которые представлены вверху таблицы. По своему действию сходно с работой <thead>.
table-row
Элемент отображается как строка таблицы (<tr>).
table-row-group

Создаёт структурный блок, состоящий из нескольких строк таблицы, аналогично действию <tbody>.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>display</title>
  <style>
   .example {
    border: dashed 1px #634f36; /* Параметры рамки */
    background: #fffff5; /* Цвет фона */
    font-family: "Courier New", Courier, monospace; /* Шрифт текста */
    padding: 7px; /* Поля вокруг текста */
    margin: 0 0 1em; /* Отступы */
   }
   .exampleTitle {
    border: 1px solid black; /* Параметры рамки */
    border-bottom: none; /* Убираем линию снизу */
    padding: 3px; /* Поля вокруг текста */
    display: inline; /* Устанавливаем как строчный элемент */
    background: #efecdf; /* Цвет фона */
    font-weight: bold; /* Жирное начертание */
    font-size: 90%; /* Размер текста */
    margin: 0; /* Убираем отступы */
    white-space: nowrap; /* Отменяем переносы текста */
   }
  </style>
 </head> 
 <body> 
  <p>Пример</p>
  <p>
  &lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;&gt;<br>
  &lt;html&gt;<br>
  &lt;body&gt;<br>
  &lt;b&gt;Формула серной кислоты:&lt;/b&gt;
  &lt;i&gt;H&lt;sub&gt;&lt;small&gt;2&lt;/small&gt;&lt;/sub&gt;
  SO&lt;sub&gt;&lt;small&gt;4&lt;/small&gt;
  &lt;/sub&gt;&lt;/i&gt;<br>
  &lt;/body&gt;<br>
  &lt;/html&gt;</p>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства display

Объектная модель

Объект.style.display

Примечание

Internet Explorer до версии 7 включительно:

  • поддержка значений table-footer-group и table-header-group происходит только для элементов <thead> и <tfoot>;
  • для элементов <li> понимает значение block как list-item;
  • значение inline-block применяется только для строчных элементов, с блочными элементами работает некорректно.

Opera 9.2, а также Firefox 2.0:

  • значение table-column применяется только для <col>;
  • значение table-column-group поддерживается только для <colgroup>.

Chrome до версии 4, а также Safari до версии 5:

  • значение run-in поддерживают только для элементов, которые располагаются перед строчными элементами или такими, у которых значение display установлено как inline.

Safari 3.1

  • Значение table-cell не работает, если нет элементов со значениями свойства display: table и table-row.

Chrome 32

  • Значение run-in больше не поддерживается.

Спецификация ?

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.
×

Браузеры ?

none, inline, block4121711
inline-block5.5121713
inline-flex, flex11122917928
list-item6121711
run-in812171
inline-table8121713
table, table-cell, table-column, table-column-group,table-header-group, table-row-group, table-footer-group, table-row, table-caption8121711
none, inline, block1181
inline-block1181
inline-flex, flex4.42812.19.2
list-item1181
run-in181
inline-table1181
table, table-cell, table-column, table-column-group,table-header-group, table-row-group, table-footer-group, table-row, table-caption1181

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — свойство полностью поддерживается браузером со всеми допустимыми значениями;
  •  — свойство браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.

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

×

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 27.08.2017

Редакторы: Влад Мержевич

webref.ru

CSS3 | Свойство display

Свойство display

Последнее обновление: 27.04.2016

Кроме свойства float, которое позволяет изменять позицию элемента, в CSS есть еще одно важное свойство — display. Оно позволяет управлять блоком элемента и также влиять на его позиционирование относительно соседних элементов.

Это свойство может принимать следующие значения:

  • inline: элемент становится строчным, подобно словам в строке текста

  • block: элемент становится блочным, как параграф

  • inline-block: элемент располагается как строка текста

  • list-item: элемент позиционируется как элемент списка обычно с добавление маркера виде точки или порядкового номера

  • run-in: тип блока элемента зависит от окружающих элементов

  • flex: позволяет осуществлять гибкое позиционирование элментов

  • table, inline-table: позволяет расположить элементы в виде таблицы

  • none: элемент не виден и удален из разметки html

Итак, значение block позволяет определить блочный элемент. Такой элемент визуально отделяется от соседних элементов переносом строки, как, например, элемент параграфа p или элемент div, которые по умолчанию являются блочными и при визуализации веб-страницы визуально переносятся на новую строку.

Однако элемент span в отличие от элемента div блочным не является. Поэтому посмотрим, какие с ним произойдут изменения при применении значения block:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
		<link href="styles.css" rel="stylesheet">
        <title>Свойство display в CSS3</title>
		<style>
			span{
				color: red;
			}
			.blockSpan{
				display: block;
			}
		</style>
    </head>
    <body>
		<div>Это <span>строчный</span> элемент span</div>
		<div>Это <span>блочный</span> элемент span</div>
    </body>
</html>

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

В отличие от блочных элементов строчные встраиваются в строку, так как имеют для свойства display значение inline. Элемент span как раз по умолчанию имеет стиль display: inline, поэтому и встраивается в строку, а не переносится на следующую, как параграфы или div. И теперь произведем обратную процедуру — сделаем блочный элемент div строчным:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Свойство display в CSS3</title>
		<style>
			div{
				display: inline;
			}
		</style>
    </head>
    <body>
		<div>Первый строчный элемент div.</div>
		<div>Второй строчный элемент div.</div>
    </body>
</html>

Следует учитывать, что при применении значения inline браузер игнорирует некоторые свойства, такие как width, height, margin.

inline-block

Еще одно значение — inline-block — представляет элемент, который обладает смесью признаков блочного и строчного элементов. По отношению к соседним внешним элементам такой элемент расценивается как строчный. То есть он не отделяется от соседних элементов переводом строки. Однако по отношению к вложенным элементам он рассматривается как блочный. И к такому элементу применяются свойства width, height, margin.


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Свойство display в CSS3</title>
		<style>
			span{
				width: 100px;
				height: 30px;
				background-color: #aaa;
			}
			.inineBlockSpan{
				display: inline-block;
			}
		</style>
    </head>
    <body>
		<p>Проехав с полверсты в хвосте <span>колонны</span>, он остановился</p>
		<p>Проехав с полверсты в хвосте <span>колонны</span>, он остановился</p>
    </body>
</html>

Первый элемент span является строчным, у него значение inline, поэтому для него бессмысленно применять свойства width и height. А вот второй элемент span имеет значение inline-block, поэтому к нему жуе применяются и ширина, и высота, и при необходимости еще можно установить отступы.

run-in

Значение run-in определяет элемент, который зависит от соседних элементов. И здесь есть три возможных варианта:

  • Элемент окружен блочными элементами, тогда фактически он имеет стиль display: block, то есть сам становится блочным

  • Элемент окружен строчными элементами, тогда фактически он имеет стиль display: inline, то есть сам становится строчным

  • Во всех остальных случаях элемент считается блочным

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

Значение table по сути превращает элемент в таблицу. Посмотрим на примере списка:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Свойство display в CSS3</title>
		<style>
			ul{
				display: table;
				margin: 0;
			}
			li{
				list-style-type: none;
				display: table-cell;
				padding: 10px;
			}
		</style>
    </head>
    <body>
		<ul>
			<li>Item 1</li>
			<li>Item 2</li>
			<li>Item 3</li>
		</ul>
    </body>
</html>

Здесь список превращается в таблицу, а каждый элемент списка — в отдельную ячейку. Для этого у элемента списка устанавливается стиль display: table-cell. Фактически вместо этого списка мы могли бы использовать стандартную таблицу.

Сокрытие элемента

Значение none позволяет скрыть элемент, которого как-будто нет на веб-странице:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Свойство display в CSS3</title>
		<style>
			.invisible{
				display: none;
			}
		</style>
    </head>
    <body>
		<p>Первый параграф</p>
		<p>Второй параграф</p>
		<p>Третий параграф</p>
    </body>
</html>

metanit.com

Свойства CSS display и visibility: 6 примеров скрытия / отображения HTML-элементов

Свойства 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 — visible. Также можно использовать:

Данное значение используется в HTML-таблицах.

Это позволяет скрыть элемент, для которого задано значение данного свойства. Именно его я применил для раздела 3 в приведенном выше примере.

Свойство HTML display также используется, чтобы изменить поведение строчных или блочных элементов:

Этот код задает для блочного элемента поведение строчного. Например, div представляет собой блочный элемент. Применив к нему display: inline, мы задаем для него поведение строчного элемента:

Значение block делает противоположное. Например, элемент span является строчным. Если мы применим к нему display: block, он будет вести себя как блочный элемент.

Я использовал элемент div, который содержит маркированный список <ul>, элементы списка и гиперссылки. Ссылки представляют собой пункты меню.

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

При клике по ссылке скрыть меню для события клика используется код JQuery, чтобы применить свойство display: none к родительскому элементу div:


Посмотреть онлайн демо-версию и код

Родительский div содержит меню, которое представляет собой сочетание элементов ul, li и <a>. При использовании display: none элемент div будет скрыт, как и все меню. Когда меню исчезает, ссылки перемещаются вверх, занимая пространство меню, потому что при использовании HTML display none элемент, к которому применено свойство, больше не будет занимать отведенное для него пространство.

Если после этого вы нажмете на ссылку показать меню, код jQuery добавит значение display: initial. Это сделает меню видимым, а ссылки сместятся вниз.

Я использую тот же пример, что и выше, но на этот раз применю свойство CSS visibility, чтобы показать и скрыть меню. Разница заключается в используемом коде jQuery:

При нажатии на ссылку скрыть меню, меню скрывается. При клике по ссылке показать меню, добавляется свойство visibility: visible, и меню снова отображается:


Посмотреть онлайн демо-версию и код

В этом примере можно увидеть разницу. Когда нажимается ссылка скрыть меню, меню исчезает. При клике по ссылке показать меню, оно вновь становится видимым. Но ссылки при этом остаются на своих местах и не смещаются (в отличие от HTML display).

В следующем примере мы создадим HTML-таблицу с помощью фреймворка Bootstrap. Таблица содержит пять строк, которые первоначально отображаются. На данном этапе таблица выглядит следующим образом:


Посмотреть онлайн демо-версию и код

Для строк таблицы использованы разные классы, чтобы задать их стили. Например, danger, active, warning и т.д. Строки таблицы пронумерованы от 1 до 5 (первый столбец слева).

Теперь я использую свойство visibility для второй строки, чтобы скрыть ее. Это делается следующим образом:

Таким образом значение collapse также используется для элементов таблицы. Оно применяется для удаления строки, при этом структура таблицы не изменяется. Посмотрите на приведенный ниже рисунок и на код демо-версии:


Посмотреть онлайн демо-версию и код

Вторая строка не видна, но структура таблицы остается неизменной. Если вы используете значение collapse для любых других элементов, оно будет работать, как значение hidden.

Теперь тот же самый пример, за исключением того, что я буду использовать свойство HTML display, чтобы скрыть строку в таблице:


Посмотреть онлайн демо-версию и код

Вторая строка исчезла, а третья строка перемещается вверх, чтобы занять ее место.

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

Напомню, что блочные элементы занимают все доступное им пространство и начинаются с новой строки. Например, абзацы или блоки div — это блочные элементы.

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

Свойство HTML display позволяет изменять поведение строчных и блочных элементов.

Чтобы изменить поведение блочного элемента на поведение строчного:

Чтобы изменить поведение строчного элемента на поведение блочного:

В следующем примере поведение элемента span изменяется на поведение блочного элемента. А поведение абзаца с помощью свойства CSS display изменяется на поведение строчного элемента.

Чтобы понять, в чем заключается разница, сначала посмотрите на приведенный ниже рисунок и исходный код, в котором свойство HTML display еще не применено:


Посмотреть онлайн демо-версию и код

На странице демо-версии отображен родительский div, а внутри него span и абзац. Изначально их поведение является стандартным для этих элементов:

  • Родительский div очерчен черной рамкой и занимает всю доступную ширину;
  • span очерчен синей рамкой, внутри div он занимает только необходимое для отображения пространство и начинается с той же самой строки;
  • Абзац, который очерчен красной рамкой, также занимает все доступное пространство и начинается с новой строки.

Теперь с помощью HTML display block я изменю поведение span на поведение блочного элемента, а поведение абзаца на поведение строчного. Родительский div остается без изменений. Смотрите результат и демо-версию:


Посмотреть онлайн демо-версию и код

span начинается с новой строки и границы абзаца заканчивается там, где заканчивается его текст. Он не занимает всю доступную ширину, как div или span.

Данная публикация представляет собой перевод статьи «CSS display and visibility: 6 examples to show/hide HTML elements» , подготовленной дружной командой проекта Интернет-технологии.ру

www.internet-technologies.ru

Отправить ответ

avatar
  Подписаться  
Уведомление о