Свойство display в CSS3

Все значения свойства display

Свойство display имеет много разных значений. Обычно, используются только три из них: none , inline и block , потому что когда-то браузеры другие не поддерживали.

Но после ухода IE7-, стало возможным использовать и другие значения тоже. Рассмотрим здесь весь список.

Значение none

Самое простое значение. Элемент не показывается, вообще. Как будто его и нет.

 
Невидимый div ( 
Я - невидим!
 ) Стоит внутри скобок
 

Значение block

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

Это значение display многие элементы имеют по умолчанию: , заголовок , параграф

.

Блоки прилегают друг к другу вплотную, если у них нет margin .

Значение inline

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

Например, инлайновые элементы по умолчанию: , .

Если вы присмотритесь внимательно к примеру выше, то увидите, что между внутренними и есть пробел. Это потому, что он есть в HTML.

Если расположить элементы вплотную – его не будет:

Содержимое инлайн-элемента может переноситься на другую строку.

При этом каждая строка в смысле отображения является отдельным прямоугольником («line box»). Так что инлайн-элемент состоит из объединения прямоугольников, но в целом, в отличие от блока, прямоугольником не является.

Это проявляется, например, при назначении фона.

Например, три прямоугольника подряд:

 
. Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля .
 

Если инлайн-элемент граничит с блоком, то между ними обязательно будет перенос строки:

Значение inline-block

Это значение – означает элемент, который продолжает находиться в строке ( inline ), но при этом может иметь важные свойства блока.

Во всём остальном – это блок, то есть:

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

Свойство vertical-align позволяет выровнять такие элементы внутри внешнего блока:

Как и в случае с инлайн-элементами, пробелы между блоками появляются из-за пробелов в HTML. Если элементы списка идут вплотную, например, генерируются в JavaScript – их не будет.

Значения table-*

Современные браузеры (IE8+) позволяют описывать таблицу любыми элементами, если поставить им соответствующие значения display .

Для таблицы целиком table , для строки – table-row , для ячейки – table-cell и т.д.

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

Это хорошо для семантической вёрстки и позволяет избавиться от лишних тегов.

table < display: table >tr < display: table-row >thead < display: table-header-group >tbody < display: table-row-group >tfoot < display: table-footer-group >col < display: table-column >colgroup < display: table-column-group >td, th < display: table-cell >caption

Очень подробно об алгоритмах вычисления размеров и отображении таблиц рассказывает стандарт CSS 2.1 – Tables.

Вертикальное центрирование с table-cell

Внутри ячеек свойство vertical-align выравнивает содержимое по вертикали.

Это можно использовать для центрирования:

 div 
Элемент
С неизвестной
Высотой
 

CSS не требует, чтобы вокруг table-cell была структура таблицы: table-row и т.п. Может быть просто такой одинокий DIV , это допустимо.

При этом он ведёт себя как ячейка TD , то есть подстраивается под размер содержимого и умеет вертикально центрировать его при помощи vertical-align .

Значения list-item, run-in и flex

У свойства display есть и другие значения. Они используются реже, поэтому посмотрим на них кратко:

Этот display по умолчанию используется для элементов списка. Он добавляет к блоку с содержимым ещё и блок с номером(значком) списка, который стилизуется стандартными списочными свойствами:

Если после run-in идёт block , то run-in становится его первым инлайн-элементом, то есть отображается в начале block .

Если ваш браузер поддерживает это значение, то в примере ниже h3 , благодаря display:run-in , окажется визуально внутри div :

Про пчёл.
 
Пчёлы - отличные создания, они делают мёд.

Если же вы видите две строки, то ваш браузер НЕ поддерживает run-in .

Вот, для примера, правильный вариант отображения run-in , оформленный другим кодом:

 
Про пчёл.
Пчёлы - отличные создания, они делают мёд.
 

Если этот вариант отличается от того, что вы видите выше – ваш браузер не поддерживает run-in . На момент написания этой статьи только IE поддерживал display:run-in .

Flexbox позволяет удобно управлять дочерними и родительскими элементами на странице, располагая их в необходимом порядке. Официальная спецификация находится здесь: CSS Flexible Box Layout Module

Источник

Html div span block

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

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

