Содержание

CSS display



Пример

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

p.ex1 {display: none;}
p.ex2 {display: inline;}
p.ex3 {display: block;}
p.ex4 {display: inline-block;}

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


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

Свойство 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 Отображает элемент как встроенный элемент (например, <span>). Любые свойства Height и Width не будут иметь эффекта
block Отображает элемент как элемент блока (например, <p>). Он начинается на новой линии и занимает всю ширину
contents Делает контейнер исчезают, делая дочерние элементы дочерних элементов элемента следующий уровень вверх в DOM
flex Отображает элемент как контейнер Flex на уровне блоков
grid Отображает элемент как контейнер сетки на уровне блоков
inline-block Отображает элемент как контейнер блочного уровня. Сам элемент форматируется как встроенный элемент, но можно применять значения высоты и ширины
inline-flex Отображает элемент как встроенный гибкий контейнер
inline-grid Отображает элемент как контейнер сетки на уровне строки
inline-table Элемент отображается в виде таблицы встроенного уровня
list-item Пусть элемент ведет себя как элемент <li>
run-in Отображает элемент как блок или встроенный, в зависимости от контекста
table Пусть элемент ведет себя как элемент <TABLE>
table-caption Пусть элемент ведет себя как элемент <Caption>
table-column-group Пусть элемент ведет себя как элемент <colgroup>
table-header-group Пусть элемент ведет себя как элемент <thead>
table-footer-group Пусть элемент ведет себя как элемент <tfoot>
table-row-group Пусть элемент ведет себя как элемент <tbody>
table-cell Пусть элемент ведет себя как элемент <TD>
table-column Пусть элемент ведет себя как элемент <Col>
table-row Пусть элемент ведет себя как элемент <TR>
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;
}

Пример

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

body {
    display: inline;
}

p {
    display: inherit;
}

Пример

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

div {
    display: -webkit-flex; /* Safari */
    -webkit-flex-direction: row-reverse; /* Safari 6.1+ */
    display: flex;
    flex-direction: row-reverse;
}


Похожие страницы

CSS Справочник: CSS Отображение и видимость

HTML DOM Справочник: display Свойство


display | CSS справочник

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

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

Описание

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

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


<style>
  section, header, nav, article, aside, footer { display: block; }
</style>

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

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

Значение по умолчанию: inline
Применяется: ко всем элементам
Анимируется: нет
Наследуется: нет
Версия: CSS1
Синтаксис JavaScript: object.style.display=»inline»

Синтаксис

display: значение;

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

Значение
Описание
none Элемент исключается из общего потока, он не отображается на экране и под него не резервируется место на странице ( все элементы ведут себя как обычно, как будто этот элемент отсутствует в исходном коде).
block Элемент воспринимается браузером, как блочный (например, как <div>), т.е. имеет разрыв строки до и после элемента и занимает всю доступную ширину. Появляется возможность применения свойств для блочных элементов.
inline Элемент будет отображаться, как строчный (например, как <span>), содержимое блочных элементов, к которым было применено данное значение, будет начинаться с того места, где окончился предыдущий строчный элемент.
inline-block Элемент отображается, как строчный, но появляется возможность применять к нему свойства, доступные только блочным элементам (например: margin, padding).
list-item Элемент становится блочным и отображается, как элемент списка (тег <li>) с маркером перед началом содержимого.
table Определяет блочный элемент, который ведёт себя как <table>.
table-caption Элемент ведёт себя как <caption>.
table-cell Элемент ведёт себя как <td>.
table-column Элемент ведёт себя как <col>.
table-column-group Элемент ведёт себя как <colgroup>.
table-footer-group Элемент ведёт себя как <tfoot>.
table-header-group Элемент ведёт себя как <thead>.
table-row Элемент ведёт себя как <tr>.
table-row-group Элемент ведёт себя как <tbody>.
flex Преобразует элемент в блочный flex-контейнер. Все дочерние элементы данного контейнера автоматически становятся flex-элементами. Примечание: появляется возможность пользоваться следующими свойствами:
inline-flex Преобразует элемент в строчный flex-контейнер. Все дочерние элементы данного контейнера автоматически становятся flex-элементами.
inline-table Элемент будет вести себя как <table>, но не как блочный, а как строчно-блочный. То есть значение inline-table эквивалентно следующему CSS правилу:
table { display: inline-block;}
inherit Указывает, что значение наследуется от родительского элемента.

Пример

A span element. mySpan. Another span element.

span#mySpan {
background-color: red;
display: inline;
}

contents и его новые друзья спешат на помощь — CSS-LIVE

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

Годами для многих, казалось бы, элементарных задач приходилось выбирать решение по принципу меньшего из зол. Сейчас стало полегче благодаря флексбоксам, вот-вот станет еще легче благодаря гридам. Но все системы раскладки, даже самые передовые, упираются в фундаментальное ограничение: CSS привязывается к DOM-элементам. А значит, нельзя собрать вместе и красиво вывести в одном контейнере дочерние элементы разных DOM-предков — как бы удобно, красиво, логично и адаптивно это ни было.

