Что такое css display. Свойство CSS display (block, inline, none) — способы отображения HTML элементов на вэбстранице
display является наиболее важным стилевым свойством в CSS для управления шаблоном. Каждый элемент имеет значение отображения по умолчанию в зависимости от того, к какому типу относится данный элемент. Для большинства элементов, значения отображения по умолчанию, как правило, будут block или inline . В оригинале, блочный элемент часто еще называют элементом блочного уровня(block-level element).У строчного же элемента нет альтернативного названия.
block
div является стандартным блочным элементом. Блочные элементы начинаются с новой строки и их содержимое растягивается влево и вправо настолько, насколько это возможо. Другие распространенные блочные элементы это p и form , а также новые блочные элементы из HTML5, такие как header , footer , section , и прочие.
inline
span это стандартный строчный элемент. Строчный элемент может обернуть текст внутри абзаца вот так не нарушая его структуры. Наиболее распространенный строчный элемент это a так как вы используете его для ссылок.
none
Еще одно распространенное значение для отображения это none . Некоторые специализированные элементы, такие как script используют это значение по умолчанию. Оно широко используется с JavaScript, чтобы скрывать и показывать элементы вместо того, чтобы удалять и воссоздавать их снова.
Оно отличается от visibility . При задании свойству display значения none страница будет отображаться словно элемент не существует. visibility: hidden; просто скроет элемент, но элемент по прежнему будет продолжать занимать место, как если бы он был полностью виден.
другие display значения
Есть много более экзотичных стилевых значений для отображения, таких как list-item и table . Вот полный список . Позже мы обсудим inline-block и flex .
дополнение
Как я уже говорил, каждый элемент имеет тип отображения по умолчанию. Тем не менее, вы всегда можете переопределить это! Хотя это не имело бы смысла для того, чтобы сделать div строчным, вы можете использовать это, чтобы настроить отображение элементов с частной семантикой. Типичный пример – возможность выстраивания li элементов для горизонтального меню.
2 / 19Каскадные таблицы стилей (CSS) позволяют организовать внешний вид и оформление интернет-страницы. Одним из наиболее часто употребляемых свойств и его значений является "display: none".
Определение свойства
Само свойство является многоцелевым и определяет тип отображения элемента в документе. В зависимости от выбранного значения определенный участок страницы может отображаться блочно, линейно, как пункты списка, как часть таблицы и т. д. Таким образом, благодаря свойству "display", можно изменять тип самого блока в документе.
Что касается связки "свойство-значение display: none", то она позволяет удалить элемент или блок из документа. При этом место под данный кусок страницы не резервируется, то есть он выпадает из потока. Все элементы, которые находятся за «удаленным», попросту не видят его и игнорируют размеры и положение такого блока. Для возвращения скрытого объекта необходимо обратиться к документу через скрипты, которые просто изменят значение свойства на необходимый формат. При этом произойдет автоматическое форматирование страницы с учетом нового объекта на ней.
Разница между свойствами "display" и "visibility"
Несмотря на то что в итоге оба свойства скрывают элемент от пользователя, их принцип действия значительно отличается. Как уже было сказано выше, параметр "display: none" полностью удаляет элемент из документа. Блок выпадает из страницы, тем самым не занимая в ней место. При этом сам объект по прежнему остается в HTML-коде.
В свою очередь, свойство "visibility: hidden" прячет элемент от пользователя, но не удаляет его из модели документа. Таким образом, на странице остается зарезервированное место под данный блок. То есть поток документа будет воспринимать и учитывать расположение и размеры элемента со свойством "visibility: hidden" ровно так же, как и без него.
Такая разница организации структуры документа этими двумя свойствами позволяет добиться необходимого результата для правильного отображения страницы.
Использование CSS — display: none
Интернет-документ позволяет использовать несколько вариантов для определения свойства элемента. В первую очередь display: none может быть прописан в отдельном файле каскадных таблиц стилей. Такой способ является наиболее продвинутым и правильным, так как позволяет вынести все селекторы, классы и их свойства в отдельный документ. Подобная модель дает возможность очень быстро находить и изменять параметры страницы.
В заголовке документа
Вторым вариантом является определение стилей в заглавной части документа между тегами style. Эффективность такого способа гораздо меньше. Его рекомендуется применять только лишь в крайних случаях, так как при наличии большого числа стилей читаемость страницы веб-дизайнером значительно ухудшается. А это приводит к возникновению ошибок и замедлению процесса разработки интернет-документа. Такой подход рекомендуется использовать только в случае добавления в этот тег малого числа стилей или для отладки документа.
Следует помнить, что если такой способ организации стилей расположен в документе ниже, чем импорт отдельной таблицы стилей, то пересекающиеся свойства будут переписаны теми, что находятся в теле документа html.
Блок div. Display: none
Еще одним способом является добавление непосредственно в тег элемента кода "style=display: none;". Подобный подход зачастую применяют при работе с различными фреймворками, цель которых - снижение числа свойств непосредственно в таблице стилей и отображение их в самом интернет-документе. Кроме того, подобная запись часто возникает при просмотре страницы «инспектором кода». Важно помнить, что используя этот подход, можно изменить свойство и его значение, прописанные в таблице стилей. Поэтому стоит быть осторожным, так как в итоге можно создать себе дополнительные проблемы и потратить некоторое время на поиск и устранение ошибки в коде страницы.
JavaScript
Стоит также упомянуть и о дополнительной возможности изменения этого свойства. Оно относится уже не к таблице стилей и html-коду, а к скриптовому языку. Поэтому для его применения необходимо иметь хоть какие-то знания в этой области. Для того чтобы убрать элемент из потока документа, можно использовать свойство JavaScript "display=none". Оно позволяет изменить структуру документа при наступлении определенного события. Также благодаря использованию скриптов можно динамически («на лету») изменить параметр свойства и тем самым обновить вид страницы без необходимости ее перезагрузки. Такой подход является полезным при организации выпадающих меню, модальных окон и форм.
SEO
В области оптимизации веб-контента под поисковые машины существует много суеверий и неясных моментов. Так, многие начинающие СЕОшники считают использование свойства "display" плохой манерой. Объясняют они это тем, что поисковики, видя скрытый контент, начинают считать страницу спамом. В их словах есть доля логики, но не более того. На данный момент времени свойство скрытия объекта используется достаточно часто для форматирования выпадающих меню и скрытия частей документа, которые в данный момент не интересны пользователю (например, при выборе одной категории информация о других удаляется). Такой подход используют достаточно мощные интернет-порталы (один из них — "Амазон"). Таким образом, не могут считать использование свойства "display: none" спамом.
Другое дело, когда такой подход используется для скрытия отдельных слов и символов. Несмотря на то что сейчас поисковые роботы еще не имеют совершенных алгоритмов распознания подобного «спама» в документах, вероятность того, что страница будет поймана на этом, достаточно высока. Поэтому рекомендуется использовать свойство "display" строго по назначению — для изменения типа блока или его временного скрытия от глаз пользователя.
Свойства HTML display и visibility используются, чтобы вывести или скрыть HTML-элементы . Но тогда какая между ними разница? Чтобы понять это, посмотрите на приведенный ниже рисунок, здесь я использовал три элемента div :
Мы используем три элемента div , которые показаны в разделе 1 (с левой стороны ). Изначально все элементы div выводятся без применения свойств display или visibility .
Во второй части рисунка отображаются только div 1 и div 3 . Для div 2 задано visibility: hidden , но мы все равно видим пространство, которое занимает этот элемент.
Посмотреть онлайн демо-версию и код
В третьем разделе также отображаются только div 1 и div 3 , в то время как div 2 скрыт с помощью свойства HTML display none . Можно увидеть разницу: div 3 смещается вверх и для div 2 больше не отводится пространство.
Посмотреть онлайн демо-версию и код
Синтаксис свойства CSS visibility
Вот, как использовать свойство CSS visibility :
visibility: hidden;
Значение по умолчанию для свойства CSS visibility — visible . Также можно использовать:
visibility: collapse;
Данное значение используется в HTML-таблицах .
Синтаксис свойства CSS display
Это позволяет скрыть элемент, для которого задано значение данного свойства. Именно его я применил для раздела 3 в приведенном выше примере.
Свойство HTML display также используется, чтобы изменить поведение строчных или блочных элементов:
display: inline;
Этот код задает для блочного элемента поведение строчного. Например, div представляет собой блочный элемент. Применив к нему display: inline , мы задаем для него поведение строчного элемента:
Значение block делает противоположное. Например, элемент span является строчным. Если мы применим к нему display: block , он будет вести себя как блочный элемент.
Пример применения свойства display для отображения / скрытия меню
Я использовал элемент div , который содержит маркированный список
- , элементы списка и гиперссылки. Ссылки представляют собой пункты меню.
- Родительский div очерчен черной рамкой и занимает всю доступную ширину;
- span очерчен синей рамкой, внутри div он занимает только необходимое для отображения пространство и начинается с той же самой строки;
- Абзац, который очерчен красной рамкой, также занимает все доступное пространство и начинается с новой строки.
- Item 1
- Item 2
- Item 3
- имеют значение по умолчанию для элемента списка (list-item). Значение обычно используется для возврата элементов
- к их дефолтному поведению.
display: inline-block;
Элемент генерирует «коробку» блочного уровня, но весь блок ведет себя как встроенный (инлайновый) элемент. Т.е., он «обтекается» другими элементами веб-страницы.
Табличный уровень
Существует много значений display , которые позволяют элементам вести себя так же, как и HTML таблицы. В таблице ниже представлены значения «табличного уровня» и их краткое описание.
table Соотносится с HTML элементом. Определяет «коробку» блочного уровня.
table-header-group Соотносится с HTML элементом. table-row Соотносится с HTML элементом. table-cell Соотносится с HTML элементом. table-row-group Соотносится с table-footer-group Соотносится с 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;
Теоретически, если вы устанавливаете свойство display элемента в run-in , он отображается как блок внутри другого блока. Вариант использования этого свойства заключается в том, чтобы иметь собственный метод для создания заголовков, которые визуально располагаются в той же строке, что и последующий контент.
Для этой цели можно было бы использовать и float , но здесь подразумевается, что значение автоматически вписывается в строку и выравнивается по базовой линии.
Обратите внимание, что это значение поддерживается только в Internet Explorer 11 и Opera Mini.
Элемент ведет себя как инлайновый и выдает свое содержимое в соответствии с моделью форматирования элемента HTML. Если вкратце, то это позволяет отображать аннотации рядом с базовой линией текста (обычно для помощи в произношении). Такая техника довольно распространена в китайском и японском языках.
display: contents;
Суть этого значения заключается в том, что когда вы его используете для элемента, он исчезает из DOM, но все его потомки остаются и занимают свое пространство. Эта спецификация на данный момент поддерживается только в Firefox >59, Chrome >65, Safari 11.1.
Краткий итог
Рассмотренный сегодня список значений свойства display действительно внушительный. Ведь развитие технологий обусловливает появление и новых методик, и новых подходов к решению различных задач в веб-дизайне. Хотя, с другой стороны, многие методики становятся морально устаревшими и теряют свою былую славу. Надеемся, что данная статья поможет вам идти в ногу со временем и позволит более эффективно решать задачи верстки.
Похожие публикации
Для разработки этого меню использовался ряд других свойств CSS . Свойство display изначально задано не было. Это означает, что меню будет отображаться.
Посмотреть онлайн демо-версию и код
Родительский div содержит меню, которое представляет собой сочетание элементов ul , li и . При использовании display: none элемент div будет скрыт, как и все меню. Когда меню исчезает, ссылки перемещаются вверх, занимая пространство меню, потому что при использовании HTML display none элемент, к которому применено свойство, больше не будет занимать отведенное для него пространство.
Демо-версия меню с использованием свойства visibility
Я использую тот же пример, что и выше, но на этот раз применю свойство CSS visibility , чтобы показать и скрыть меню. Разница заключается в используемом коде jQuery :
visibility: hidden
Посмотреть онлайн демо-версию и код
В этом примере можно увидеть разницу. Когда нажимается ссылка скрыть меню, меню исчезает. При клике по ссылке показать меню, оно вновь становится видимым. Но ссылки при этом остаются на своих местах и не смещаются (в отличие от HTML display ).
Пример использования свойства CSS visibility для HTML-таблицы
В следующем примере мы создадим HTML-таблицу с помощью фреймворка Bootstrap . Таблица содержит пять строк, которые первоначально отображаются. На данном этапе таблица выглядит следующим образом:
Посмотреть онлайн демо-версию и код
Для строк таблицы использованы разные классы, чтобы задать их стили. Например, danger , active , warning и т.д. Строки таблицы пронумерованы от 1 до 5 (первый столбец слева ).
Теперь я использую свойство visibility для второй строки, чтобы скрыть ее. Это делается следующим образом:
visibility: collapse;
Таким образом значение collapse также используется для элементов таблицы. Оно применяется для удаления строки, при этом структура таблицы не изменяется. Посмотрите на приведенный ниже рисунок и на код демо-версии:
Посмотреть онлайн демо-версию и код
Вторая строка не видна, но структура таблицы остается неизменной. Если вы используете значение collapse для любых других элементов, оно будет работать, как значение hidden .
Применение свойства CSS display к таблице
Теперь тот же самый пример, за исключением того, что я буду использовать свойство HTML display , чтобы скрыть строку в таблице:
Посмотреть онлайн демо-версию и код
Вторая строка исчезла, а третья строка перемещается вверх, чтобы занять ее место.
Использование display для строчных элементов
Свойство CSS display также используется для изменения поведения строчных и блочных элементов.
Напомню, что блочные элементы занимают все доступное им пространство и начинаются с новой строки. Например, абзацы или блоки div — это блочные элементы.
Строчные элементы занимают только необходимое для отображения пространство и не начинаются с новой строки. В качестве примеров строчных элементов можно привести span , тег ссылки и т.д.
Свойство HTML display позволяет изменять поведение строчных и блочных элементов.
Чтобы изменить поведение блочного элемента на поведение строчного:
display: inline;
Чтобы изменить поведение строчного элемента на поведение блочного:
В следующем примере поведение элемента span изменяется на поведение блочного элемента. А поведение абзаца с помощью свойства CSS display изменяется на поведение строчного элемента.
Чтобы понять, в чем заключается разница, сначала посмотрите на приведенный ниже рисунок и исходный код, в котором свойство HTML display еще не применено:
Посмотреть онлайн демо-версию и код
На странице демо-версии отображен родительский div , а внутри него span и абзац. Изначально их поведение является стандартным для этих элементов:
Теперь с помощью HTML display block я изменю поведение span на поведение блочного элемента, а поведение абзаца на поведение строчного. Родительский div остается без изменений. Смотрите результат и демо-версию.
Последнее обновление: 27.04.2016
Кроме свойства float , которое позволяет изменять позицию элемента, в CSS есть еще одно важное свойство - display . Оно позволяет управлять блоком элемента и также влиять на его позиционирование относительно соседних элементов.
Это свойство может принимать следующие значения:
inline: элемент становится строчным, подобно словам в строке текста
block: элемент становится блочным, как параграф
inline-block: элемент располагается как строка текста
list-item: элемент позиционируется как элемент списка обычно с добавление маркера виде точки или порядкового номера
run-in: тип блока элемента зависит от окружающих элементов
flex: позволяет осуществлять гибкое позиционирование элментов
table , inline-table: позволяет расположить элементы в виде таблицы
none: элемент не виден и удален из разметки html
Итак, значение block позволяет определить блочный элемент. Такой элемент визуально отделяется от соседних элементов переносом строки, как, например, элемент параграфа p или элемент div, которые по умолчанию являются блочными и при визуализации веб-страницы визуально переносятся на новую строку.
Однако элемент span в отличие от элемента div блочным не является. Поэтому посмотрим, какие с ним произойдут изменения при применении значения block:
Здесь определено два элемента span, но один из них является блочным, так как к нему применяется стиль display: block; . Поэтому этот элемент span переносится на новую строку.
В отличие от блочных элементов строчные встраиваются в строку, так как имеют для свойства display значение inline . Элемент span как раз по умолчанию имеет стиль display: inline , поэтому и встраивается в строку, а не переносится на следующую, как параграфы или div. И теперь произведем обратную процедуру - сделаем блочный элемент div строчным:
Следует учитывать, что при применении значения inline браузер игнорирует некоторые свойства, такие как width , height , margin .
inline-block
Еще одно значение - inline-block - представляет элемент, который обладает смесью признаков блочного и строчного элементов. По отношению к соседним внешним элементам такой элемент расценивается как строчный. То есть он не отделяется от соседних элементов переводом строки. Однако по отношению к вложенным элементам он рассматривается как блочный. И к такому элементу применяются свойства width , height , margin .
Проехав с полверсты в хвосте колонны, он остановился
Проехав с полверсты в хвосте колонны, он остановился
Первый элемент span является строчным, у него значение inline , поэтому для него бессмысленно применять свойства width и height . А вот второй элемент span имеет значение inline-block , поэтому к нему жуе применяются и ширина, и высота, и при необходимости еще можно установить отступы.
run-in
Значение run-in определяет элемент, который зависит от соседних элементов. И здесь есть три возможных варианта:
Элемент окружен блочными элементами, тогда фактически он имеет стиль display: block , то есть сам становится блочным
Элемент окружен строчными элементами, тогда фактически он имеет стиль display: inline , то есть сам становится строчным
Во всех остальных случаях элемент считается блочным
Табличное представление
Значение table по сути превращает элемент в таблицу. Посмотрим на примере списка:
Здесь список превращается в таблицу, а каждый элемент списка - в отдельную ячейку. Для этого у элемента списка устанавливается стиль display: table-cell . Фактически вместо этого списка мы могли бы использовать стандартную таблицу.
Сокрытие элемента
Значение none позволяет скрыть элемент, которого как-будто нет на веб-странице:
Первый параграф
Второй параграф
Третий параграф
Свойство 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).
Удаляет элемент и его дочерние элементы из обычного потока документа. Документ отображается так, как будто этого элемента никогда не было, а занимаемое им место не резервируется. Считыватели экрана также игнорируют содержимое такого элемента.
display: inline;
Элемент генерирует один или несколько встроенных блоков (блоки в линию, в ряд). Элементы инлайнового уровня занимают столько места на линии, сколько определяют их теги. Можно считать дополнением к элементам блочного уровня.
display: list-item;
Элемент, отображаемый как элемент списка, ведет себя точно так же, как элемент блочного уровня, но дополнительно создает поле для маркера. Только элементы
