Содержание

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 элементов для горизонтального меню.

Отображение элементов. Утилиты · Bootstrap. Версия v4.0.0

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

Как это устроено

Изменяйте значение свойства display с помощью наших обычных отзывчивых классов отображения. Мы намеренно поддерживаем только поднабор всех возможных значений свойства

display. Классы можно комбинировать для создания различных эффектов, как вам надо.

Обозначение

Классы отображения, которые подходят всем брейкпойнтам, от xs до xl, не имеют в своем названии аббревиатуры брейкпойнта, т.к. эти классы применяются, начиная от min-width: 0; и выше, и т.о., не «связаны» медиа-запросами. Оставшиеся брейкпойнты, однако, включают подобные аббревиатуры брейкпойнта.

Поэтому классы называются по формату:

  • .d-{value} для xs
  • .d-{breakpoint}-{value}
    для sm, md, lg и xl.

Где значение – это одно из:

  • none
  • inline
  • inline-block
  • block
  • table
  • table-cell
  • table-row
  • flex
  • inline-flex

Медиа-запросы влияют на ширину экрана, начиная с указаннного брейкпонта или больше. Например, .d-lg-none

задает display: none; на обоих lg и xl.

Примеры

<div>d-inline</div>
<div>d-inline</div>

d-block d-block 

<span>d-block</span>
<span>d-block</span>

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

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

Чтобы скрыть элементы, используйте класс

.d-none или один из классов .d-{sm,md,lg,xl}-none.

Для показа элемента только на определенном инвервале размеров экрана вы можете сочетать один класс .d-*-none с классом .d-*-*, например .d-none .d-md-block .d-xl-none скроет элемент на всех размерах экрана, кроме средних и больших.

Размер экрана Класс
Скрыт на всех .d-none
Скрыт только на xs .d-none .d-sm-block
Скрыт только на sm
.d-sm-none .d-md-block
Скрыт только на md .d-md-none .d-lg-block
Скрыт только на lg .d-lg-none .d-xl-block
Скрыт только на xl .d-xl-none
Виден на всех .d-block
Виден только на xs .d-block . d-sm-none
Виден только на sm .d-none .d-sm-block .d-md-none
Виден только на md .d-none .d-md-block .d-lg-none
Виден только на lg .d-none .d-lg-block .d-xl-none
Виден только на xl .d-none .d-xl-block

Скрыто на экранах шире lg

Скрыто на экранах меньше lg

<div>Скрыто на экранах шире lg</div>
<div>Скрыто на экранах меньше lg</div>

Отображение при печати

Измените атрибут display элементов при печати с помощью наших классов. Сюда входит поддержка таких же значений

display, как в наших отзывчивых классах .d-*.

  • .d-print-none
  • .d-print-inline
  • .d-print-inline-block
  • .d-print-block
  • .d-print-table
  • .d-print-table-row
  • .d-print-table-cell
  • .d-print-flex
  • .d-print-inline-flex

Классы печати и отображения можно сочетать.

Только экран (Скрыто только для печати)

Только печать (Скрыто только на экране)

Скрыть до больших экранов, но всегда отображается для печати

<div>Только экран (Скрыто только для печати)</div>
<div>Только печать (Скрыто только на экране)</div>
<div>Скрыть до больших экранов, но всегда отображается для печати</div>

основные способы — учебник CSS

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

Скрытие элемента с помощью opacity: 0

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

1 означает полную непрозрачность объекта, а значение 0, соответственно, приводит к полной прозрачности, в результате чего элемент перестает быть виден для посетителя. Последняя часть предложения важна: элемент будет скрыт лишь визуально, но при этом он будет занимать свое место на странице, влиять на положение других элементов, и с ним можно будет взаимодействовать (к примеру, он станет непрозрачным при наведении мыши, если определить соответствующий стиль для состояния :hover). Скрин-ридеры также будут видеть данный элемент.

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

Скрытие элемента с помощью visibility: hidden

В отличие от свойства прозрачности, свойство visibility специально предназначено для визуального скрытия элементов. Значение hidden скрывает элемент, а значение visible — показывает. Как и в случае с opacity, элемент продолжает занимать свое место на странице, однако взаимодействовать с элементом, скрытым с помощью visibility: hidden, нельзя. Скрин-ридеры не видят такой элемент.