Так вот: теперь можно освободить элементы из-под этого «DOMашнего ареста» и работать с элементами разных уровней вложенности как с непосредственными соседями. Правда, пока в Firefox (добавлено 25.05.2017: уже не только, в Chrome 58+ примеры тоже работают, но нужно включить флаг «Экспериментальные функции веб-платформы» в chrome://flags, добавлено 06.12.2017: а теперь еще и в Safari TP 45, добавлено 07.03.2018: и наконец в стабильном Chrome 65+ без флага!). Так что желательно открыть один из этих браузеров, чтобы увидеть примеры в действии.

Display:contents. Что это и откуда

Мы привыкли к простым значениям display: inline, block, inline-block. Теперь вот flex. Изредка еще table(-cell). Постоянные читатели нашего сайта вспомнят периодическую таблицу display, где их побольше — но даже там не было никакого contents. Откуда он вообще взялся?

Это значение описано в новой спецификации CSS Display module level 3. На момент выхода статьи по ссылке выше он был первым очень сырым черновиком, теперь же это солидная спецификация с минимумом красных пометок. Так что самое время взяться за нее — там вообще много нового и необычного. А про наше значение contents там сказано так:

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

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

Display:contents. Примеры использования

Меню с логотипом в одном флекс-контейнере

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

See the Pen PZaxoK by Ilya Streltsyn (@SelenIT) on CodePen.

Здесь причуда дизайнера заставила нас вставить логотип между пунктами меню, и вся эта конструкция должна равномерно растягиваться с равными промежутками. Без display:contents нам пришлось бы либо запихивать логотип внутрь меню (прощай, семантика…), либо делить само меню на две части и «колдовать» с отступами. А с ним мы делаем пункты меню и логотип равноправными флекс-элементами, а дальше магия флексбоксов — включая изменение визуального порядка элементов — делает всё за нас сама!

Дерево-таблица

Часто бывает нужно представить в табличном виде иерархические данные, например, значения какого-то интегрального показателя и его разбивку по составляющим. Пример из нашей сферы — результаты разных браузеров в популярном тесте html5test.com: суммарные баллы по разделам спецификации и их «разбивка» по подразделам.

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

Иерархические структуры в HTML можно передавать с помощью вложенных списков. Что, если так и сделать, а табличное отображение придать с помощью CSS? Увы, табличная модель CSS унаследовала от HTML-таблиц не только структуру, но и ограничения: в боксе с display:table могут «жить» только table-*-group, а в тех — table-row. Было бы здорово, если бы table-row-group можно было вкладывать, но увы — алгоритм не разрешает. Вместо пропущенных элементов табличной иерархии достраиваются недостающие анонимные боксы, и получается обычная скучная вложенная таблица, лишенная главного табличного плюса — сквозной вертикальной связи по столбцам.

Но с display:contents эта задача решается в два счета (для примера приведено только начало таблицы):

See the Pen Demo of hierarchical data table using display:contents by Ilya Streltsyn (@SelenIT) on CodePen.

Мы просто сделали вид, что промежуточных уровней иерархии… нет вообще! И все строки таблицы (элементы p) подчинены главной таблице (обертке с class="table") напрямую. И все вертикальные связи сохранились!

Но вложенность никуда не исчезла — мы ведь не трогали DOM, мы лишь изменили display некоторых элементов. Поэтому мы по-прежнему можем, например, визуально разграничить элементы разных уровней отступами, основываясь на этой вложенности (в примере как раз это показано). Более того, теперь скрывать/раскрывать подуровни стало элементарно — как с обычным древовидным списком. Только обычно мы меняли display с none на block и обратно, а здесь — c none на contents и обратно. Не нужно больше циклами выискивать строки для скрытия по классам и т.п.! Удобно же, правда?

Решение проблемы подсеток в грид-раскладке

Отвязка визуальной структуры от DOM-структуры позволяет решить и ту проблему, на которую недавно сетовал Эрик Мейер в статье о грид-раскладке (мы как раз ее переводили): невозможность привязать элементы к гриду, создаваемому родителем их родителей. С display:contents это элементарно: как и в предыдущих примерах, с точки зрения визуальной структуры мы делаем так, что «дети» элемента не отображаются вообще, а его «внуки» отображаются так, как будто они «дети» — благодаря чему они автоматом подхватывают «магию» грид-раскладки, созданную внешним контейнером. В Firefox (либо Chrome c включенным флагом «Экспериментальные функции веб-платформы») можно увидеть это в действии.

Обратите внимание, что кода получается даже меньше, чем в решении Эрика с подсетками. Хак ли это? На мой взгляд — не больший, чем любая другая смена display на «неродное» значение. У многих задач бывает несколько правильных решений, и это — вполне стандартное применение стандартных средств языка. И уж точно не стоит откладывать выпуск практически готовой реализации грид-раскладки ради непременной реализации подсеток, когда есть такой изящный и наглядный обходной путь. В споре Эрика и Таба Аткинса лично я поддерживаю Таба. А вы что думаете?

Поддержка (и можно ли ее улучшить)

Надеюсь, сомнений в полезности новинки у вас не осталось, но поддержка браузерами пока всё портит. Единственное место, где для display:contents просматривается какая-никакая замена — это инлайновый контекст форматирования, в котором контейнеру можно поставить display:inline, что поместит его содержимое (напр. инлайн-блоки) в одну строку с содержимым его родителя. Это может подойти для редких и простых частных случаев вроде такого, но для самых «вкусных» применений — вроде примеров из статьи — к сожалению, такой замены не видно.

Остается лишь «теребить» разработчиков браузеров, чтобы они поскорее внедрили поддержку такого полезного значения (к тому же вряд ли сверхсложного в реализации). Проще всего, наверное, будет добиться этого от MS Edge. Пожалуйста, проголосуйте за поддержку этого свойства там!

Бонус: другие полезные новинки CSS Display level 3

Нужно сразу оговориться, что полезны они лишь в теории: в отличие от display:contents, они пока не поддерживаются нигде. Но такие многообещающие!

Первым я бы упомянул свойство box-supress. Помните, сколько мучений доставляла нам отмена display:none, особенно на этапе ученичества? Стоило лишь впопыхах поставить вместо него display:block строке таблицы или текстовому элементу, как вся верстка сыпалась как карточный домик. Это новое свойство обещает избавить от этих мучений навсегда. Оно позволит убирать элемент из верстки и возвращать обратно, не «забывая» о том, как он отображался прежде. На данный момент спецификация предлагает для него 3 значения: show — отображать как обычно, discard — скрыть напрочь (как при display:none), и hide — нечто совсем интересное: «отобразить, но не показывать» (построить визуальную структуру как обычно, со всеми размерами и т.п. — но не выводить ее на экран!). Наверное, это последнее значение пригодится для динамического скрытия/показа элемента с анимацией.

Добавлено 22.02.2017. Cвойство box-supress решили отложить на следующий этап, на CSS Display Level 4. В нынешней спецификации его больше нет.

Не менее «революционное» изменение затронет и обычные значения свойства display, особенно те, которые сами «живут» в одном контексте форматирования, а внутри себя создают другой. Теперь и то и другое можно будет указывать явно и по отдельности — значение display:none разобьют на 2 отдельных ключевых слова, каждое из которых отвечает за «внешнюю» и «внутреннюю» стороны отображения элемента соответственно. А наши старые привычные «значения с дефисами» станут лишь псевдонимами для некоторых таких комбинаций. И появится еще одно полезное значение display:block flow-root: оно наконец позволит решить проблему замены «clearfix-у» полностью, без издержек любого из существующих решений (добавлено 9.05.2017: уже появилось!). Другой вопрос — будет ли это по-прежнему актуально, в эпоху повсеместной грид-раскладки:)

