Каждый элемент на веб-странице представляет собой прямоугольную рамку. Свойство display в CSS определяет, как ведет себя этот прямоугольный блок. Обычно используются лишь несколько значений:
div ( display: inline; /* Default of all elements, unless UA stylesheet overrides */ display: inline-block; /* Characteristics of block, but sits on a line */ display: block; /* UA stylesheet makes things like and block */ display: run-in; /* Not particularly well supported or common */ display: none; /* Hide */ )
Значение по умолчанию для всех элементов встроено. Большинство «Таблиц стилей пользовательского агента» (стили по умолчанию, применяемые браузером ко всем сайтам) сбрасывают многие элементы на «блокировку». Давайте рассмотрим каждый из них, а затем рассмотрим некоторые другие, менее распространенные ценности.
В соответствии
Значение по умолчанию для элементов. Подумайте о таких элементах, как , или, и о том, как обтекание текста этими элементами внутри строки текста не нарушает поток текста.
Элемент имеет 1px красной каймы. Обратите внимание, что он находится прямо внутри остального текста.
Встроенный элемент принимает поля и отступы, но элемент все еще остается встроенным, как и следовало ожидать. Margin и padding будут отодвигать другие элементы только по горизонтали, а не по вертикали.
Встроенный элемент не принимает heightи width. Он просто проигнорирует это.
Встроенный блок
Элемент, установленный в inline-block, очень похож на встроенный в том, что он будет встроен в естественный поток текста (на «базовой линии»). Разница в том, что вы можете установить widthи heightкоторые будут соблюдаться.
Блокировать
Некоторые элементы устанавливаются blockтаблицей стилей UA браузера. Они , как правило , являются контейнерными элементами, как , и
. Также текстовые «блоки» вроде
и
. Элементы уровня блока не располагаются на одной линии, а выходят за их пределы. По умолчанию (без установки ширины) они занимают столько места по горизонтали, сколько могут.
Два элемента с красными границами
s, которые являются элементами уровня блока. Элемент между ними не сидит рядный , так как блоки ломаются ниже встроенных элементов.
Вбежать
Во-первых, это свойство не работает в Firefox. Говорят, что спецификация для него недостаточно четко определена. Однако, чтобы начать понимать это, это как если бы вы хотите, чтобы элемент заголовка располагался внутри текста под ним. Плавающий он не будет работать, как и ничего другого, так как вы не хотите, чтобы заголовок был дочерним по отношению к текстовому элементу под ним, вы хотите, чтобы он был отдельным независимым элементом. В «поддерживающих» браузерах это так:
Но не рассчитывайте на это.
Flexbox
Это displayсвойство также используется для новых методов компоновки, таких как Flexbox.
.header ( display: flex; )
Есть несколько более старых версий синтаксиса flexbox, поэтому, пожалуйста, ознакомьтесь с этой статьей, чтобы узнать о синтаксисе использования flexbox с лучшей поддержкой браузера. Обязательно ознакомьтесь с этим полным руководством по Flexbox.
Flow-Root
flow-rootЗначение дисплея создает новый «контекст форматирования блока», но в остальном , как block. Новый BFC помогает с такими вещами, как очистка поплавков, устраняя необходимость во взломах для этого.
.group ( display: flow-root; )
Эти данные о поддержке браузером взяты из Caniuse, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.
Рабочий стол
Хром
Fire Fox
IE
Край
Сафари
58
53
Нет
79
13
Мобильный / планшет
Android Chrome
Android Firefox
Android
iOS Safari
88
85
81 год
13,0-13,1
Сетка
Макет сетки также будет изначально задан свойством display.
body ( display: grid; )
Вот наше руководство по макету сетки, которое включает диаграмму поддержки браузера.
Никто
Полностью удаляет элемент со страницы. Обратите внимание, что пока элемент все еще находится в DOM, он удаляется визуально и любым другим мыслимым способом (вы не можете перейти к нему или его дочерним элементам, он игнорируется программами чтения с экрана и т. Д.).
Табличные значения
Существует целый набор отображаемых значений, которые заставляют элементы, не являющиеся таблицей, вести себя как элементы таблицы, если вам это нужно. Это редко, но иногда позволяет вам быть «более семантичным» с вашим кодом, используя уникальные возможности позиционирования таблиц.