Свойство visibility не реагирует на свойство transition, а это означает, что изменение значения с hidden на visible (либо наоборот) будет происходить мгновенно.

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

Скрытие элемента с помощью display: none

Свойство display со значением none стоит использовать в том случае, если вам нужно полностью скрыть элемент. Такой объект (и все его дочерние элементы) не только перестает быть виден посетителю и скрин-ридеру, но и не занимает места на странице и не влияет на расположение других элементов. Всё выглядит так, словно элемента и нет. Естественно, взаимодействовать с элементом, который скрыт данным образом, тоже невозможно.

Как и в случае со свойством visibility, свойство display не поддерживает плавные переходы transition.

Скрытие элемента с помощью position: absolute

Еще один способ скрыть элемент исключительно визуально — задать ему абсолютное позиционирование, выдернув из общего потока документа, и затем переместить далеко за пределы видимой области путем установки больших отрицательных значений для свойств top и left. Например:


div {
	position: absolute;
	top: -9999px;
	left: -9999px;
}

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

Далее в учебнике: CSS Grid Layout — будущее уже здесь.

Дисплей

— CSS: каскадные таблицы стилей

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

Формально свойство display устанавливает внутренний и внешний типы отображения элемента. Внешний тип устанавливает участие элемента в компоновке потока; внутренний тип устанавливает расположение детей. Некоторые значения display полностью определены в их собственных индивидуальных спецификациях; например, подробности того, что происходит при объявлении display: flex , определено в спецификации CSS Flexible Box Model.См. Таблицу в конце этого документа для получения всех индивидуальных характеристик.

Свойство отображения CSS задается с использованием значений ключевых слов.

 
дисплей: блок;
дисплей: встроенный;
дисплей: встроенный блок;
дисплей: гибкий;
дисплей: встроенный гибкий;
дисплей: сетка;
дисплей: встроенная сетка;
дисплей: поток-корень;


дисплей: нет;
дисплей: содержимое;


отображение: блокировка потока;
дисплей: встроенный поток;
дисплей: встроенный поток-корень;
дисплей: блок гибкий;
дисплей: встроенный гибкий;
отображение: блочная сетка;
отображение: встроенная сетка;
дисплей: блокировать поток-корень;


дисплей: таблица;
дисплей: таблица-строка;
отображение: элемент списка;


дисплей: наследовать;
дисплей: начальный;
дисплей: не настроен;

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

снаружи

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

Действительный значений:

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

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

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

Внутри

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

Допустимые значения :

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

Если его внешний тип отображения - inline или run-in , и он участвует в блочном или встроенном контексте форматирования, то он генерирует встроенный блок. В противном случае создается блок контейнера блока.

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

поток-корень
Элемент генерирует блок блочного элемента, который устанавливает новый контекст форматирования блока, определяя, где находится корень форматирования.
стол
Эти элементы ведут себя как элементы HTML . Он определяет блок на уровне блока.
гибкий
Элемент ведет себя как блочный элемент и размещает его содержимое в соответствии с моделью Flexbox.
сетка
Элемент ведет себя как блочный элемент и размещает его содержимое в соответствии с сеточной моделью.
ruby ​​ Это экспериментальный API, который не следует использовать в производственном коде.
Элемент ведет себя как встроенный элемент и размещает свое содержимое в соответствии с моделью форматирования Ruby. Он ведет себя как соответствующие элементы HTML .

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

Элемент списка

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

Одно значение list-item заставит элемент вести себя как элемент списка. Его можно использовать вместе с list-style-type и list-style-position .

элемент списка также можно комбинировать с любым ключевым словом и ключевыми словами flow или flow-root .

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

Внутренний

<внутренний-дисплей>
Некоторые модели макетов, такие как table и ruby ​​, имеют сложную внутреннюю структуру с несколькими различными ролями, которые могут выполнять их дочерние и потомки.В этом разделе определяются те «внутренние» отображаемые значения, которые имеют значение только в этом конкретном режиме макета.

Допустимые значения :

таблица-строка-группа
Эти элементы ведут себя как
HTML-элементов.
таблица-заголовок-группа
Эти элементы ведут себя как
HTML-элементов.
нижний колонтитул группы
Эти элементы ведут себя как
HTML-элементов.
стол-ряд
Эти элементы ведут себя как элементы HTML
.
таблица-ячейка
Эти элементы ведут себя как элементы HTML
HTML-элементов.
таблица-столбец
Эти элементы ведут себя как элементы HTML
.
заголовок таблицы
Эти элементы ведут себя как
.
таблица-столбец-группа
Эти элементы ведут себя как
HTML-элементов.
ruby-base Это экспериментальный API, который не следует использовать в производственном коде.
Эти элементы ведут себя как элементы HTML .
ruby-text Это экспериментальный API, который не следует использовать в производственном коде.
Эти элементы ведут себя как элементы HTML .
ruby-base-container Это экспериментальный API, который не следует использовать в производственном коде.
Эти элементы ведут себя как HTML-элементов, созданных как анонимные блоки.
ruby-text-container Это экспериментальный API, который не следует использовать в производственном коде.
Эти элементы ведут себя как элементы HTML .

Коробка

Эти значения определяют, генерирует ли элемент вообще поля отображения.

Действительный значений:

содержимое
Эти элементы сами по себе не создают конкретную коробку. Их заменяют их псевдобоксы и их дочерние блоки. Обратите внимание, что спецификация CSS Display Level 3 определяет, как значение content должно влиять на «необычные элементы» - элементы, которые не отображаются исключительно с помощью концепций блока CSS, таких как замененные элементы. См. Приложение B: Эффекты отображения: содержание необычных элементов для получения более подробной информации.

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

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

Наследие

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

Допустимые значения :

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

Это эквивалент встроенного корневого потока .

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

Это эквивалент встроенной таблицы .

линейный гибкий
Элемент ведет себя как встроенный элемент и размещает его содержимое в соответствии с моделью flexbox.

Это эквивалент inline flex .

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

Это эквивалент встроенной сетки .

Какой синтаксис использовать сейчас?

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

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

  .container {
  дисплей: встроенный гибкий;
}

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

  .container {
  дисплей: встроенный гибкий;
}

Дополнительные сведения об этих изменениях в спецификации см. В статье «Адаптация к новому двухзначному синтаксису отображения».

Глобальный 

 
дисплей: наследовать;
дисплей: начальный;
дисплей: не настроен;

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

CSS Flow Layout (display: block, display: inline)

display: flex

display: grid

display: none

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

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

display: contents

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

Таблицы

Изменение значения display элемента

на block , grid или flex изменит его представление в дереве доступности. Это приведет к тому, что таблица больше не будет правильно объявляться технологией чтения с экрана.

Начальное значение inline
Применимо к всем элементам
Унаследовано нет
Расчетное значение, кроме заданного значения корневой элемент. В обоих случаях вычисленное значение может быть ключевым словом, отличным от указанного.
Тип анимации дискретный

Сравнение отображаемых значений

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

Мы включили padding и background-color в контейнеры и их дочерние элементы, чтобы было легче увидеть эффект, который оказывают отображаемые значения.

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

HTML 
  <статья>
   Первый 
   Второй 
   Третий 


<статья>
   Первый 
   Второй 
   Третий 




  
  <выбор>
    <выбранная опция> заблокировать
CSS 
  html {
  семейство шрифтов: helvetica, arial, sans-serif;
  межбуквенный интервал: 1 пиксель;
  padding-top: 10 пикселей;
}

статья {
  цвет фона: красный;
}

article span {
  цвет фона: черный;
  цвет белый;
  маржа: 1px;
}

article, span {
  отступ: 10 пикселей;
  радиус границы: 7 пикселей;
}

article, div {
  маржа: 20 пикселей;
}
JavaScript 
  const статьи = документ. querySelectorAll ('. контейнер');
const select = document.querySelector ('выбрать');

function updateDisplay () {
  article.forEach ((article) => {
    article.style.display = select.value;
  });
}

select.addEventListener ('изменить', updateDisplay);

updateDisplay ();
Результат

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

Спецификация Статус Комментарий
CSS Display Module Level 3
Определение термина «отображение» в этой спецификации.		 Кандидат в рекомендации Добавлены run-in , flow , flow-root , content и multi-keyword values.
CSS Ruby Layout Module Level 1
Определение термина «отображение» в этой спецификации. 		Осадка рабочий Добавлено ruby ​​, ruby-base , ruby-text , ruby-base-container и ruby-text-container .
CSS Grid Layout
Определение термина «отображение» в этой спецификации. 		Кандидат в рекомендации Добавлены значения модели блока сетки.
CSS Flexible Box Layout Module
Определение термина «отображение» в этой спецификации. 		Кандидат в рекомендации Добавлены значения модели гибкого блока.
CSS Level 2 (Revision 1)
Определение термина «отображение» в этой спецификации.		 Рекомендация Добавлены значения табличной модели и inline-block .
Уровень CSS 1
Определение термина «отображение» в этой спецификации. 		Рекомендация Первоначальное определение. Базовые значения: нет , блок , встроенный и элемент списка .

Таблицы BCD загружаются только в браузере

Скрыть или отобразить элементы в HTML с помощью свойства отображения

< HTML >

< голова >

< title > Javascript title >

< style type = "text / css" >

.круг {

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

высота: 130 пикселей;

радиус границы: 50%;

поплавок: левый;

поле справа: 50 пикселей;

}

.округлено {

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

высота: 130 пикселей;

радиус границы: 25%;

поплавок: левый;

поле справа: 50 пикселей;

}

.квадрат {

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

высота: 130 пикселей;

радиус границы: 0%;

поплавок: левый;

поле справа: 50 пикселей;

}

# круг {

цвет фона: # 196F3D;

}

# Округлено {

цвет фона: # 5DADE2;

}

# квадрат {

цвет фона: # 58D68D;

}

стиль >

головка >

< корпус >

< div class = «круг» id = «круг» > div >

< div class = «округленный» id = «округленный» > div >

< div класс = «квадрат» id = «квадрат» > div >

< скрипт тип = "текст / JavaScript" >

документ. getElementById ("круг"). onclick = function () {

document.getElementById ("круг"). Style.display = "none";

}

document.getElementById ("с округлением"). Onclick = function () {

документ.getElementById («округлено»). style.display = «none»;

}

document.getElementById ("квадрат"). Onclick = function () {

document.getElementById ("квадрат"). Style.display = "none";

}

скрипт >

корпус >

html >

CSS Display Block, Inline, inline-block, Display none

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

CSS Display Свойство сообщает, как элемент html отображается как блок. Свойство отображения может также изменить отображение HTML-элемента , например, с блока на встроенный и на встроенный блок и т. Д.

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

Отображаемые значения CSS

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

Встроенный дисплей - это свойство отображения по умолчанию для , , , , , и т. Д.Эти элементы занимают только пространство содержимого и не разрывают строку. Встроенные элементы текстового типа (a, span, b, i, strong, em, small) не поддерживают свойство width. Но изображение и iframe могут поддерживать ширину, поскольку они не являются текстовыми элементами.

Свойства встроенных элементов

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

Это промежуток Связь

Это абзац

Это div

 
<стиль>
    span, a {background: blue;}
    div, p {фон: желтый}


 Это диапазон  
 Ссылка  


 Это абзац 
 

 Это div
Показать встроенный Для списка
  • Список 1
  • Список 2
  • Список 3
  • Список 4
 
<стиль>
.list1 {padding: 0}
.list1 li {
    дисплей: встроенный;
    фон: # 99f;
    }



    
    
  •  Список 1 
    • 
    
  •  Список 2 
    • 
    
  •  Список 3 
    • 
    
  •  Список 4 
    •

Встроенный блок

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

  • Список 1
  • Список 1
  • Список 2
  • Список 3
  • Список 4
 
<стиль>
. list2 {padding: 0;}
.list2 li {
    дисплей: встроенный блок;
    ширина: 100 пикселей;
    фон: #fcc;
    отступ: 6 пикселей 10 пикселей;
    }



    
    
  •  Список 1 
    • 
    
  •  Список 2 
    • 
    
  •  Список 3 
    • 
    
  •  Список 4 
    •

Отображение в строке против встроенного блока

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