Так что закончим статью стандартным уже призывом читать спецификации:) И, конечно, делиться своими соображениями и находками в комментариях!

P.S. Это тоже может быть интересно:

HTML и CSS с примерами кода

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

Позиционирование

Синтаксис

/* <display-outside> values */
display: block;
display: inline;
display: run-in;

/* <display-inside> values */
display: flow;
display: flow-root;
display: table;
display: flex;
display: grid;
display: ruby;
display: subgrid;

/* <display-outside> plus <display-inside> values */
display: block flow;
display: inline table;
display: flex run-in;

/* <display-listitem> values */
display: list-item;
display: list-item block;
display: list-item inline;
display: list-item flow;
display: list-item flow-root;
display: list-item block flow;
display: list-item block flow-root;
display: flow list-item block;

/* <display-internal> values */
display: table-row-group;
display: table-header-group;
display: table-footer-group;
display: table-row;
display: table-cell;
display: table-column-group;
display: table-column;
display: table-caption;
display: ruby-base;
display: ruby-text;
display: ruby-base-container;
display: ruby-text-container;

/* <display-box> values */
display: contents;
display: none;

/* <display-legacy> values */
display: inline-block;
display: inline-table;
display: inline-flex;
display: inline-grid;

/* Global values */
display: inherit;
display: initial;
display: unset;

Значения

Значение по-умолчанию: inline

Наследуется: нет

Применяется ко всем элементам

Анимируется: нет

block
Элемент показывается как блочный. Применение этого значения для строчных элементов, например <span>, заставляет его вести подобно блокам — происходит перенос строк в начале и в конце содержимого.
inline
Элемент отображается как строчный. Использование блочных элементов, таких, как <div> и <p>, автоматически создаёт перенос и показывает их содержимое с новой строки. Значение inline отменяет эту особенность, поэтому содержимое блочных элементов начинается с того места, где окончился предыдущий элемент.
inline-block
Это значение генерирует блочный элемент, который обтекается другими элементами веб-страницы подобно строчному элементу. Фактически такой элемент по своему действию похож на встраиваемые элементы (вроде <img>). При этом его внутренняя часть форматируется как блочный элемент, а сам элемент — как строчный.
inline-table
Определяет, что элемент является таблицей, как при использовании <table>, но при этом таблица является строчным элементом и происходит её обтекание другими элементами, например, текстом.
inline-flex
Элемент ведёт себя как строчный и выкладывает содержимое согласно флекс-модели.
flex
Элемент ведёт себя как блочный и выкладывает содержимое согласно флекс-модели.
grid
Элемент ведет себя как блочный и выкладывает содержимое согласно грид-модели
list-item
Элемент выводится как блочный и добавляется маркер списка.
none
Временно удаляет элемент из документа. Занимаемое им место не резервируется, и веб-страница формируется так, словно элемента и не было. Изменить значение и сделать вновь видимым элемент можно с помощью скриптов, обращаясь к свойствам через объектную модель. В этом случае происходит переформатирование данных на странице с учётом вновь добавленного элемента.
table
Определяет, что элемент является блочной таблицей, подобно использованию <table>.
table-caption
Задаёт заголовок таблицы, подобно применению <caption>.
table-cell
Указывает, что элемент представляет собой ячейку таблицы (<td> или <th>).
table-column
Назначает элемент колонкой таблицы, словно был добавлен <col>.
table-column-group
Определяет, что элемент является группой одной или более колонок таблицы, как при использовании <colgroup>.
table-footer-group
Используется для хранения одной или нескольких строк ячеек, которые отображаются в самом низу таблицы. По своему действию сходно с работой <tfoot>.
table-header-group
Элемент предназначен для хранения одной или нескольких строк ячеек, которые представлены вверху таблицы. По своему действию сходно с работой <thead>.
table-row
Элемент отображается как строка таблицы (<tr>).
table-row-group
Создаёт структурный блок, состоящий из нескольких строк таблицы, аналогично действию <tbody>.

