Разное

Display в css что это: display | htmlbook.ru

Содержание

display | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.0+2.0+7.0+1.0+1.0+2.1+1.0+

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

Версии CSS

CSS 1CSS 2CSS 2.1CSS 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
ЗначениеОписаниеIE6IE7IE8Cr2Cr8Op9.2Op10Sa3.1Sa5Fx3Fx4
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.

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

CSS свойства

Определение и применение

CSS свойство display определяет как должен отображаться определенный элемент HTML.

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

Браузер Internet Explorer 8 требует наличия декларации !DOCTYPE в документе.

CSS синтаксис:

display:"inline | block | flex | grid | inline-block | inline-flex | inline-grid | inline-table | list-item | table | table-caption | table-column-group | table-header-group | table-footer-group | table-row-group | table-cell | table-column | table-row | none | initial | inherit";

JavaScript синтаксис:

object.style.display = "block"

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

ЗначениеОписание
inlineЭлемент отображается как строчный (inline) элемент (например — <span>). Это значение по умолчанию.
blockОтображает элемент как блочный элемент (например — <h2> ).
flexЭлемент отображается как блочный flex-контейнер.
gridЭлемент отображается как блочный grid-контейнер.
inline-block«Блочно-строчные» элементы — позволяет задавать размеры, рамки, отступы, как и блочным элементам, ширина зависит от содержания (не растягивается на всю ширину контейнера), выравниваются вертикально как и строчные элементы.
inline-flexЭлемент отображается как строчный flex-контейнер.
inline-gridЭлемент отображается как строчный grid-контейнер.
inline-tableОпределяет, что элемент является таблицей, но при этом встраивается в другие элементы, а не является блочной таблицей (элемент обтекает другими элементами).
list-itemЭлемент ведет себя как элемент списка — <li>.
tableЭлемент ведет себя как блочная таблица — <table>.
table-captionЭлемент ведет себя как наименование таблицы — <caption>.
table-column-groupЭлемент ведет себя как группа столбцов — <colgroup>.
table-header-groupЭлемент ведет себя как «шапка таблицы» — <thead>.
table-footer-groupЭлемент ведет себя как «подвал таблицы» — <tfoot>.
table-row-groupЭлемент ведет себя как «тело таблицы» — <tbody>.
table-cellЭлемент ведет себя как ячейка таблицы — <td>.
table-columnЭлемент ведет себя как часть группы столбцов — <col>.
table-rowЭлемент ведет себя как строка таблицы — <tr>.
noneЭлемент не будет отображаться в документе (под него не резервируется место на странице).
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS1

Наследуется

Нет.

Анимируемое

Нет.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>Использование блочно-строчных элементы</title>
<style> 
div {
	display : inline-block; /* элементы будут отображаться как "блочно-строчные" */
	width : 200px; /* задаём ширину блока */
	background-color : orange; /* задаём цвет заднего фона */
	text-align : center; /* выравниваем текст по центру внутри элементов  */
	background-color : 3px solid green; /* задаём для элементов сплошную границу зелёного цвета размером 3px */
	margin-bottom : 10px; /* устанавливаем внешний отступ снизу от элементов */
}
</style>
</head>

Свойство display

Свойство 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Наследует свойство от родительского элемента.

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

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

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;
}

display в CSS | Учебные курсы

Мы уже видели, что есть в основном два типа элементов HTML: блочные и строчные элементы. Мы также упомянули несколько альтернативных, вроде list-item или table-cell.

Свойство display позволяет изменять тип элемента HTML. По умолчанию для абзаца <р> (блочный элемент) значение display будет block, но может отображаться как inline:

p { display: inline; }

Почему бы не использовать строчные элементы, такие как <span>?

Потому что вы выбираете элемент HTML по его смыслу, а не отображению. Если мы решили, что абзац подходит нашему содержимому лучше всего, мы не должны менять тег ради стилизации. Это CSS заботится о стилизации.

Короче говоря, display позволяет сменить тип элемента без изменения его смысла.

