Свойство display css

"Display". "Свойство display css" отвечает за отображение тегов в браузере.

Свойство display css.

1. Что такое display в css!?
2. Display по умолчанию.
3. Все значения display.

1. Что такое display в css!?

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

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

А теперь своими словами "что такое display в css"!?

Свойство display указывает браузеру, как показывать блок(тег (теги html)).

У свойства "display" есть значения.

Если говорить вообще, то больше всего встречаются два типа:

block(блок т.е. 100% ширины поля, куда он встроен)

inline(линия, т.е. несколько тегов имеющий "display inline" будут находиться в линию )

У тегов html свойство "display" по умолчанию.

Почти у каждого тега, явно илик косвенно свойство "display" есть по умолчанию.

Свойство "display" по умолчанию изменяемо.

Свойство "display" можно изменить!

2. Display по умолчанию.

Можно ли как-то, быстро, определить Display по умолчанию !?

Легко!

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

Нажимаем исследовать элемент по требуемому элементу... у которого хотим определить "Свойство "display"".

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

Справа ищем у данного тега "user agent stylesheet".

Ну и видим, что у тега "p" - Display по умолчанию = "block"...

Нажмите, чтобы открыть в новом окне.



3. Все значения display.

display: block;

display: inline;

display: run-in;

/* values */

display: flow;

display: flow-root;

display: table;

display: flex;

display: grid;

display: ruby;

/* plus values */

display: block flow;

display: inline table;

display: flex run-in;

/* 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;

/* 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;

/* values */

display: contents;

display: none;

/* values */

display: inline-block;

display: inline-table;

display: inline-flex;

display: inline-grid;

/* Global values */

display: inherit;

display: initial;

display: unset;

Всего комментариев : Comments+ 2.0

+ =