Примечания

Chrome 32 — Значение run-in больше не поддерживается.

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

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

display: flow-root:

Can I Use flow-root? Data on support for the flow-root feature across the major browsers from caniuse.com.

display: table-*:

Can I Use css-table? Data on support for the css-table feature across the major browsers from caniuse.com.

display: contents:

Can I Use css-display-contents? Data on support for the css-display-contents feature across the major browsers from caniuse.com.

Описание и примеры

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>display</title>
    <style>
      .example {
        border: dashed 1px #634f36; /* Параметры рамки */
        background: #fffff5; /* Цвет фона */
        font-family: 'Courier New', Courier, monospace; /* Шрифт текста */
        padding: 7px; /* Поля вокруг текста */
        margin: 0 0 1em; /* Отступы */
      }
      .exampleTitle {
        border: 1px solid black; /* Параметры рамки */
        border-bottom: none; /* Убираем линию снизу */
        padding: 3px; /* Поля вокруг текста */
        display: inline; /* Устанавливаем как строчный элемент */
        background: #efecdf; /* Цвет фона */
        font-weight: bold; /* Жирное начертание */
        font-size: 90%; /* Размер текста */
        margin: 0; /* Убираем отступы */
        white-space: nowrap; /* Отменяем переносы текста */
      }
    </style>
  </head>
  <body>
    <p>Пример</p>
    <p>
      <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
      <br />
      <html>
        <br />
        <body>
          <br />
          <b>Формула серной кислоты:</b>
          <i
            >H<sub><small>2</small></sub> SO<sub
              ><small>4</small>
            </sub></i
          ><br />
        </body>
        <br />
      </html>
    </p>
  </body>
</html>

Свойство display

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

Любой html-элемент генерирует на веб-странице прямоугольный контейнер. Все видимое на экране состоит из контейнеров разных типов.

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

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

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

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

Таблица 1. Значения свойства display
display
Значения:
inline Значение по умолчанию. Элемент генерирует строковый блок. Аналог — тег <span>.
block Элемент генерирует структурный блок, как и тег <div>.
flex Элемент генерирует структурный блок, который создает адаптивный контейнер для дочерних элементов.
inline-block Элемент генерирует строковый блок.
inline-flex Элемент генерирует строковый блок, который создает адаптивный контейнер для дочерних элементов.
inline-table Элемент определяет структурный блок, который генерирует строковый блок.
list-item Элемент генерирует структурный блок, который отображается как элемент списка <li>.
table Элемент генерирует структурный блок. На странице ведет себя аналогично <table>.
table-caption Элемент генерирует основной заголовок таблицы. На странице ведет себя аналогично <caption>.
table-column Элемент описывает столбец ячеек, визуальное представление не генерируется. Аналог — <col>.
table-column-group Элемент объединяет один или несколько столбцов. Аналог — <colgroup>.
table-cell Элемент генерирует отдельную ячейку таблицы, на странице ведет себя аналогично <th> и <td>.
table-header-group Элемент определяет группу строк заголовка, которая всегда отображается перед остальными строками и группами строк. Аналог — <thead>.
table-footer-group Элемент определяет группу строк заголовка, которая всегда отображается после всех остальных строк и перед любым нижним основным заголовком. Ведет себя аналогично <tfoot>.
table-row-group Элемент объединяет одну или несколько строк. Аналог — <tbody.
table-row Элемент является строкой ячеек. Пример — <tr>.
none Элемент не генерирует никакой контейнер, полностью удаляясь со страницы.
inherit Наследует свойство от родительского элемента.

CSS свойство display

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

CSS синтаксис

display: значение;

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

ЗначениеОписание
inlineЭлемент отображается как встроенный (подобно <span>).
blockЭлемент отображается как блоковый (подобно <div>).
flexЭлемент отображается как flex-контейнер блочного уровня (гибкий контейнер). Может использоваться в создании гибкой верстки страницы по модели FlexBox. Добавлено в CSS3.
inline-blockГенерирует блочный элемент, который обтекается другими элементами веб-страницы подобно встроенному элементу. При этом его внутренняя часть форматируется как блочный элемент, а сам элемент — как встроенный.
inline-flexЭлемент отображается как flex-контейнер встроенного уровня (гибкий элемент). Может использоваться в создании гибкой верстки страницы по модели FlexBox. Добавлено в CSS3.
inline-tableОпределяет, что элемент является таблицей как при использовании тега <table>, но при этом таблица является встроенным элементом и обтекается другими элементами.
list-itemЭлемент ведет себя подобно элементу <li>.
run-inГенерирует либо встроенный, либо блочный элемент в зависимости от контекста.
tableЭлемент ведет себя подобно элементу <table>.
table-captionЭлемент ведет себя подобно элементу <caption>.
table-column-groupЭлемент ведет себя подобно элементу <colgroup>.
table-header-groupЭлемент ведет себя подобно элементу <thead>.
table-footer-groupЭлемент ведет себя подобно элементу <tfooter>.
table-row-groupЭлемент ведет себя подобно элементу <tbody>.
table-cellЭлемент ведет себя подобно элементу <td>.
table-columnЭлемент ведет себя подобно элементу <col>.
table-rowЭлемент ведет себя подобно элементу <tr>.
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;«.

Пример использования

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


p.inline {
     display: inline;
}

CSS — об этом сайте

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

<div>

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

</div>

inline

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

none

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

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

You found me!

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

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

дополнение

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

CSS2 — объявление дисплея

CSS2 — объявление дисплея

Декларация дисплея

Свойство display позволяет определить способ отображения определенного элемента HTML.

Да Да Да Да Да
 
Да Да Да Да Да
 
Да Да Да Да Да
 
Инком в комплекте Да Да Да Да Да
  • IE 6/7 принимает значение только для элементов с естественным отображением : встроенный .
Да Да Да Да Да
Да Да Да Да
Да Да Да Да Да

дисплей: блок

display: block означает, что элемент отображается как блок, как всегда были абзацы и заголовки.Блок имеет некоторые пробелы выше и ниже него и не допускают никаких элементов HTML рядом с ним, за исключением случаев, когда они упорядочены иначе (путем например, добавление объявления float к другому элементу).

Живой пример: первый {дисплей: блок}

секунды {отображение: блок}

третий {отображение: блок}

дисплей: встроенный

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

Живой пример: дисплей: блок

дисплей: встроенный

дисплей: блок

дисплей: блок

дисплей: блок

дисплей: встроенный

дисплей: нет

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

Живой пример: дисплей: блок

дисплей: нет

дисплей: блок

дисплей: встроенный блок

Встроенный блок размещается в строке (т. е. на той же строке, что и смежное содержимое), но ведет себя как блокировать.

Живой пример: дисплей: блок
Давайте добавим некоторый контент, чтобы увидеть, как ведет себя блок.

отображение: встроенный блок; width: 10em
Давайте добавим содержимое, чтобы посмотреть, как ведет себя блок.

Давайте добавим некоторый контент, чтобы увидеть, как ведет себя блок. Давайте добавим некоторый контент, чтобы увидеть, как ведет себя блок. span (а не div ) с отображением: встроенный блок; width: 10em
Давайте добавим содержимое, чтобы посмотреть, как ведет себя блок. Давайте добавим некоторый контент, чтобы увидеть, как ведет себя блок.

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

Отличие от дисплея
: встроенный

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

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

дисплей: встроенный; width: 10em
Давайте добавим содержимое, чтобы посмотреть, как ведет себя блок.

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

дисплей: элемент списка

отображение: элемент списка означает, что элемент отображается как элемент списка, что в основном означает, что он имеет маркер перед ним (как UL), за исключением IE 5 на Mac, где он получает число (например, OL). Число глючат: все предыдущие LI на странице считаются за один, поэтому этот пример начинается с номера 5 (скриншот сделан до того, как я вставил свою совместимость-LI).

Живой пример: дисплей: блок

дисплей: элемент списка

дисплей: элемент списка

дисплей: обкатка

дисплей: обкатка определение от W3C:
«Если блок-бокс (который не плавает и не имеет абсолютного позиционирования) следует за обкаткой блок, вводной блок становится первым встроенным блоком блок-бокса.
В противном случае бокс запуска становится блочным боксом.»

Вопрос: Почему вы хотите это сделать?

Живой пример: дисплей: блок

дисплей: обкатка

дисплей: блок

дисплей: обкатка

дисплей: встроенный

дисплей: таблица

display: table указывает элементу отображать в виде таблицы. Вложенные элементы должны отображаться как table-row и table-cell , имитируя старые добрые TR и TD.

Живые примеры:
В этом примере есть элементы div с display: table, table-row и table-cell, все правильно вложенные. дисплей: таблица отображение: таблица-строка

дисплей: таблица-ячейка и еще немного контента

дисплей: таблица-ячейка

отображение: таблица-строка

дисплей: таблица-ячейка

дисплей: таблица-ячейка

Самый внешний div в этом примере имеет display: block, а не table. дисплей: блок отображение: таблица-строка

дисплей: таблица-ячейка и еще немного контента

дисплей: таблица-ячейка

отображение: таблица-строка

дисплей: таблица-ячейка

дисплей: таблица-ячейка

В этом примере нет разделов с отображением: table-row дисплей: таблица

дисплей: таблица-ячейка и еще немного контента

дисплей: таблица-ячейка

Детская площадка

Поэкспериментируйте с некоторыми экранными объявлениями ниже.

CSS | Дисплей — GeeksForGeeks

<

<

>

< Название > CSS | Отображение недвижимости Название >

< Стиль >

# Geeks1 { # Geeks1 {

Высота: 100px;

                 ширина: 200 пикселей;

                 фон: бирюзовый;

                 дисплей: блок;

}

}

# Gueks2 {

Высота: 100px;

                 ширина: 200 пикселей;

                 фон: голубой;

                 дисплей: блок;

}

}

# Geeks3 {

Высота: 100px;

                 ширина: 200 пикселей;

                 фон: зеленый;

                 дисплей: блок;

             }

                   .gfg {

                 margin-left:20px;

                 font-size:42px;

                 font-weight:bold;

                 цвет:#009900;

}

}

.Geeks {

Размер шрифта: 25px;

                 margin-left:30px;

             }

                   .main {

                 margin:50px;

                 text-align:center;

}

}

< Body >

< класс = "GFG" > geeksforgeks div

>

< div класс = "гики" >отображение: блок; недвижимость div >

< класс = "Главная" >

< div ID = "Geeks1" > Блок 1 div >

< DIV = ID = "Geeks2" > Блок 2 DIV >

< div ID = "Geeks3" > Блок 3 div

>

div >

Body >

HTML >

Работа со свойством отображения CSS

Свойство display управляет типом поля, созданного элементом.

Свойство отображения CSS

Спецификация CSS определяет отображаемое значение по умолчанию для всех элементов, например. элемент

— это , отображаемый как блок , а элемент — это , отображаемый встроенным .

Изменение отображаемого значения по умолчанию

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

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

В следующем разделе описаны наиболее часто используемые отображаемые значения CSS.

Блок дисплея

Значение block свойства display заставляет элемент вести себя как элемент уровня блока, как элемент

или

. Правила стиля в следующем примере отображают элементы и как элементы уровня блока:

  диапазон {
    дисплей: блок;
}
а {
    дисплей: блок;
}  

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


Встроенный дисплей

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