Для каждого варианта display есть определённое поведение:

  • block будет занимать всю доступную ширину;
  • inline будет действовать как обычный текст;
  • inline-block является, как предполагает его название, соединением блочного и строчного поведения, вариант «лучшее из обоих миров»;
  • list-item похож на block, так как он занимает всю доступную ширину, но показывает дополнительный маркер пункта списка;
  • у table, table-row и table-cell очень специфическое, хотя и неожиданное поведение, которое позволяет строить более интересные макеты.

display: block

Превратит любой элемент в блочный.

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

CSS

.menu a { background: red; color: white; }

HTML

<ul>
  <li>
    <a>Главная</a>
  </li>
  <li>
    <a>Возможности</a>
  </li>
  <li>
    <a>Цены</a>
  </li>
  <li>
    <a>О нас</a>
  </li>
</ul>

Если превратить эти ссылки в блочные, мы увеличим их область:

.menu a { background: red; color: white; display: block; }

display: inline

Превращает любой элемент в строчный, как если бы он был только простым текстом.

Часто используется для создания горизонтальной навигации, где семантически, но не визуально полезны пункты списка.

CSS

.menu li { display: inline; }

HTML

<ul>
  <li>
    <a>Главная</a>
  </li>
  <li>
    <a>Возможности</a>
  </li>
  <li>
    <a>Цены</a>
  </li>
  <li>
    <a>О нас</a>
  </li>
</ul>

display: list-item

Элементы HTML, отображаемые как list-item, являются (неудивительно) пунктами списка <li>, но также описанием термина <dd>.

Пункт списка отображается с маркером (в неупорядоченном списке <ul>) или с порядковым номером (в упорядоченном списке <ol>).

Поскольку отображение этих маркеров и цифр меняется во всех браузерах, также трудно стилизовать их в CSS, правило display: list-item никогда не используется. На самом деле, часто <li> отображаются как display: block или display: inline, так как они более гибкие для стилизации.

display: none

Применение display: none к элементу HTML удаляет его из веб-страницы, как если бы он никогда не существовал в вашем коде.

CSS

.gone-baby-gone { display: none; }

HTML

<p>Я слышал кто-то выступает?</p>
<p>Ха-ха-ха</p>
<p>Я, должно быть, сплю...</p>

Здесь в коде три абзаца, но видны только два, как будто второго человека никогда не существовало.

visibility: hidden

Свойство visibility немного похоже на display. Применение visibility: hidden скрывает элемент со страницы, но только делает его невидимым: он по-прежнему занимает место, где только что был.

CSS

.hollow-man { visibility: hidden; }

HTML

<p>So far away from me </p>
<p>So far i just can't see</p>
<p>So far away from me</p>
<p>You're so far away from me</p>
<p>You're so far away...</p>

Здесь в коде пять абзацев, но появляются только два, при этом пространство, которое занимали скрытые абзацы, остаётся, но абзацы видеть вы не можете.

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>

CSS свойство отображения

Пример

Использование различных отображаемых значений:

p.ex1 {display: none;}
p.ex2 {display: inline;}
p.ex3 {display:
block;}
p.ex4 {display: inline-block;}

Попробуй сам »

Дополнительные примеры «Попробуйте сами» ниже.


Определение и использование

Свойство отображения определяет поведение отображения
(тип окна рендеринга) элемента.

В HTML значение свойства отображения по умолчанию берется из спецификаций HTML или из таблицы стилей по умолчанию браузера / пользователя. В
значение по умолчанию в XML является встроенным, включая элементы SVG.

Значение по умолчанию:?
Унаследовано: нет
Анимируемое: нет. Прочитать о animatable
Версия: CSS1
Синтаксис JavaScript: объект .style.display = «нет»
Попробуй это

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

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

Имущество
дисплей 4,0 8,0 3,0 3,1 7.0

Примечание: Для значений «flex» и «inline-flex» для работы в Safari требуется префикс -webkit-.

Примечание. «display: contents» не работает в Edge / Internet Explorer.



Синтаксис CSS

Стоимость недвижимости

Значение Описание Играй
рядный Отображает элемент как встроенный элемент (например, ).Никакие свойства высоты и ширины не будут иметь никакого эффекта Играй »
блок Отображает элемент как блочный (например,

). Это начинается на
новая строка и занимает всю ширину

