Display (block, none, inline) в CSS — задаем тип отображения Html элементов на вебстранице


Содержание материала:

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

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

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

Значение none

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

Значение block

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

Это значение display многие элементы имеют по умолчанию:

, параграф

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

Значение inline

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

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

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

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

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

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

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

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

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

Значение inline-block

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

Как и инлайн-элемент:

  • Располагается в строке.
  • Размер устанавливается по содержимому.

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

  • Элемент всегда прямоугольный.
  • Работают свойства width/height .

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

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

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

Значения table-*

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

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

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

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

С точки зрения современного CSS, обычные

,

,

и т.д. – это просто элементы с предопределёнными значениями display :

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

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

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

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

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

Чем отличаются display block от inline и table css

display: block;

По умолчанию присвоен p, div, form, ul, h1 и т.д.

    на строку, на которой расположился блок, уже нельзя добавить другой элемент, даже когда остаётся пустое пространство. Искл., при применении свойств position, float, transform.

  1. маленькая
  2. с длинным текстом

Для того, чтобы вся строка была ссылкой

  1. маленькая
  2. с длинным текстом

Уберём ненужные отступы (padding, margin), маркер (list-style) и подчёркивание (text-decoration) и добавим рамку (border)

  1. маленькая
  2. с длинным текстом

display: inline;

По умолчанию присвоен a, span, b, em и т.д.

    элементы следуют друг за другом.

display: inline-block;

По умолчанию присвоен img, input и т.д. По отношению к внешним элементам ведёт себя как inline, а внутренним block.

  1. элементы следуют друг за другом.
  2. имеет w >какой-то текст

display: list-item;

По умолчанию присвоен li. Элемент показан как блочный с маркером списка. Вид маркера изменяет свойство list-style. В примере выше маркер отсутствует, поскольку у li display отличный от list-item.

display: run-in;

Если после элемента с display в значении run-in следует блок, то он становится в одну строку с ним и является его частью. Иначе элемент вызывает разрыв строки. Не поддерживается Mozilla Firefox.

display: table;

По умолчанию присвоен table.

  1. на строку, на которой расположилась таблица, уже нельзя добавить другой элемент.
  2. если не задано значение w >какой-то текст

display: inline-table;

Аналогичен display: inline-block.

display: table-row;

По умолчанию присвоен tr. Объединяет группу ячеек, которые не будут перенесены на другую строку.

  1. на строку, на которой расположилась строка таблицы, уже нельзя добавить другой элемент.
  2. элемент растягивается по длине содержимого.
  3. w >По умолчанию присвоен td и th. Я рассматриваю ситуацию, когда родитель имеет display: table-row.

  1. элементы следуют друг за другом.
  2. если не задано значение w >

display: table-caption (table-column, table-column-group, table-footer-group, table-header-group, table-row-group)

По умолчанию присвоен caption (col, colgroup, tfoot, thead, tbody). Пока не вижу практической ценности.

display: none;

Элемент становится невидимым, не сохраняя занимаемое место.

10 комментариев:

