Что значит display в css. Свойство CSS display (block, inline, none) — способы отображения 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 :
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 он занимает только необходимое для отображения пространство и начинается с той же самой строки;
- Абзац, который очерчен красной рамкой, также занимает все доступное пространство и начинается с новой строки.
- Item 1
- Item 2
- Item 3
- block - блочный элемент (автоматически создает перевод строки)
- inline - встроенный элемент (не создает перевода строки);
- inline-block - производная от inline. Он также не создает перевода строки, но элементу можно задать ширину и высоту;
- list-item - блочный элемент с маркером списка;
- run-in - устанавливает элемент как блочный или встроенный в зависимости от контекста;
- table
- равносильно таблице (тег
), с переносом строки;
- inline-table - производная от table. Элемент является встроенным, но соседние элементы его обтекают;
- table-caption - создания заголовка таблицы (аналог тега
); - table-cell - создания элемента ячейки таблицы (аналог тега
); - table-column - элемент определяющий столбец таблицы;
- table-row - элемент определяющий строку таблицы;
- none - элемент не отображается на странице и все другие элементы ведут себя так, как будто его нет вообще;
- inherit - наследование от элемента родителя;
Примечание
По умолчанию все элементы являются строчными display :inlineПримеры использования Display
Пример №1. Использование display:block
Как видите, строка перенеслась автоматически
В примере добавлено свойство border:1px solid #000 чтобы показать, какую область занимает блочный элемент.
Абзац №1. Рассматриваем элементы display. текст со свойством display:block Как видите, строка перенеслась автоматически
Пример №2. Использование display:none
Вот как это выглядит на странице:
Абзац №1. Рассматриваем элементы display:none. текст со свойством display:none Как видите, блок с текстом none отсутствует
Логично провести ассоциацию с атрибутом visibility: hidden , но в отличии от него, display:none не отводит места под объекты.
Это свойство является очень полезным, например, при создании эффектов выпадающего меню.
Пример №3. Использование display:inline-block
Как видите, блок с текстом none отсутствует
Вот как это выглядит на странице:
Абзац №1. Рассматриваем элементы. текст со свойством display:inline-block Как видите, блок вставлен прямо в контент
Свойство display отвечает за вывод и визуальное отображение элементов на странице. Также с помощью свойства display можно изменить . Свойство не наследуется.
Любой html-элемент генерирует на веб-странице прямоугольный контейнер. Все видимое на экране состоит из контейнеров разных типов.
В нормальном потоке блочные элементы генерируют структурные блоки и выводятся вертикально один над другим, занимая по ширине 100% ширины блока-контейнера.
Строковые контейнеры генерируют строковые блоки и выводятся в строке горизонтально. Ширина строковых элементов равна ширине их содержимого.
Строчно-блочный элемент также генерирует строку текста, при этом низ элемента располагается на базовой линии строки текста и не разрывает строку. Содержимое элемента форматируется так же, как и для блочных элементов, а ширина блока равна ширине содержимого.
Таблицы обрабатываются браузером как блоки. Внутренние элементы таблицы генерируют прямоугольные блоки, имеющие содержимое, отступы padding и рамки border , но не имеющие полей margin .
Таблица 1. Значения свойства display
display Значения: inline Значение по умолчанию. Элемент генерирует строковый блок. Аналог — тег . block Элемент генерирует структурный блок, как и тег .flex Элемент генерирует структурный блок, который создает адаптивный контейнер для дочерних элементов. inline-block Элемент генерирует строковый блок. inline-flex Элемент генерирует строковый блок, который создает адаптивный контейнер для дочерних элементов. inline-table Элемент определяет структурный блок, который генерирует строковый блок. list-item Элемент генерирует структурный блок, который отображается как элемент списка - .
table Элемент генерирует структурный блок. На странице ведет себя аналогично .
table-caption Элемент генерирует основной заголовок таблицы. На странице ведет себя аналогично . table-column Элемент описывает столбец ячеек, визуальное представление не генерируется. Аналог — . table-column-group Элемент объединяет один или несколько столбцов. Аналог — . table-cell Элемент генерирует отдельную ячейку таблицы, на странице ведет себя аналогично и . .table-header-group Элемент определяет группу строк заголовка, которая всегда отображается перед остальными строками и группами строк. Аналог — . table-footer-group Элемент определяет группу строк заголовка, которая всегда отображается после всех остальных строк и перед любым нижним основным заголовком. Ведет себя аналогично table-row-group Элемент объединяет одну или несколько строк. Аналог — table-row Элемент является строкой ячеек. Пример — . none Элемент не генерирует никакой контейнер, полностью удаляясь со страницы. inherit Наследует свойство от родительского элемента.
Для разработки этого меню использовался ряд других свойств 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 остается без изменений. Смотрите результат и демо-версию.
Последнее обновление: 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:
Здесь определено два элемента span, но один из них является блочным, так как к нему применяется стиль display: block; . Поэтому этот элемент span переносится на новую строку.
В отличие от блочных элементов строчные встраиваются в строку, так как имеют для свойства display значение inline . Элемент span как раз по умолчанию имеет стиль display: inline , поэтому и встраивается в строку, а не переносится на следующую, как параграфы или div. И теперь произведем обратную процедуру - сделаем блочный элемент div строчным:
Следует учитывать, что при применении значения inline браузер игнорирует некоторые свойства, такие как width , height , margin .
inline-block
Еще одно значение - inline-block - представляет элемент, который обладает смесью признаков блочного и строчного элементов. По отношению к соседним внешним элементам такой элемент расценивается как строчный. То есть он не отделяется от соседних элементов переводом строки. Однако по отношению к вложенным элементам он рассматривается как блочный. И к такому элементу применяются свойства width , height , margin .
Проехав с полверсты в хвосте колонны, он остановился
Проехав с полверсты в хвосте колонны, он остановился
Первый элемент span является строчным, у него значение inline , поэтому для него бессмысленно применять свойства width и height . А вот второй элемент span имеет значение inline-block , поэтому к нему жуе применяются и ширина, и высота, и при необходимости еще можно установить отступы.
run-in
Значение run-in определяет элемент, который зависит от соседних элементов. И здесь есть три возможных варианта:
Элемент окружен блочными элементами, тогда фактически он имеет стиль display: block , то есть сам становится блочным
Элемент окружен строчными элементами, тогда фактически он имеет стиль display: inline , то есть сам становится строчным
Во всех остальных случаях элемент считается блочным
Табличное представление
Значение table по сути превращает элемент в таблицу. Посмотрим на примере списка:
Здесь список превращается в таблицу, а каждый элемент списка - в отдельную ячейку. Для этого у элемента списка устанавливается стиль display: table-cell . Фактически вместо этого списка мы могли бы использовать стандартную таблицу.
Сокрытие элемента
Значение none позволяет скрыть элемент, которого как-будто нет на веб-странице:
Первый параграф
Второй параграф
Третий параграф
Свойство CSS Display нужен для установки типа html элемента относительно других элементов. Проще говоря это опция отвечает за то, как отображать элемент относительно других. Благодаря ему можно добиваться нужных "спецэффектов".
Синтаксис CSS Display
display : value ;
Где value может принимать значения: