display в CSS

Содержание

CSS display Свойство

Пример

Использование некоторых различных значений дисплея:

Подробнее примеры ниже.

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

Свойство display определяет поведение отображения (тип поля визуализации) элемента.

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

Значение по умолчанию: ?
Inherited: no
Animatable: no. Читайте о animatable
Version: CSS1
Синтаксис JavaScript: object.style.display=»none»

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

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

Свойство
display 4.0 8.0 3.0 3.1 7.0

Примечание: Значения «Flex» и «inline-Flex» требует-WebKit-префикс для работы в Safari.

Примечание: «Display: Contents» не работает в EDGE/Internet Explorer.

Синтаксис CSS

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

Значение Описание
inline Отображает элемент как встроенный элемент (например, ). Любые свойства Height и Width не будут иметь эффекта
block Отображает элемент как элемент блока (например,

). Он начинается на новой линии и занимает всю ширину contents Делает контейнер исчезают, делая дочерние элементы дочерних элементов элемента следующий уровень вверх в DOM flex Отображает элемент как контейнер Flex на уровне блоков grid Отображает элемент как контейнер сетки на уровне блоков inline-block Отображает элемент как контейнер блочного уровня. Сам элемент форматируется как встроенный элемент, но можно применять значения высоты и ширины inline-flex Отображает элемент как встроенный гибкий контейнер inline-grid Отображает элемент как контейнер сетки на уровне строки inline-table Элемент отображается в виде таблицы встроенного уровня list-item Пусть элемент ведет себя как элемент run-in Отображает элемент как блок или встроенный, в зависимости от контекста table Пусть элемент ведет себя как элемент table-caption Пусть элемент ведет себя как элемент table-column-group Пусть элемент ведет себя как элемент table-header-group Пусть элемент ведет себя как элемент table-footer-group Пусть элемент ведет себя как элемент table-row-group Пусть элемент ведет себя как элемент table-cell Пусть элемент ведет себя как элемент table-column Пусть элемент ведет себя как элемент table-row Пусть элемент ведет себя как элемент none Элемент полностью удален initial Присваивает этому свойству значение по умолчанию. Читайте о initial inherit Наследует это свойство из родительского элемента. Читайте о inherit

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

Пример

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

.a <
display: contents;
border: 2px solid red;
background-color: #ccc;
padding: 10px;
width: 200px;
>

.b <
border: 2px solid blue;
background-color: lightblue;
padding: 10px;
>

Пример

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

Пример

Задайте направление некоторых гибких элементов внутри элемента

CSS Display

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

Синтаксис CSS Display

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

  • 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

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

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

Виды элементов в CSS и свойство display.

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

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

У каждого вида блоков есть свои характеристики.

За выбор вида, в котором будет отображаться блок, отвечает свойство display.

Есть 2 основные группы элементов, которые могут отображаться на веб-страницах:

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

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

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

Если элемент не должен отображаться на странице, то свойство display будет принимать значение none.

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

Сейчас лишь хочу показать, как работает свойство display со значением none.

Абзац 2 просто перестает отображаться на странице. Страница выводится, как-будто его и нет.

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

Значение по умолчанию, которое будет применяться для элементов это

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

Есть еще несколько исключений из правила:

В спецификации об этом написано здесь:

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

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

CSS свойство display

Определяет, как элемент должен быть показан в документе (тип его отображения)

CSS синтаксис

Возможные значения

Значение Описание
inline Элемент отображается как встроенный (подобно ).
block Элемент отображается как блоковый (подобно

).

flex Элемент отображается как flex-контейнер блочного уровня (гибкий контейнер). Может использоваться в создании гибкой верстки страницы по модели FlexBox. Добавлено в CSS3.
inline-block Генерирует блочный элемент, который обтекается другими элементами веб-страницы подобно встроенному элементу. При этом его внутренняя часть форматируется как блочный элемент, а сам элемент — как встроенный.
inline-flex Элемент отображается как flex-контейнер встроенного уровня (гибкий элемент). Может использоваться в создании гибкой верстки страницы по модели FlexBox. Добавлено в CSS3.
inline-table Определяет, что элемент является таблицей как при использовании тега