Marina Voronova Привет) мне необходимо разместить два списка ul в одну строку. применяю к ul display: inline-block; но ничего не получается(
в чем м.б. ошибка? NMitra Привет. display: inline-block; нужно применять к li Marina Voronova а как тогда расположить два списка ul в одну строку?
применяю к ul display:block; но это не работает( NMitra Посмотрите про float: left; http://shpargalkablog.ru/2011/05/float-left-div-css.html
Возможно нужно это http://shpargalkablog.ru/2013/07/justify.html или это http://shpargalkablog.ru/2013/12/border.html#box-sizing-border-box (причины, почему съезжает элемент вниз). К последней ссылке http://shpargalkablog.ru/2013/01/skachet-menu.html SelenIT «display: inline-block; По умолчанию присвоен img, input и т.д.» — внешне оно так выглядит, но формально у них по умолчанию всё-таки display:inline. Просто это так называемые «замещаемые» элементы, для которых визуальное форматирование описано в отдельном подразделе спецификации. Но в Firefox, например, если картинка не загрузилась, то ее alt отображается как обычный текст, при необходимости переносясь на новую строку, как и должно быть при display:inline. NMitra Спасибо, Илья, очень важное замечание! Анонимный Здравствуйте, Наталья!

У меня есть один вопрос. Он относиться к описанию стиля «display: table-cell;»

Все ячейки, т.е. элементы «див» со стилем display:table-cell? имеют заданные индивидуальные величины ширины.
Ячейка1 — «111» — 20%
Ячейка2 — «2» — 10%
Ячейка3 — «33» — 30%
Ячейка4 — «4» — 20%

Итого: суммарно 80% от всей ширины содержащего их контейнера.
Вопрос: Почему в таком случае они заполняют весь контейнер? Смысл в таком случае устанавливать значения ширины? NMitra Здравствуйте. Это особенность таблицы. Сделайте ещё одну пустую ячейку или контейнеру с display: table; укажите максимально возможную ширину. Анонимный Здравствуйте. Спасибо за последний ответ.

Получается так: при указании максимальной ширины ( >=20%) для последней ячейки — все четыре предыдущие занимают свою ширину согласно задекларированным значениям, а последняя — всё оставшееся место.

Если же указать ширину последней ячейки меньше оставшегося пространства ( NMitra Я не разбирала этот вопрос столь детально. Возьмите родителя, задайте ему display: table; и table-layout: fixed; Таблица будет вести себя более предсказуемо.

CSS Layout — The display Property

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

Свойство Display

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

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

Click to show panel

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

Это стиль с CSS, и мы используем JavaScript, чтобы показать его (изменить его на ( display: block ).

Элементы уровня блока

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

Примеры элементов уровня блока:

visibility:hidden; также скрывает элемент.

Тем не менее элемент будет по-прежнему занимать то же пространство, как и раньше. Элемент будет скрыт, но по-прежнему влияет на макет:

Пример

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

Различия между дисплеем: нет; и видимость: скрытый;
В этом примере демонстрируется отображение: None; против видимости: скрытый;

Использование CSS вместе с JavaScript для отображения содержимого
В этом примере демонстрируется использование CSS и JavaScript для отображения элемента по щелчку.

Блочные и строчные элементы

В HTML существует два типа элементов — блочные (block elements) и строчные (inline elements). Ниже вы узнаете особенности этих элементов и разницу между ними, а также способы управлять ими через правила CSS.


Блочные элементы

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

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

и т. д.

Строчные элементы

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

Примеры строчных элементов: , , , , и т. д.

Блочные и строчные элементы HTML

Примечание: в HTML5 порядок вложения тегов такой роли не играет. Элементы уже не просто делятся на блочные и строчные, а группируются по смыслу и назначению, представляя собой категории контента.

CSS-свойство display: меняем тип элемента

При помощи крайне полезного свойства display в CSS можно заставить блочный элемент выглядеть как строчный и наоборот. Чтобы блочный элемент вел себя как inline-элемент (т. е. не переводился на новую строку), для него необходимо записать правило:

Если же необходимо отобразить строчный элемент как block-элемент (чтобы до и после элемента происходил перенос строки), запишите следующее:

Также можно сделать «гибрид» — блочный элемент с поведением, как у строчного. В этом случае всё содержимое таких блочных элементов будет отображаться, как обычно, но при этом блоки будут вести себя как строчные элементы, выстраиваясь в одной строке друг за другом и переносясь на новую строку лишь при необходимости. Схлопывание margin в таких случаях перестает действовать. Для превращения элемента в блочно-строчный запишите:

Далее в учебнике: свойство CSS border. Вы узнаете, как добавлять границы для элементов веб-страницы и какие настройки к ним можно применить, используя каскадные таблицы стилей.

Display (block, none, inline) в CSS — задаем тип отображения Html элементов на вебстранице

Кроме свойства 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 позволяет скрыть элемент, которого как-будто нет на веб-странице:

Параметры отображения html элементов на веб странице. CSS свойства visibility и display

Здравствуйте, уважаемые читатели блога webcodius.ru. Сегодня рассмотрим группу стилевых атрибутов отвечающих за то как html элемент будет отображаться на web странице, будет ли он блочным или строчным, и будет ли отображаться вообще. В эту группу входят два css свойства display и visibility. Особенно важным свойством является display, его наиболее часто применяемые значения вы уже скорей всего встречали в CSS коде: display block, none или inline. Давайте рассмотрим все это подробнее не примерах.

Видимость html элементов — свойство visibility

Свойство стиля visibility предназначено для отображения или скрытия элемента на веб странице:

Атрибут может принимать три значения:

  • visible — элемент отображается на web-странице (значение по умолчанию);
  • hidden — элемент не отображается на странице, или точней сказать, становится полностью прозрачным, так как под него все еще выделено место;
  • collapse — применим только к строкам и столбцам таблицы. Соответствующие строки и столбцы убираются, а таблица перестраивается. Если это значение применяется не к строкам или колонкам таблицы, то результат будет таким же, как со значением hidden.

Ниже можно посмотреть как работает это свойство:

Наведи на меня курсором мыши!

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

В примере выше (область в прямоугольнике) изначально виден абзац с текстом «Наведи на меня курсором мыши!», а ниже под ним пустая область — это элемент p к которому применено правило CSS «visibility: hidden» и соответственно браузер делает его невидимым. Если навести курсор мыши на верхний абзац, то нижний абзац становится видимым, потому что в этом случае к нему применяется правило «visibility: visible».

Стили CSS для этого примера выглядят так:

Наведи на меня курсором мыши!

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

Первое правило CSS говорит браузеру, что хтмл элемент с атрибутом class равным el1 должен быть невидимым на странице. А второе CSS правило означает, что при наведении на элемент с атрибутом class равным el2 его соседний элемент с атрибутом class равным el1 должен стать видимым.

Свойство стиля CSS visibility применяется довольно редко, в основном только для создания подобных эффектов исчезающих и появляющихся элементов страницы.

А вот атрибут display намного популярнее в использовании. Он позволяет не только скрывать и отображать html элементы, но и вообще задавать способы их отображения. При помощи атрибута display блочные элементы можно сделать строчными и даже списком, или вообще скрыть их используя правило display:none. Например, чтобы создать выпадающие меню на чистом CSS без свойства display не обойтись.

Доступных значений у этого стиля довольно много:

Если кратко, то каждое значение оказывает на html элементы следующее действие:

  • block — элемент отображается как блочный;
  • inline — элемент выводится как строчный;
  • inline-block — формирует блочный элемент, который обтекается другими элементами хтмл страницы, по своему действию похож на встраиваемые элементы (вроде тега );
  • inline-table — делает из элемента таблицу, как при использовании тега
    , но при этом таблица является встроенным элементом и она обтекается другими элементами;
  • list-item — элемент становится блочным и к нему добавляется маркер списка;
    none — удаляет элемент из документа, причем занимаемое им место не резервируется и веб-страница формируется так, словно элемента не было;
  • run-in — элемент становится блочным или строчным в зависимости от контекста;
  • table — задает, что элемент является таблицей как при использовании тега
  • ;
  • table-caption — формирует из элемента заголовок таблицы, как при применении тега ;
  • table-cell — элемент представляет из себя ячейку таблицы, подобно тегу
  • .
  • table-row — делает из элемента строку таблицы как тег
  • ;
  • table-row-group — действует как тег
  • .

    Далее рассмотрим наиболее важные значения свойства display подробнее.

    Делаем блочный элемент строчным — значения block и inline

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

    При описании html тегов я часто обращал ваше внимание на тип тега — строчный он или блочный. От этого во многом зависит поведение элемента на веб странице: будет ли он стремиться занять всю ширину страницы и установить разрыв строки над и под элементом (блочные элементы), либо не будет (строчные элементы). За такое поведение элементов, как раз отвечает правило CSS display.

    Узнать к какому типу по умолчанию относится тот или иной тег, можно на странице спецификации CSS «Default style sheet for HTML 4». В самом начале на этой странице перечислены все элементы, относящиеся к блочным, так как для них установлено правило display:block:

    Для остальных элементов, если не указано иного, применяется правило display:inline.

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

    Давайте рассмотрим такой пример:

    Заголовок h1

    В примере два элемента: один блочный (h1) и один строчный (span). Для наглядности каждый элемент залит своим фоном с помощью свойства background:

    На скриншоте видно, что элемент заголовка h1, у которого по умолчанию display равен block, занимает всю доступную ему по ширине область страницы, не смотря на то, что содержащийся в нем текст заканчивается гораздо раньше. А элемент span, у которого значение display по умолчанию принимается равной inline, по горизонтали занимает ровно столько места сколько нужно для заключенного в нем контента.

    В следующем примере сделаем из блочного элемента h1 строчный. Для этого в стилях добавим для него правило display:inline:

    Заголовок h1

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

    Точно также, с помощью добавления правила display:block, можно строчный элемент span сделать блочным:

    Заголовок h1

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

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

    Динамика на html странице с помощью правила CSS — display none

    Прописанное для любого элемента правило display:none удаляет его из документа и никак его не отображает. При этом для него даже не резервируется занимаемое место на веб странице, как это было с правилом visibility:hidden, рассмотренном выше. Веб страница формируется так словно элемента и не было на странице.

    Значение «none» для правила display применяется в основном для реализации динамики на странице, используя селекторы псевдоклассов и псевдоэлементов. Например, используя псевдокласс hover, можно задавать правила, которые начинают работать только при наведении мыши на нужный html элемент.

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

    Кроме рассмотренных подробно block, inline и none, правило display может принимать еще множество различных значений. Но они используются редко.

    Например правило display:list-item позволяет сделать блочные теги элементами списка. Например у нас есть несколько подряд идущих абзацев:

    Которые по умолчанию будут выглядеть примерно так:

    Теперь если для этих абзацев прописать правило display:list-item, то браузер сформирует специальную область в которой отобразит маркеры. Правда, чтобы их увидеть, необходимо каким-то образом отодвинуть абзацы от левого края. Сделать это можно с помощью правила margin-left, указав нужный отступ:

    В итоге без использования тегов

      и
      мы создали маркированный html список. При желании можно настроить вид маркера при помощи CSS правила list-style.

    Кроме списка правило display позволяет преобразовывать хтмл теги в таблицу и ее составные части. Для этого каждому элементу таблицы в html коде ставиться в соответствие свое значение дисплей: table, inline-table, table-caption, table-column, table-column-group, table-header-group, table-row-group, table-footer-group, table-row, table-cell.

    И последнее значение display:inline-block, которое генерирует блочный элемент обтекаемый другими внешними и соседними элементами страницы. По своему действию это правило CSS похоже на встраиваемые элементы, подобные тегу .

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

    На этом заканчиваю, не забывайте подписываться на обновления блога и нажимать на кнопочки социальных сетей! До новых встреч!

    АВТОМИР

    display является наиболее важным стилевым свойством в CSS для управления шаблоном. Каждый элемент имеет значение отображения по умолчанию в зависимости от того, к какому типу относится данный элемент. Для большинства элементов, значения отображения по умолчанию, как правило, будут block или inline . В оригинале, блочный элемент часто еще называют элементом блочного уровня(block-level element).У строчного же элемента нет альтернативного названия.

    block

    div является стандартным блочным элементом. Блочные элементы начинаются с новой строки и их содержимое растягивается влево и вправо настолько, насколько это возможо. Другие распространенные блочные элементы это p и form , а также новые блочные элементы из HTML5, такие как header , footer , section , и прочие.

    inline

    span это стандартный строчный элемент. Строчный элемент может обернуть текст внутри абзаца вот так не нарушая его структуры. Наиболее распространенный строчный элемент это a так как вы используете его для ссылок.

    Еще одно распространенное значение для отображения это none . Некоторые специализированные элементы, такие как script используют это значение по умолчанию. Оно широко используется с JavaScript, чтобы скрывать и показывать элементы вместо того, чтобы удалять и воссоздавать их снова.

    Оно отличается от visibility . При задании свойству display значения none страница будет отображаться словно элемент не существует. visibility: hidden; просто скроет элемент, но элемент по прежнему будет продолжать занимать место, как если бы он был полностью виден.

    другие display значения

    Есть много более экзотичных стилевых значений для отображения, таких как list-item и table . Вот полный список . Позже мы обсудим inline-block и flex .

    дополнение

    Как я уже говорил, каждый элемент имеет тип отображения по умолчанию. Тем не менее, вы всегда можете переопределить это! Хотя это не имело бы смысла для того, чтобы сделать div строчным, вы можете использовать это, чтобы настроить отображение элементов с частной семантикой. Типичный пример – возможность выстраивания li элементов для горизонтального меню.

    Свойство CSS Display нужен для установки типа html элемента относительно других элементов. Проще говоря это опция отвечает за то, как отображать элемент относительно других. Благодаря ему можно добиваться нужных «спецэффектов».

    Синтаксис CSS Display

    Где value может принимать значения:

    • block — блочный элемент (автоматически создает перевод строки)
    • inline — встроенный элемент (не создает перевода строки);
    • inline-block — производная от inline. Он также не создает перевода строки, но элементу можно задать ширину и высоту;
    • list-item — блочный элемент с маркером списка;
    • run-in — устанавливает элемент как блочный или встроенный в зависимости от контекста;
    • table — равносильно таблице (тег
    или

    ;
  • table-column — элемент является колонкой таблицы, как при теге ;
  • table-column-group — определяет, что элемент является группой одной или нескольких колонок таблицы, как при использовании тега ;
  • table-footer-group — действует подобно тегу .
  • table-header-group — по своему действию значение похоже на тег
  • ), с переносом строки;
  • 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

    display : inline-block ; width : 150px ; height : 50px ; border : 1px solid #000 «> Как видите, блок с текстом none отсутствует

    Вот как это выглядит на странице:

    Абзац №1. Рассматриваем элементы. текст со свойством display:inline-block Как видите, блок вставлен прямо в контент

    Свойство display является одним из самых важных свойств CSS, которые используются верстальщиками для построения макета. Самыми популярными значениями этого свойства являются block , inline и none . Значения table и inline-block также довольно распространены. Но кроме этих значений есть еще масса других, которые можно и нужно использовать, и о которых вы, возможно, не знали. Поэтому, этот пост посвящен рассмотрению различных значений свойства display в CSS-стилях.

    Прежде чем мы поговорим о свойстве display , мы должны упомянуть «дерево блоков» (box tree).

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

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

    Все элементы имеют значение display по умолчанию, но его можно переопределить, явно установив значение display на что-то другое. Значение по умолчанию в XML (а также для элементов SVG) является inline . А в HTML значения свойств display по умолчанию берутся из поведения, описанного в спецификациях HTML, или из таблицы стилей по умолчанию для браузера/пользователя.

    Основные значения свойства display в CSS

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

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

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

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

  • имеют значение по умолчанию для элемента списка (list-item). Значение обычно используется для возврата элементов
  • к их дефолтному поведению.

    Элемент генерирует «коробку» блочного уровня, но весь блок ведет себя как встроенный (инлайновый) элемент. Т.е., он «обтекается» другими элементами веб-страницы.

    Табличный уровень

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

    table Соотносится с

    HTML элементом. Определяет «коробку» блочного уровня.HTML элементом.HTML элементом.HTML элементом.
    table-header-group Соотносится с

    table-row Соотносится с

    table-cell Соотносится с

    HTML элементом.
    table-row-group Соотносится с

    table-footer-group Соотносится с HTML элементом.
    table-column-group Соотносится с HTML элементом.
    table-column Соотносится с HTML элементом.
    table-caption Соотносится с HTML элементом.
    inline-table Это единственное значение, которое не имеет прямого сопоставления с HTML элементом. Элемент будет вести себя как элемент HTML таблицы, но как инлайновый блок, а не как элемент блочного уровня.

    Хотя табличные макеты используются редко, они бывают очень полезными в некоторых случаях. Например, если вы хотите отображать таблицу только на широких экранах, а для меньших экранов только сохранить ее поддержку. Этого можно достигнуть с помощью сочетания медиа-запросов и свойства display .

    Более современные значения

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

    А когда CSS ставал все более популярным, верстальщики перешли к плавающим макетам, размещая контент в разных плавающих div , чтобы добиться желаемого эффекта. Такая техника до сих пор очень распространена, но после появления flexbox (макета гибкой «коробки» в CSS), эта ситуация будет длиться все меньше. Когда макет гибкой «коробки» будет полностью поддерживаться всеми браузерами, гибкие макеты станут преобладающим методом верстки. Тем не менее, не все браузеры поддерживают спецификацию flexbox , и это сильно тормозит ее развитие.

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

    Объявляя display: flex; для элемента, он становится flex (гибким) контейнером, а его дочерние элементы становятся гибкими элементами этого контейнера. Свойства flex не распространяются на внуков этого элемента. Как гибкий контейнер, так и гибкие элементы имеют свои собственные гибкие свойства.

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

    Обратите внимание, что CSS-сетка официально не реализована ни в одном браузере. Чтобы поддерживать ее, браузерам нужно указывать префиксы поставщиков и устанавливать флаги.

    Экспериментальные значения (не должны использоваться в рабочем коде)

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

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

    Обратите внимание, что это значение поддерживается только в Internet Explorer 11 и Opera Mini.

    Элемент ведет себя как инлайновый и выдает свое содержимое в соответствии с моделью форматирования элемента HTML. Если вкратце, то это позволяет отображать аннотации рядом с базовой линией текста (обычно для помощи в произношении). Такая техника довольно распространена в китайском и японском языках.

    Суть этого значения заключается в том, что когда вы его используете для элемента, он исчезает из DOM, но все его потомки остаются и занимают свое пространство. Эта спецификация на данный момент поддерживается только в Firefox >59, Chrome >65, Safari 11.1.

    Краткий итог

    Рассмотренный сегодня список значений свойства display действительно внушительный. Ведь развитие технологий обусловливает появление и новых методик, и новых подходов к решению различных задач в веб-дизайне. Хотя, с другой стороны, многие методики становятся морально устаревшими и теряют свою былую славу. Надеемся, что данная статья поможет вам идти в ногу со временем и позволит более эффективно решать задачи верстки.

    если не задано значение width, элемент растягивается на весь родительский контейнер.

    если задано значение width, ширина складывается из margin, border, padding, width (). Поэтому красная рамка выходит за пределы родительского блока при width: 100%.

    width: 100%;
    border: 4px double red;

  • если не задано значение height, элемент растягивается на высоту, необходимую содержимому блоку, иначе высота складывается из margin, border, padding, height.
  • при превышении указанной высоты/ширины содержимое отображается поверх блока, коли не указано иное с помощью свойства . В нашем случае красная рамка видна над голубой родительского блока. Пример использования

    1. маленькая
    2. с длинным текстом

    Для того, чтобы вся строка была ссылкой
    Уберём ненужные отступы (padding, margin), маркер (list-style) и подчёркивание (text-decoration) и добавим рамку (border)

    display: inline;

    По умолчанию присвоен a, span, b, em и т.д.

    какой-то текст прямоугольник А переносится на новую строку какой-то текст

  • width и height игнорируются. Его ширина — это ширина содержимого плюс margin, border и padding.
  • margin-top и margin-bottom игнорируются.
  • совместно с padding-top и padding-bottom следует корректировать line-height, иначе строки будут «наезжать» друг на друга.

    какой-то текст прямоугольник А переносится на новую строку и наезжает на соседние строки из-за установленного значения padding какой-то текст

  • не может иметь . Но при этом поддаётся его воздействию, если данное свойство задано родителю-блоку.
  • Пример использования

    Пробелы между тегами li нужно убирать. Когда разделяются слова пробелом, между ними появляется пустое пространство, здесь то же самое.

    1. маленькая
    2. с длинным текстом

    display: inline-block;

    По умолчанию присвоен img, input и т.д. По отношению к внешним элементам ведёт себя как inline, а внутренним block.

    display: list-item;

    По умолчанию присвоен li. Элемент показан как блочный с маркером списка. Вид маркера изменяет свойство . В примере выше маркер отсутствует, поскольку у li display отличный от list-item.

    display: run-in;

    Если после элемента с display в значении run-in следует блок, то он становится в одну строку с ним и является его частью. Иначе элемент вызывает разрыв строки. Не поддерживается Mozilla Firefox.

    display: run-in;
    вторая строка

    display: table;

    По умолчанию присвоен table.

    1. на строку, на которой расположилась таблица, уже нельзя добавить другой элемент.
    2. если не задано значение width, элемент растягивается по длине содержимого, иначе ширина складывается из margin, border, padding, width. При превышении указанной высоты/ширины содержимое отображается поверх блока.

    width: auto;
    display: table;

  • не поддаются влиянию блоки, если у родителя , только их содержимое.
  • не действуют такие свойства, как .
  • применимы свойства .
  • display: inline-table;

    Аналогичен display: inline-block.

    display: table-row;

    По умолчанию присвоен tr. Объединяет группу ячеек, которые не будут перенесены на другую строку.

    1. на строку, на которой расположилась строка таблицы, уже нельзя добавить другой элемент.
    2. элемент растягивается по длине содержимого.
    3. width, border, padding, margin, vertical-align игнорируются.
    4. можно изменить значение height.
    5. не поддаются влиянию блоки, если у родителя , только их содержимое.

    display: table-cell;

    По умолчанию присвоен td и th. Я рассматриваю ситуацию, когда родитель имеет display: table-row.

    1. элементы следуют друг за другом.
    2. если не задано значение w >

    display: table-caption (table-column, table-column-group, table-footer-group, table-header-group, table-row-group)

    По умолчанию присвоен caption (col, colgroup, tfoot, thead, tbody). Пока не вижу практической ценности.

    display: none;

    Элемент становится невидимым, не сохраняя занимаемое место.

    1. маленькая
      1. подпункт1
      2. подпункт2
    2. с длинным текстом
    1. маленькая
      1. подпункт1
      2. подпункт2
    2. с длинным текстом
    1. маленькая
      1. подпункт1
      2. подпункт2 длинный
    2. с длинным текстом

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

    По сути, оно позволяет задавать и при необходимости менять способы отображения тех или иных элементов Html кода. С помощью него блочные элементы можно будет сделать строчными или даже списком, а также используя display:none можно реализовывать динамику на вебстранице, например, создавать выпадающие меню без использования скриптов на чистом CSS.

    Display block и inline — как блочный сделать строчным


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

    Даже если вы никаких специальных стилей не задавали для каких-либо тегов, то они все равно будут отображаться браузером с учетом тех правил, которые были приняты для них по умолчанию. Где же можно посмотреть на эти самые CSS стили по умолчанию для всех Html тегов ? Ну, все в том же на этой странице . Если прокрутить ее оглавление до конца, то там вы увидите ссылку « », где и будет приведена нужная нам информация.

    К чему все это? Я уже неоднократно при описании тех или иных Html тегов акцентировал ваше внимание на том, к какому именно типу относится этот тег — строчный или же блочный . В зависимости от этого мы предполагали наличие определенного поведения у данных элементов — либо они будут стремиться занять все доступное им место по ширине (блочные), либо не будут (строчные).

    Но я так и не объяснил откуда берется такое разделение и где можно узнать к какому именно типу относится конкретный тег. Так вот, узнать это как раз можно на упомянутой нами странице спецификации CSS под названием «Default style sheet for HTML 4 » и отвечает за все это безобразие специальное правило Display.

    Например, там в самом начале перечислены все элементы, которые относятся к блочным и происходит это из-за того, что на них действует правило display:block :

    Здесь вы можете увидеть все те же теги , контейнеров и других блочных элементов. Если посмотреть на список CSS свойств и допустимых для них значений в валидаторе W3C, то для display мы увидим следующее:

    Если не указано другого, то по умолчанию будет использоваться вариант «display:inline» (т.к. именно это значение прописано в столбце «Initial value»), что будет соответствовать формированию строчных элементов. Поэтому в приведенной на странице спецификации «Default style sheet for HTML 4 » те теги, которые должны отображаться как строчные (например, span), вообще не описаны или для них не указано значение Дисплей, ибо по умолчанию они и так будут строчными.

    Правило Дисплей отвечает за то, как данный элемент надо строить и отображать браузеру. Оно говорит обозревателю, что из себя представляет тег и как его надо показывать. Имеется возможность показывать как элемент строки (display: inline) или как блок (block), показывать как таблицу (table) или как часть таблицы (inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption). Это правило очень важное.

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

    Давайте рассмотрим простой пример с тремя тэгами, один из которых по умолчанию будет строчным (span), а два других — блочными (H3 и P). Для большей наглядности я залил область отведенную для этих элементов :

    H3 по умолчанию будет отображать браузером как блочный

    P — еще один по умолчанию блочный

    В результате браузер отобразил все элементы в полном соответствии с их умолчательными значениями правила Display:

    Как видите, первый блок H3 (с умолчательным значением block) занимает весь доступный ему размер по горизонтали (равно как и третий элемент P), ну а строчный Span (с умолчательным значением display:inline) занимает по ширине ровно столько места, сколько нужно для размещения заключенного в него контента.

    Ну, а теперь давайте из изначально блочного тега H3 сделаем строчный с помощью добавления к нему display inline (я уменьшил текст в первых двух элементах для получения большего эффекта наглядности):

    P — еще один по умолчанию блочный тэг

    Как вы можете видеть, браузер учел display:inline и теперь элемент заголовка H3 (изначально блочный) уже не занимает все доступное ему по ширине пространство, вследствие чего к нему вплотную оказался прижат следующий за ним строчный тэг Span.

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

    Точно так же можно из строчного тега Span сделать блочный с помощью добавления display:block:

    P — еще один по умолчанию блочный Html элемент

    И в результате наше наглядное пособие отобразит произошедшую :

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

    Display list-item — создание списков на основе блочных тегов

    А теперь давайте попробуем с помощью Дисплей сделать ряд блочных тегов элементами списка. С этим нам поможет справиться правило display:list-item . Пусть у нас изначально будут присутствовать несколько абзацев и заголовок:

    Первый абзац (тег P)

    Которые будут выглядеть примерно так:

    Теперь, если мы добавим ко всем блочным тэгам абзаца CSS правило display:list-item, то браузер сгенерирует для всех этих элементов специальную область для маркера, в которых появятся эти самые маркеры используемые по умолчанию:

    Первый абзац (тег P)

    Но в таком виде вы никаких изменений не заметите. Область маркера добавляется перед областью блочного тега и чтобы ее увидеть, нужно каким-либо образом отодвинуть этот блок слева от края контейнера, в котором он живет. Сделать это можно с помощью все того же , а именно прописав для нужных абзацев margin-left:20px (или заключив абзацы, например, в ) и тогда получим следующую картину:

    Получается, что с помощью правила Display можно в любой момент поменять уже имеющиеся в Html коде элементы на другие (просто изменив способ их отображения на вебстранице), при этом не меняя эти самые теги. Дело в том, что тэгов в коде может быть очень много и менять их все вручную будет затруднительно, а вот с помощью Дисплей это можно будет сделать в несколько кликов через внешний файл таблиц каскадных стилей, что очень удобно.

    Удачи вам! До скорых встреч на страницах блога сайт

    посмотреть еще ролики можно перейдя на

    Вам может быть интересно

    Float и clear в CSS — инструменты блочной верстки
    Position (absolute, relative и fixed) — способы позиционирования Html элементов в CSS (правила left, right, top и bottom)
    Позиционирование с помощью Z-index и CSS правило Cursor для изменения курсора мыши
    Height, width и overflow — CSS правила для описания области контента при блочной верстке
    CSS свойства text-decoration, vertical-align, text-align, text-indent для оформления текста в Html

    какой то “куцый” обзор… как будто спешили куда то

    Как работает в CSS display: contents;

    Дата публикации: 2020-04-10

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

    С помощью свойства CSS display мы можем управлять тем, как этот блок и его дочерние элементы выводятся на странице. Мы можем вставить блок в ряд с элементами одного уровня с помощью inline. Мы можем сделать так, чтобы блок вел себя, как таблица, с помощью table. Мы можем даже поместить блок в совершенно другую позицию по оси z с помощью absolute.

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

    Что произойдет, если вы используете display: contents?

    Самый простой способ понять, что происходит при использовании display: contents — представить, что из разметки были удалены теги открытия и закрытия элемента. В спецификации говорится: Для целей создания блоков и определения макета элемент должен обрабатываться так, как если бы он был заменен в дереве элементов его содержимым.

    Практический курс по верстке адаптивного сайта с нуля!

    Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

    Возьмем, например, следующую разметку:

    И следующие стили:

    Как правило, мы ожидаем, что элементы будут выводиться на странице так:

    Однако, если мы добавим display: contents для элемента .outer, вот как он будет отображаться:

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

    Как насчет…?

    Это правило CSS прямого действия, и для него существует очень немного специфических случаев, о которых стоит упомянуть. Мы должны помнить, что правило display: contents влияет только на визуальное отображение блока на странице; оно не влияет на разметку внутри документа.

    Как насчет атрибутов элемента?

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

    Мы по-прежнему можем выбирать элемент по его идентификатору, например, сделав ссылку на него, используя aria-labelledby.

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

    Как насчет событий JavaScript?

    Как только что было сказано, мы можем по-прежнему выбрать элемент для которого указано содержимым display: contents. Фактически, мы можем выбрать даже элемент, для которого задано display: none, но события не будут инициироваться, потому что мы не сможем взаимодействовать с элементом. Однако, поскольку содержимое элемента с display: contents по прежнему отображается, мы можем взаимодействовать с элементом через его содержимое.

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

    Как насчет псевдоэлементов?

    Псевдоэлементы элемента с display: contents считаются частью его дочерних элементов, поэтому отображаются как обычно.

    Практический курс по верстке адаптивного сайта с нуля!

    Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

    Приведенная выше разметка дает следующий результат:

    Как насчет элементов формы, изображений и других замещаемых элементов? Замещаемые элементы и элементы формы ведут себя по другому, когда к ним применяется display: contents.

    Замещаемые элементы

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

    Элементы формы

    Многие элементы формы не состоят из одного «блока». Они выглядят так с точки зрения нас, авторов веб-страниц. Но под капотом они состоят из нескольких меньших элементов. Подобно замещаемым элементам, нет смысла убирать блок, потому что у нас есть несколько блоков. Поэтому для элементов формы, таких как select, input и textarea, display: contents работает так же, как и display: none.

    Как насчет кнопок и ссылок?

    Кнопки

    Кнопки не являются одним из элементов формы, которые состоят из нескольких блоков. Поэтому display: contents просто удаляет окружающий блок, оставляя содержимое отображаемой кнопки. Если кнопка используется в форме, нажатие на нее по-прежнему приведет к отправке данных формы, и, как мы уже рассматривали, прослушиватели событий для кнопки будут функционировать нормально.

    Ссылки

    Для ссылок также окружающий блок визуально удаляется, и остается содержимое ссылки. Поскольку эти правила CSS обычно не распространяются на атрибуты, ссылка по-прежнему будет функционировать должным образом и может использоваться для навигации в обычном режиме.

    Чем полезно display: contents?

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

    Возьмем, к примеру, следующий макет:

    У нас есть две «карточки», расположенные рядом друг с другом, каждая из них содержит заголовок, параграф и подвал. Мы хотим, чтобы каждый из разделов внутри каждой карточки был одинаковой высоты, независимо от его содержимого (например, заголовок первой карточки содержит только 1 строку, тогда как третья карточка содержит 3-строчный заголовок, но высота заголовка первой карточки должна соответствовать заголовку второй).

    Мы могли бы создать такой макета с помощью CSS Grid, но нам нужно, чтобы все элементы в каждой «карточке» были дочерними элементами одного уровня. Таким образом, нам, возможно, придется скомпоновать HTML следующим образом:

    display

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

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

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

    Синтаксис ?

    Обозначения

    Описание Пример
    Указывает тип значения.
    A && B Значения должны выводиться в указанном порядке. &&
    A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
    A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
    [ ] Группирует значения. [ crop || cross ]
    * Повторять ноль или больше раз. [, ]*
    + Повторять один или больше раз. +
    ? Указанный тип, слово или группа не является обязательным. inset?
    Повторять не менее A, но не более B раз.
    # Повторять один или больше раз через запятую. #

    ×

    Значения

    , автоматически создаёт перенос и показывает их содержимое с новой строки. Значение inline отменяет эту особенность, поэтому содержимое блочных элементов начинается с того места, где окончился предыдущий элемент. inline-block Это значение генерирует блочный элемент, который обтекается другими элементами веб-страницы подобно строчному элементу. Фактически такой элемент по своему действию похож на встраиваемые элементы (вроде ). При этом его внутренняя часть форматируется как блочный элемент, а сам элемент — как строчный. inline-table Определяет, что элемент является таблицей, как при использовании

    , но при этом таблица является строчным элементом и происходит её обтекание другими элементами, например, текстом. inline-flex Элемент ведёт себя как строчный и выкладывает содержимое согласно флекс-модели. flex Элемент ведёт себя как блочный и выкладывает содержимое согласно флекс-модели. list-item Элемент выводится как блочный и добавляется маркер списка. none Временно удаляет элемент из документа. Занимаемое им место не резервируется, и веб-страница формируется так, словно элемента и не было. Изменить значение и сделать вновь видимым элемент можно с помощью скриптов, обращаясь к свойствам через объектную модель. В этом случае происходит переформатирование данных на странице с учётом вновь добавленного элемента. run-in Устанавливает элемент как блочный или строчный, в зависимости от контекста. table Определяет, что элемент является блочной таблицей, подобно использованию

    . table-caption Задаёт заголовок таблицы, подобно применению . table-cell Указывает, что элемент представляет собой ячейку таблицы (

    . table-row Элемент отображается как строка таблицы (

    ). table-row-group
    Создаёт структурный блок, состоящий из нескольких строк таблицы, аналогично действию

    .

    Пример

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

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

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

    Примечание

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

    • поддержка значений table-footer-group и table-header-group происходит только для элементов
    и ;
  • для элементов
  • понимает значение block как list-item ;
  • значение inline-block применяется только для строчных элементов, с блочными элементами работает некорректно.
  • Opera 9.2, а также Firefox 2.0:

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

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

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

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

    или

    ). table-column
    Назначает элемент колонкой таблицы, словно был добавлен . table-column-group
    Определяет, что элемент является группой одной или более колонок таблицы, как при использовании . table-footer-group
    Используется для хранения одной или нескольких строк ячеек, которые отображаются в самом низу таблицы. По своему действию сходно с работой . table-header-group
    Элемент предназначен для хранения одной или нескольких строк ячеек, которые представлены вверху таблицы. По своему действию сходно с работой

    Спецификация Статус
    CSS Display Module Level 3 Рабочий проект
    CSS Ruby Layout Module Level 1 Рабочий проект
    CSS Grid Layout Рабочий проект
    CSS Flexible Box Layout Module Возможная рекомендация
    CSS Level 2 (Revision 1) Рекомендация
    CSS Level 1 Рекомендация

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

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

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

    ×

    Браузеры ?

    none, inline, block 4 12 1 7 1 1
    inline-block 5.5 12 1 7 1 3
    inline-flex, flex 11 12 29 17 9 28
    list-item 6 12 1 7 1 1
    run-in 8 12 1 7 1
    inline-table 8 12 1 7 1 3
    table, table-cell, table-column, table-column-group,table-header-group, table-row-group, table-footer-group, table-row, table-caption 8 12 1 7 1 1
    none, inline, block 1 1 8 1
    inline-block 1 1 8 1
    inline-flex, flex 4.4 28 12.1 9.2
    list-item 1 1 8 1
    run-in 1 8 1
    inline-table 1 1 8 1
    table, table-cell, table-column, table-column-group,table-header-group, table-row-group, table-footer-group, table-row, table-caption 1 1 8 1

    Браузеры

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

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

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

    display

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

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

    Описание

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

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

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

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

    Топ-пост этого месяца:  HTML5 формы новые элементы
    Добавить комментарий