Играй »
содержание Заставляет контейнер исчезнуть, делая дочерние элементы дочерними элементами
элемент на следующий уровень в DOM
Играй »
гибкий Отображает элемент как гибкий контейнер на уровне блока Играй »
сетка Отображает элемент как контейнер сетки на уровне блока Играй »
рядный блок Отображает элемент как контейнер блока встроенного уровня.Сам элемент отформатирован как встроенный
элемент, но вы можете применить значения высоты и ширины
Играй »
рядный гибкий Отображает элемент как гибкий контейнер встроенного уровня Играй »
рядная сетка Отображает элемент как контейнер сетки встроенного уровня Играй »
встроенный стол Элемент отображается как таблица встроенного уровня Играй »
элемент списка Пусть элемент ведет себя как элемент

  • Играй »
    обкатка Отображает элемент как блочный или встроенный, в зависимости от контекста Играй »
    стол Пусть элемент ведет себя как элемент

    Играй »
    заголовок таблицы Пусть элемент ведет себя как элемент

    Играй »
    таблица-столбец-группа Пусть элемент ведет себя как элемент

    Играй »
    таблица-заголовок-группа Пусть элемент ведет себя как элемент

    Играй »
    нижний колонтитул группы Пусть элемент ведет себя как элемент

    Играй »
    таблица-строка-группа Пусть элемент ведет себя как элемент

    Играй »
    таблица-ячейка Пусть элемент ведет себя как элемент

    Играй »
    таблица-столбец Пусть элемент ведет себя как элемент

    Играй »
    стол-ряд Пусть элемент ведет себя как элемент

    Играй »
    нет Элемент полностью удален Играй »
    начальный Устанавливает для этого свойства значение по умолчанию.Читать примерно начальная Играй »
    наследовать Наследует это свойство от своего родительского элемента. Читать про наследство

    Другие примеры

    Пример

    Демонстрация использования значения свойства contents. В следующих
    Например, контейнер .a исчезнет, ​​а дочерние элементы (.b)
    дочерние элементы элемента на следующий уровень в DOM:

    .дисплей {
    : содержание;
    граница:
    2px сплошной красный;
    цвет фона: #ccc;
    отступ: 10 пикселей;
    ширина: 200 пикселей;
    }

    .b {
    граница: сплошной синий цвет 2 пикселя;
    цвет фона: светло-голубой;
    отступ: 10 пикселей;
    }

    Попробуй сам »

    Пример

    Демонстрация того, как использовать значение наследуемого свойства:

    body {
    display: встроенный;
    }

    p {
    display: наследование;
    }

    Попробуй сам »

    Пример

    Установить направление некоторых гибких элементов внутри элемента

    в обратном направлении
    заказ:

    div {
    дисплей: гибкий;
    flex-direction: ряд-реверс;
    }

    Попробуй сам »


    Связанные страницы

    Учебник

    CSS: Отображение CSS и
    видимость

    Ссылка на HTML DOM: свойство отображения


    .Макет

    CSS — Свойство отображения


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


    Свойство отображения

    Свойство display указывает, отображается ли элемент и как он отображается.

    Каждый элемент HTML имеет отображаемое значение по умолчанию в зависимости от типа
    элемента это. Значение отображения по умолчанию для большинства элементов — , блок или
    рядный .

    Щелкните, чтобы показать панель

    Эта панель содержит элемент

    , который по умолчанию скрыт (отображение : нет ).

    Он оформлен с помощью CSS, и мы используем JavaScript для его отображения (измените его на ( display: block ).


    Элементы блочного уровня

    Элемент уровня блока всегда начинается с новой строки и занимает всю доступную ширину
    (тянется влево и вправо, насколько это возможно).

    Элемент

    — это элемент уровня блока.

    Примеры блочных элементов:

    • <форма>
    • <заголовок>
    • <нижний колонтитул>
    • <раздел>

    Встроенные элементы

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

    Это встроенный элемент
    внутри абзаца.

    Примеры встроенных элементов:


    Дисплей: нет;

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

    Элемент