и

  • как элементы встроенного уровня:

      р {
        дисплей: встроенный;
    }
    уль ли {
        дисплей: встроенный;
    }  

    Встроенный блок дисплея

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

    и как встроенный блок:

      раздел {
        отображение: встроенный блок;
    }
    охватывать {
        отображение: встроенный блок;
    }  

    Дисплей Нет

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

      h2 {
        дисплей: нет;
    }
    п {
        дисплей: нет;
    }  

    Примечание: Значение none для свойства display не создает невидимую рамку — она вообще не создает рамку.См. живую демонстрацию, приведенную в разделе видимости и отображения.

    Дисплей | HTML Собака

    Встроенный

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

    Встроенные коробки.

    Следующий код, например, приведет к тому, что все элементы списка в списке будут отображаться рядом друг с другом в одной непрерывной строке, а не в отдельной строке:

     
    li {  дисплей: встроенный  }
      

    Новый раздел примеров! Посмотрите весь этот код в действии и поэкспериментируйте с ним.

    Блок

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

    Блочные ящики.

    В следующем примере все ссылки в «nav» будут сделаны большими интерактивными блоками:

     
    #навигация {
          дисплей: блок; 
        отступ: 20 пикселей 10 пикселей;
    }
      

    display: inline-block оставит блок встроенным, но обеспечит большую гибкость форматирования блочных блоков, позволяя, например, поля справа и слева от блока.

    Нет

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

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

     
    #navigation, #related_links {  display: none  }
      

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

    Таблицы

    ОК. Итак, это были основы. А теперь кое-что более продвинутое и редко используемое…

    Возможно, лучший способ понять связанные с таблицами значения свойств display — это подумать о HTML-таблицах. таблица является начальным отображением, и вы можете имитировать элементы tr и td со значениями свойств table-row и table-cell соответственно.

    Свойство display идет дальше, предлагая table-column , table-row-group , table-column-group , table-header-group , table-footer-group и

    6 -caption

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

    Наконец, значение inline-table в основном задает таблицу без разрывов строк до и после нее.

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

    Другие типы дисплеев

    list-item отображает поле так, как вы обычно ожидаете отобразить HTML-элемент li . Для правильной работы элементы, отображаемые таким образом, должны быть вложены в элемент ul или ol .

    run-in делает блок либо встроенным, либо блочным в зависимости от отображения его родителя.

    CSS: свойство отображения


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

    Описание

    Свойство отображения CSS определяет тип поля отображения, используемого для элемента.

    Синтаксис

    Синтаксис свойства CSS отображения:

      дисплей: значение;  

    Параметры или аргументы

    значение

    Тип окна рендеринга.Это может быть одно из следующих:

    8 встроенный
  • 9
  • 8 Inline-Block
  • 8 NOTE
  • Таблица
  • 9
  • Есть и другие дисплей content , flex , grid и т. д., которые подробно описаны в соответствующих статьях.

    Как следует из названия, встроенных элементов — это элементы, которые продолжаются в потоке текста.

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

    Синтаксис Display Inline :
    display: inline ;

    Некоторые из элементов, которые находятся встроенные элементы -

    • - это ведет себя как Inline-Block , который обсуждается ниже
    • < b>
    • — это тег ввода для полей формы ввода

    пример.В реальном проекте вы можете пропустить это для встроенных элементов.

    Лучше всего использовать свойство display: inline   – , если вы хотите переопределить элемент, который не является встроенным элементом.

    Пример встроенного дисплея

     диапазон {
     поле: 5px;
     дисплей: встроенный;
    }
     

    Примечание/Информация/Успех Здесь мы намеренно установили значения ширины и высоты, просто чтобы показать, что это не будет иметь никакого значения для встроенных элементов.
    Удалите значения ширины и высоты, и вы не заметите разницы в выводе. × Закрыть оповещение

    Элементы блока — это элементы, которые нарушают нормальный поток текста и начинаются с новой строки.

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

    Синтаксис блока отображения ​:
    отображение: блок ;

    Некоторые из элементов, которые находятся блок элементов

        • <раздел>
          • ,

            ,

            ,
            ,
            ,

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

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

             дел {
             ширина: 50 пикселей;
             поле: 5px;
             высота: 50 пикселей;
             дисплей:блок;
             выравнивание текста: по центру;
             фон: ярко-розовый;
             граница: 2px сплошной черный;
            }
             

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

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

            Синтаксис Display inline-block ​:
            display: inline-block ;

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

            Пример отображения встроенного блока

             изображение {
              ширина: 200 пикселей;
              поле: 5px;
              высота: 200 пикселей;
              дисплей: встроенный блок;
            }
             

            Давайте сравним результат display: inline  с display:inline-block .

            Пример отображения встроенного блока VS встроенного блока ​

             .val1 {
             ширина: 50 пикселей;
             поле: 5px;
             высота: 50 пикселей;
             отступ: 10 пикселей;
             дисплей: встроенный;
             выравнивание текста: по центру;
             фон:#398CFE;
             граница: 2px сплошной черный;
            }
            .значение2 {
             ширина: 50 пикселей;
             поле: 5px;
             высота: 50 пикселей;
             отступ: 10 пикселей;
             дисплей: встроенный блок;
             выравнивание текста: по центру;
             фон:#398CFE;
             граница: 2px сплошной черный;
            }
             

            Аналогичным образом мы сравним результат display:inline с display:block .

            Пример отображения встроенного блока VS

             .navbar {
             текстовое оформление: нет;
             ширина: 400 пикселей;
             дисплей: встроенный;
             отступ: 10 пикселей;
             размер шрифта: 20 пикселей;
             белый цвет;
             фон: малиновый;
            }
            
            .панель навигации1 {
             текстовое оформление: нет;
             ширина: 400 пикселей;
             дисплей:блок;
             отступ: 10 пикселей;
             размер шрифта: 20 пикселей;
             белый цвет;
             фон: малиновый;
            }
             

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

            Синтаксис отображения Нет:
            отображение: нет ;

            отображение: нет VS видимость: скрыто

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

            visibility:hidden скрывает элемент, но не удаляет дополнительное пространство скрытого элемента.

            Итак, если вы хотите сохранить дополнительное пространство, используйте свойство visibility:hidden , иначе используйте свойство display:none .

            Пример дисплея и видимости

             .display-скрытый {
             видимость: скрытая;
            }
            
            .display-нет {
             размер шрифта: 20 пикселей;
             дисплей: нет;
            }
             

            Свойства —

            • display: table — позволяет элементу вести себя как таблица (аналогично элементу
    Значение Описание
    нет Отключить отображение элемента
    div { display: none; }
    встроенный Элемент создаст встроенный блок элемента
    div { display: inline; }
    блок Элемент создаст блочное поле
    div { display: block; }
    встроенный блок Элемент создаст поле блочного элемента, которое ведет себя как встроенное поле
    div { display: inline-block; }
    элемент списка Элемент создаст блок блочного элемента для содержимого и отдельный встроенный блок элемента списка
    div { display: list-item; }
    стол Элемент будет вести себя как HTML-элемент
    div { display: table; }
    div { display: table-column; }
    div { display: table-column-group; }
    div { display: table-header-group; }
    div { display: table-row-group; }
    div { display: table-footer-group; }
    div { display: table-row; }
    заголовок таблицы Элемент будет вести себя как HTML-элемент

    div { display: table-caption; }
    таблица-столбец Элемент будет вести себя как HTML-элемент
    таблица-колонка-группа Элемент будет вести себя как HTML-элемент
    таблица-заголовок-группа Элемент будет вести себя как элемент HTML
    таблица-строка-группа Элемент будет вести себя как элемент HTML
    таблица-нижний колонтитул Элемент будет вести себя как элемент HTML
    таблица-строка Элемент будет вести себя как элемент HTML
    таблица-ячейка Элемент будет вести себя как элемент HTML
    div { display: table-cell; }
    унаследовать Элемент унаследует отображение от своего родительского элемента
    div { display: inherit; }

    Примечание

    Совместимость с браузером

    Свойство отображения CSS имеет базовую поддержку в следующих браузерах:

    • Хром
    • Андроид
    • Firefox (Геккон)
    • Firefox Mobile (Геккон)
    • Internet Explorer (IE)
    • Интернет-телефон
    • Опера
    • Опера Мобайл
    • Сафари (веб-кит)
    • Сафари Мобильный

    Пример

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

    Создать горизонтальный список

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

      li { display: inline; }  

    В этом примере отображения CSS мы установили тег

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

    CSS display — бесплатный учебник для изучения HTML и CSS

    Мы видели, что в основном существует 2 типа HTML-элементов: блочных элемента и встроенных элемента.Мы также упомянули несколько альтернатив, таких как list-item или table-cell .

    Свойство display позволяет изменить тип элемента HTML. По умолчанию абзац

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

      p{ display: inline;}  

    Почему бы тогда не использовать встроенный элемент HTML, например

    ?

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

    Короче говоря, отображение позволяет изменить тип элемента без изменения своего значения .

    Каждый параметр отображения имеет определенное поведение при рендеринге:

    • блок займет всю доступную ширину
    • встроенный будет действовать как обычный текст
    • встроенный блок , как следует из названия, представляет собой смесь блочного и встроенного поведения, «лучшее из обоих миров» вариант
    • элемент списка аналогичен блоку , так как он занимает всю доступную ширину, но показывает дополнительный маркер
    • table , table-row и table-cell имеют очень специфическое, хотя и неожиданное поведение, позволяющее создавать более интересные макеты

    дисплей: блок

    Это превратит любой элемент в элемент блока .

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

      .menu a{ фон: красный; цвет: белый;}  
        

    Если мы превратим эти ссылки в блоков , мы увеличим их целевую область:

      .меню a{ фон: красный; белый цвет; отображение: блок;}  

    дисплей: встроенный

    Это превращает любой элемент в встроенных элемента, как если бы они были просто текстом .

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

      <ул>
      
  • Главная
  • Возможности
  • Цены
  • О нас
  •   .меню li{дисплей: встроенный;}  

    дисплей: элемент списка

    Единственными элементами HTML, отображаемыми как list-item , являются (что неудивительно) элемента списка

  • , а также описания определений
    .

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

      ) или с возрастающим номером (если в упорядоченном списке
        ).

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

      1. обычно отображаются как display: block или display: inline , так как они более гибкие для стиля.

        дисплей: нет

        Применение дисплея : нет; в элемент HTML удаляет его с вашей веб-страницы, как если бы он никогда не существовал в вашем коде.

          .gone-baby-gone{ display: none;}  
          

        Я слышал, как кто-то говорит??

        Хахахахаха

        Должно быть, я сплю...

        Я слышал, что кто-то говорит??

        Ха-ха-ха-ха

        Должно быть, я сплю...

        В коде 3 абзаца, а появляются только 2, как будто 2-го и не было.

        видимость: скрыто

        Свойство CSS видимость немного похоже на отображение . Применение видимости : скрыто; скрывает элемент с вашей страницы, но только делает его невидимым : он по-прежнему занимает место, которое должен был занимать.

          .hollow-man{ видимость: скрыто;}  
          

        Так далеко от меня

        Пока я просто не вижу

        Так далеко от меня

        Ты так далеко от меня

        Ты так далеко...

        Так далеко от меня

        Пока просто не вижу

        Так далеко от меня

        Ты так далеко от меня

        Ты так далеко...

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

        Отображение CSS

        — TutorialBrain

        Главная » CSS » Дисплей CSS

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

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

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

        Есть 5 важных дисплей -

  • )
  • display: table-column — позволяет элементу вести себя как столбец таблицы (аналогично элементу
  • )
  • display: table-row – позволяет элементу вести себя как строка таблицы (аналогично элементу
  • )
  • display : table-column-group — позволяет элементу вести себя как группа столбцов таблицы (аналогично элементу
  • )
  • display: table-row-group — позволяет элементу вести себя как группа строк таблицы (аналогично элементу
  • )
  • display: table-header-group — позволяет элементу вести себя как заголовок таблицы (аналогично элементу
  • )
  • дисплей: таблица e-footer-group — позволяет элементу вести себя как нижний колонтитул таблицы (аналогично элементу
  • )
  • display: table-cell — позволяет элементу вести себя как ячейка таблицы (аналогично элементу
  • )
  • display: table-caption — позволяет элементу вести себя как заголовок таблицы (аналогично элементу
  • )
     .главная секция {
     дисплей: таблица;
    }
    
    п {
     маржа: 0;
     граница: 1px сплошной серый;
     отступ: 5px 10px 5px 10px;
    }
     

    display:contents позволяет отображать текстовое содержимое, в то время как содержащий его контейнер исчезает.

    Синтаксис отображения содержимого:
    отображение: содержимое ;

    Пример содержимого дисплея

     .основной-дисплей {
     граница: 2px сплошной зеленый;
     фон: зеленый;
     отступ: 20 пикселей;
     ширина: 300 пикселей;
     дисплей: содержимое;
    }
    
    .содержание-вал {
     отступ: 5px;
     фон: золото;
     граница: 2px сплошной черный;
    }
     

    Чтобы создать 1-мерный макет вашего веб-сайта, вы можете использовать Flex .

    Чтобы отобразить родительский контейнер как гибкий, необходимо ввести код display: flex  в родительский контейнер.

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

     .div-flex {
     дисплей: гибкий;
    }
    
    .flex-вал {
     отступ: 5px;
     фон: небесно-голубой;
     граница: 2px сплошной черный;
    }
     

    Чтобы создать 2  Размерных макетов вашего веб-сайта, вы можете использовать Сетку .

    Чтобы отобразить родительский контейнер как сетку, вы должны ввести код display: grid в родительский контейнер.

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

     .maindiv {
     дисплей: сетка;
    }
    
    .div-val {
     отступ: 5px;
     фон: золото;
     граница: 2px сплошной черный;
    }
     

    .

    Добавить комментарий

    Ваш адрес email не будет опубликован.