Разница между отображением встроенного и встроенного блока
Имущество Дисплей встроенный Показать встроенный блок
Набивка только слева и справа со всех четырех сторон
Маржа только слева и справа со всех четырех сторон
ширина не допускается разрешено
Высота не допускается разрешено

Блок дисплея

Блок отображения позволяет встроенным элементам вести себя как элементы блока.

,

от

до
,

, <адрес> , 

 ,  
     ,  
       ,  < hr>  - все это  элементов уровня блока . Элементы HTML Block могут иметь как встроенный уровень, так и уровень блока в качестве дочерних.  
      

 
       Свойства блочных элементов 
       

         
      •  Занять Полная ширина (100%) родительского элемента. 
        • 
                      
      •  Начиная с нового ряда 
        • 

      •  Следующий элемент появится в следующей строке.
        • 

      •  может иметь как встроенные, так и блочные элементы в качестве дочерних. 
        • 

        
       Преобразование встроенных элементов в блочные. 
       


        Ссылка 5
        Ссылка 6
        Ссылка 7
        Ссылка 8

         
       
<стиль>
a {
    дисплей: блок;
    фон: # f99;
}


 Ссылка 5 
 Ссылка 6 
 Ссылка 7 
 Ссылка 8 
 
       Элемент списка 
        Элемент списка отображения  - это отображение по умолчанию из 
    1.   элементов.Все элементы li отображаются маркерами или нумерацией в зависимости от типа списка (неупорядоченный или упорядоченный).
       Абзац как элемент списка
       Абзац как элемент списка
       Абзац как элемент списка
       Абзац как элемент списка
       
<стиль>
п{
    отображение: элемент списка;
    фон: # f99;
}

    
    
       Абзац как элемент списка 
      
    
       Абзац как элемент списка 
      
    
       Абзац как элемент списка 
      
    
       Абзац как элемент списка 
      
                    
       Дисплейный стол 
        Display Table  - это экран по умолчанию для элемента 
      . Display Table  позволяет следующему элементу начинать со следующей строки, но занимает только ширину содержимого. См. Пример
       Div One
       Div Two
       Div Three
       Div Four
       
<стиль>
.стол{
    дисплей: таблица;
    фон: # f99;
}



       Div как таблица 
      

       Div как таблица 
      

       Div как таблица 
      

       Div как таблица 
      
        
       Показать встроенную таблицу 
        Отображение встроенной таблицы  используется для встраивания элемента таблицы.
       Div как встроенная таблица
       Div как встроенная таблица
       Div как встроенная таблица
       Div как встроенная таблица
       
<стиль>
.inline-table {
    дисплей: встроенная таблица;
    фон: # f99;
}



       Div как встроенная таблица 
      

       Div как встроенная таблица 
      

       Div как встроенная таблица 
      

       Div как встроенная таблица 
      
        
       Дисплей НЕТ 
        Показать нет  скрыть элемент html от пользователя.Таким образом, он не занимает места. Мы можем изменить отображение этих элементов при наведении курсора на родительский элемент.
       Не отображать пример. 
       Этот абзац виден
       
<стиль>
.hidden-text {display: none}


    
       Этот абзац виден 
      
    
       Этот абзац скрыт 
      

        
       Дисплей отсутствует, видимость скрыта. 
        Видимость скрыта  скрывает только содержимое, но занимает место.Но в  display none , элемент скрывается и не занимает места.
       Скрытый элемент CSS: пошаговое руководство 
        Вы можете скрыть элемент в CSS, используя свойства CSS display: none или visibility:   hidden  . display: none удаляет весь элемент со страницы, а mat влияет на макет страницы. видимость:   скрыто   скрывает элемент, сохраняя при этом пространство.
       Вы можете столкнуться со сценарием, когда вы хотите скрыть элемент на веб-странице. Например, у вас может быть блок текста, который вы хотите скрыть и отображать, когда пользователь нажимает кнопку.
       CSS Hide Element 
       Существует два основных подхода к скрытию элемента в CSS:
      •  Атрибут display: none.
      •  Атрибут видимость: скрытый.
       Первый подход может повлиять на макет вашей веб-страницы. Но, тем не менее, популярностью пользуется второй метод.
       CSS Hide Element: display 
       Find Your Bootcamp Match
      •