, но при этом таблица является встроенным элементом и обтекается другими элементами.
list-item Элемент ведет себя подобно элементу
.
run-in Генерирует либо встроенный, либо блочный элемент в зависимости от контекста.
table Элемент ведет себя подобно элементу ....
table-caption Элемент ведет себя подобно элементу .
table-column-group Элемент ведет себя подобно элементу .
table-header-group Элемент ведет себя подобно элементу
table-footer-group Элемент ведет себя подобно элементу .
table-row-group Элемент ведет себя подобно элементу
table-cell Элемент ведет себя подобно элементу .
table-column Элемент ведет себя подобно элементу .
table-row Элемент ведет себя подобно элементу
none Элемент не отображается (и не имеет никакого воздействия на верстку страницы).
inherit Значение наследуется от родительского элемента.
initial Устанавливает значение по умолчанию.

Совместимость: Полностью поддерживаются всеми браузерами только значения block, inline, list-item и none. Значения inline-table, table, table-caption, table-cell, table-column, table-column-group, table-row и table-row-group не поддерживаются IE7 и более ранними версиями. В IE8 требуется декларация !DOCTYPE. IE9 поддерживает все значения. В Safari для значений flex и inline-flex требуется указывать префикс, например, «display: -webkit-flex» и «display: -webkit-inline-flex;«.

Пример

Отображаем параграф, как встроенный элемент

display

Общая информация

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

Синтаксис и значения

По умолчанию имеет значение inline. Не наследуется.

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

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

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

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

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

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

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

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

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

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

Здесь вы можете увидеть все те же теги абзацев P, заголовков H1-H6, контейнеров Div и других блочных элементов. Если посмотреть на список 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). Для большей наглядности я залил область отведенную для этих элементов фоном с помощью Background:

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

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

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

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

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

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

И в результате наше наглядное пособие отобразит произошедшую метаморфозу (что это?):

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

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

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

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

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

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

Т.о. мы создали элементы маркированного Html списка без использования тегов LI (получился аналог UL). При желании, для настройки вида используемого маркера вы сможете использовать уже рассмотренное нами ранее CSS правило list style. Можно сделать и обратное, т.е. прописать для тэгов LI свойство display:block и сделать из списка обычные абзацы.

Еще среди возможных значений Display вы можете видеть огромное количество вариантов для задания внешнего вида таблицам и ее составным частям. У каждого элемента таблицы в Html коде проставлено свое значение Дисплей:

Касаться того, что именно они делают, я не буду, ибо вряд ли вам когда-нибудь это понадобится, а тема эта весьма сложна. Кроме того, даже IE 7 не поддерживает все эти значения Дисплей для таблиц, не говоря уже и о более старых версиях этого чудо-браузера.

Display none и inline-block — динамика посредством CSS

Другое дело display: none. Если вы посмотрите на все те же умолчательные стили для Html элементов на странице «Default style sheet for HTML 4», то увидите, что «none» прописано по умолчанию для тега Head:

Что это означает? Это означает то, что если у элемента прописан display: none, то он никак не отображается на вебстранице и никаким образом не участвует в построении этого документа (под него даже не резервируется место).

Именно так и должен вести себя тэг Head, который предназначен исключительно для размещения внутри себя служебных данных (не отображаемых на вебстранице, например, там прописывается путь до иконки favicon.ico и до файла таблиц каскадных стилей с помощью служебных гиперссылок Link) и скриптов.

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

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

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

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

Вообще, «inline-block» — это тема для отдельного разговора, тем более, что он не поддерживается полностью даже IE7. Но при желании вы можете ознакомиться с возможностями этого CSS правила из материалов этой статьи.

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

CSS display table

CSS-свойство display: table и другие, делают вывод группы элементов подобно таблице

, но с ограничением – объединения ячеек colspan и rowspan не поддерживаются.

Полный список свойств и тегов, которые они заменяют:

display: table;
display: inline-table; но с display: inline-block
display: table-caption;
display: table-column-group;
display: table-column;
display: table-header-group;
display: table-row-group;
display: table-footer-group;
display: table-row;
display: table-cell; или

Таблица — сетка

Часто табличная верстка используется в качестве сеточной разметки, хотя это семантически неправильно и возникнут проблемы у мобильной или адаптивной версии. Для сеток специально ввели CSS Gr >display: table .