• inline : элемент становится строчным, подобно словам в строке текста
• block : элемент становится блочным, как параграф
• inline-block : элемент располагается как строка текста
• list-item : элемент позиционируется как элемент списка обычно с добавление маркера виде точки или порядкового номера
• run-in : тип блока элемента зависит от окружающих элементов
• flex : позволяет осуществлять гибкое позиционирование элментов
• table , inline-table : позволяет расположить элементы в виде таблицы
• none : элемент не виден и удален из разметки html

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

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

      span < color: red; >.blockSpan 
Это строчный элемент span
 
Это блочный элемент span
   

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

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

     div 
Первый строчный элемент div.
 
Второй строчный элемент div.
   

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

inline-block

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

     span < width: 100px; height: 30px; background-color: #aaa; >.inineBlockSpan 
Проехав с полверсты в хвосте колонны, он остановился
 
Проехав с полверсты в хвосте колонны, он остановился
   

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

run-in

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

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

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

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

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

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

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

     .invisible 
Первый параграф
 
Второй параграф
 
Третий параграф
   

Источник

Разница между и

Элементы из предыдущей главы выводятся последовательно на одной горизонтальной строке. Они ведут себя как обычный текст и просто отображаются рядом друг с другом, даже если они имеют определённые размеры и другие свойства, которые не относятся к тексту. Это не должно удивлять, так как , и — элементы, которые относятся к одной группе называемой строчно-блочной. Такие элементы могут иметь разные размеры, однако браузер всегда отображает их горизонтально подобно тексту. В этой главе мы узнаем о различных группах элементов в соответствии с тем, как они выкладываются на странице.

Для начала давайте разберём, как отображать один элемент под другим по вертикали. Мы в основном должны сказать браузеру: «Эй, мы хотим контейнер, который может стыковаться вертикально». К счастью, это тег контейнера известен как и это своего рода «перенос» содержания на новую строку (вроде разрыва страницы или разрыва строки в текстовых редакторах).

Чтобы увидеть как работают элементы используем три из них и установим для них ширину, высоту и фон.

Согласно приведённым выше условиям, HTML будет выглядеть следующим образом.

В CSS мы пишем класс .container , который связан с тегом .

Посмотрим на это в браузере.

Похоже на один большой прямоугольник. Как насчёт отделить теги друг от друга?

Я добавил свойство margin-bottom (выделено выше), чтобы отделить каждый отступом снизу в 10 пикселей. Пришло время проверить эффект в браузере.

Отлично! Браузер отображает эти «блоки» один под другим, в отличие от нашего предыдущего примера с формой, где элементы выводились в одну строку.

В чём различие? Когда дело доходит до отображения тегов, браузер распознаёт три группы элементов:

Строчные элементы не вызывают перевода на новую строку и показывают один элемент рядом с другим по горизонтали. Блочные элементы устанавливаются как блоки, которые укладываются по верхней части друг друга и никогда не отображаются рядом по горизонтали, если мы не используем магические трюки в CSS (о которых узнаем в следующей главе). Строчно-блочные действуют в качестве строчных элементов (отображаются рядом друг с другом), но отличаются от них тем, что им можно задать размер. К примеру, поле может отображаться как большой прямоугольник, но при этом занять пространство за пределами одной строки текста.

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

По умолчанию, у строчных элементов стилевое свойство display установлено как inline . Для блочных элементов его значение block , а для строчно-блочных элементов inline-block . Теперь вы можете объяснить, из-за чего тег не переносит текст на новую строку. Потому что это строчный элемент, а значит в CSS у него свойство display установлено как inline . С учётом этого код ниже:

Браузер отобразит в одну линию:

Однако можно изменить это поведение, добавив одну строку в CSS:

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

Для этого примера мы используем . Вы можете поинтересоваться, что этот тег описывает в документе. Краткий ответ: ничего. Мы используем тег в тех случаях, когда все другие теги не подходят для использования того, что мы вложили в документ. В общем случае тег (в сочетании с разными классами) применяется для получения различных визуальных эффектов, в результате у него нет функции для описания содержимого. К примеру, если вы желаете сделать три вертикальных колонки на сайте, то, возможно, потребуется элемент, который может разделить некоторые строчные или строчно-блочные элементы.

Вообще, хорошей идеей будет не злоупотреблять тегом , если это возможно.

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

  
Ваше имя: 
 
 
Ваш e-mail: 
 
 
Содержание: 
 

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

Ещё раз, давайте сравним новый (справа) и старый код (слева).

А теперь посмотрим, как новый код отображается в браузере!

Наша форма теперь выглядит превосходно!

Источник