Рассмотрим пример – сетка 3×2 в три колонки сделанная таблицей:

Display в CSS

Кроме свойства 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 (block, inline, none) — способы отображения HTML элементов на вэбстранице

Здравствуйте, уважаемые читатели блога Goldbusinessnet.com! Настала очередь поговорить о таком важном правиле CSS как display. Основной упор сделаем на наиболее часто используемых параметрах этого свойства — block, inline и none. Естественно, все это будет рассмотрено на живых примерах, куда же без этого.

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

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

Кроме этого, попробуем создать списки на основе блочных вэбэлементов, используя list-item. Все эти изыскания имеют вполне конкретную и реальную сферу применения, поэтому такой практикум трудно переоценить. В общем, приступаем.

Как превратить блочный тег в строчный и наоборот с помощью display inline и block

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

Для каждого тега, соответствующего конкретному элементу, даны начальные значения по умолчанию. Подробная информация по этому вопросу предоставлена на специальной странице валидатора W3C (Default style sheet for HTML 4). Скажем, здесь целый список HTML тегов, которым соответствует значение block:

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

Если мы посмотрим на перечень всех значений для свойства дисплей в таблице валидатора W3C, то обнаружим следующее:

Здесь перечислены все возможные параметры для дисплей. В том случае, если не указано конкретное значение, по умолчанию будет действовать display inline, что соответствует тегу строки. Потому на странице спецификации «Defolt style sheet for HTML 4» теги, которые по умолчанию являются строчными, вообще отсутствуют в списке.

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

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

Возьмем для примера часто встречающиеся при создании вебсайтов теги, для удобства придав каждому цветовой оттенок фона с помощью CSS свойства background:

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

Заголовок H2 и тег P являются блочными (block), поэтому занимают по ширине всю доступную область. Один из важнейших структурных вебэлементов SPAN — строчный (inline), по этой причине его ширина ограничивается содержанием. Далее пропишем для P правило инлайн:

Теперь в нашем примере произойдут вот такие превращения:

Эти изменения вы можете проследить в отдельной вкладке. Как видим, текстовый элемент превратился в строчный и его ширина теперь определяется входящим контентом («Текст»). SPAN занял место в строке рядом с ним, поскольку пространство позволяет.

Абсолютно также можно провести обратную операцию и строчный вебэлемент сделать блочным. Применим теперь параметр блок к SPAN:

После такого редактирования картина будет таковой:

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

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

Дальше поэкспериментируем немного в области создания HTML списков, которые, как известно, составляются с помощью тегов UL, OL, LI. Мы же обойдемся без них, применим для выполнения этой задачи лишь правило display:list-item.

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

Результирующий вид окажется таким:

Таким образом маркированный список готов. При необходимости вид самих маркеров можно настроить как угодно, применив правило CSS list-style. Вполне возможно произвести и обратное действие. То есть при наличии созданного на основе тех же UL и LI списка обратить его в стандартные абзацы, указав block для каждого элемента LI.

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

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

Правила display none и inline-block — для чего они нужны

Наверное, вы уже в курсе, что структура HTML документа, причем любого, в обязательном порядке содержит тег HEAD, в содержание которого включена служебная информация, которая не видна на странице. Если мы вернемся к странице дефолтных параметров для HTML элементов, то увидим, что none является значением по умолчанию как раз для HEAD:

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

Для примера возьмем два заголовка H2, одному из которых присвоим правило дисплей со значением none. На полученный результат посмотрите сами:

Чтобы наглядно увидеть, как работает это CSS правило, попробуйте удалить:

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

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

Заключим H3 и UL в общий контейнер DIV. Полностью конструкция будет такой:

Далее надо указать стили для DIV через заданный class (тут о CSS классах читайте подробнее), чтобы получить желаемый результат. Пропишем none к свойству дисплей, этим мы скроем меню из зоны видимости. А вот для того, чтобы обеспечить появление списка при подводе курсора мыши к заголовку, нужно еще воспользоваться помощью псевдокласса :hover (об этом будет отдельная статья), которому определим параметр свойства дисплей block:

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

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

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

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

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

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

Чем отличаются 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; Таблица будет вести себя более предсказуемо.

Илон Маск рекомендует:  Что такое код ifx_error
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL