loader

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

display հատկությունը սահմանում է տարրի ցուցադրման տեսակը, որն ունի երկու հիմնական հատկություն, որոնք որոշում են տուփերի առաջացումը. արտաքին ցուցադրման տեսակը որոշում է տուփի գտնվելու վայրը հոսքի դասավորության մեջ (flow layout) և ներքին ցուցադրման տեսակը որոշում է դրա գտնվելու վայրը:

Синтаксис

Գրելաձև

display: inline; ⟿ Отображает элемент как <span>. Любые свойства высоты и ширины не будут иметь никакого эффекта.
display: block; ⟿ Отображает элемент как <p>. Он начинается с новой строки и занимает всю ширину
display: contents; ⟿ Заставляет контейнер исчезнуть.
display: flex; ⟿ Отображает элемент в виде гибкого контейнера на уровне блока.
display: grid; ⟿ Отображает элемент как контейнер сетки на уровне блока.
display: inline-block; ⟿ Отображает элемент как блочный контейнер встроенного уровня.
display: inline-flex; ⟿ Отображает элемент как гибкий контейнер встроенного уровня.
display: inline-grid; ⟿ Отображает элемент как контейнер сетки встроенного уровня.
display: inline-table; ⟿ Элемент отображается как таблица встроенного уровня.
display: list-item; ⟿ Элемент ведет себя как элемент <li>.
display: table; ⟿ Элемент ведет себя как элемент <table>.
display: table-caption; ⟿ Элемент ведет себя как элемент <caption>.
display: table-column-group; ⟿ Элемент ведет себя как элемент <colgroup>.
display: table-header-group; ⟿ Элемент ведет себя как элемент <thead>.
display: table-footer-group; ⟿ Элемент ведет себя как элемент <tfoot>.
display: table-row-group; ⟿ Элемент ведет себя как элемент <tbody>.
display: table-cell; ⟿ Элемент ведет себя как элемент <td>.
display: table-column; ⟿ Элемент ведет себя как элемент <col>.
display: table-row; ⟿ Элемент ведет себя как элемент <tr>.
display: initial; ⟿ Устанавливает значение по умолчанию.
display: inherit; ⟿ Наследует это свойство от своего родительского элемента.
display: inline; ⟿ Տարրը ներկայացվում է որպես span: Բարձրության և լայնության ցանկացած հատկություն որևէ ազդեցություն չի ունենա.
display: block; ⟿ Տարրը ներկայացնում է ինչպես p: Այն սկսվում է նոր տողից և գրավում է ողջ լայնությունը.
display: contents; ⟿ Ստիպում է կոնտեյները անհետանալ.
display: flex; ⟿ Ցուցադրում է տարրը որպես ճկուն կոնտեյներ բլոկի մակարդակում.
display: grid; ⟿ Տարրը ցուցադրում է որպես ցանցային կոնտեյներ բլոկի մակարդակում.
display: inline-block; ⟿ Տարրը ներկայացնվում է որպես ներգծային մակարդակի բլոկային կոնտեյներ.
display: inline-flex; ⟿ Տարրը ներկայացնում է որպես ներգծային մակարդակի ճկուն կոնտեյներ.
display: inline-grid; ⟿ Տարրը ներկայացնում է որպես ներգծային մակարդակի ցանցի կոնտեյներ.
display: inline-table; ⟿ Տարրը ներկայացվում է որպես ներգծային մակարդակի աղյուսակ.
display: list-item; ⟿ Տարրը իրեն պահում է որպես li տարր.
display: table; ⟿ Տարրն իրեն պահում է table տարրի պես.
display: table-caption; ⟿ Տարրն իրեն պահում է caption տարրի պես.
display: table-column-group; ⟿ Տարրն իրեն պահում է colgroup տարրի պես.
display: table-header-group; ⟿ Տարրը իրեն պահում է որպես thead տարր.
display: table-footer-group; ⟿ Տարրը իրեն պահում է որպես tfoot տարր.
display: table-row-group; ⟿ Տարրն իրեն պահում է որպես tbody տարր.
display: table-cell; ⟿ Տարրն իրեն պահում է td տարրի պես.
display: table-column; ⟿ Տարրն իրեն պահում է col տարրի պես.
display: table-row; ⟿ Տարրն իրեն պահում է tr տարրի պես.
display: initial; ⟿ Սահմանում է սկզբնական արժեքը.
display: inherit; ⟿ Ժառանգում է այս հատկությունը իր գլխավոր տարրից.

Пример

Օրինակ

See the Pen inline by Erik Egnatosyan (@SansaciaCodenyx) on CodePen.

⇓Результат данного примера показан на рисунке⇓

⇓Այս օրինակի արդյունքը ցույց է տրված նկարում⇓

inline image

See the Pen block by Erik Egnatosyan (@SansaciaCodenyx) on CodePen.

⇓Результат данного примера показан на рисунке⇓

⇓Այս օրինակի արդյունքը ցույց է տրված նկարում⇓

block image

See the Pen contents by Erik Egnatosyan (@SansaciaCodenyx) on CodePen.

⇓Результат данного примера показан на рисунке⇓

⇓Այս օրինակի արդյունքը ցույց է տրված նկարում⇓

contents image

See the Pen display: flex; by Erik Egnatosyan (@SansaciaCodenyx) on CodePen.

⇓Результат данного примера показан на рисунке⇓

⇓Այս օրինակի արդյունքը ցույց է տրված նկարում⇓

display-flex image

See the Pen display: grid; by Erik Egnatosyan (@SansaciaCodenyx) on CodePen.

⇓Результат данного примера показан на рисунке⇓

⇓Այս օրինակի արդյունքը ցույց է տրված նկարում⇓

display-grid image

See the Pen inline-block by Erik Egnatosyan (@SansaciaCodenyx) on CodePen.

⇓Результат данного примера показан на рисунке⇓

⇓Այս օրինակի արդյունքը ցույց է տրված նկարում⇓

inline-block image

See the Pen inline-flex by Erik Egnatosyan (@SansaciaCodenyx) on CodePen.

⇓Результат данного примера показан на рисунке⇓

⇓Այս օրինակի արդյունքը ցույց է տրված նկարում⇓

inline-flex image

See the Pen inline-grid by Erik Egnatosyan (@SansaciaCodenyx) on CodePen.

⇓Результат данного примера показан на рисунке⇓

⇓Այս օրինակի արդյունքը ցույց է տրված նկարում⇓

inline-grid image

See the Pen inline-table by Erik Egnatosyan (@SansaciaCodenyx) on CodePen.

⇓Результат данного примера показан на рисунке⇓

⇓Այս օրինակի արդյունքը ցույց է տրված նկարում⇓

inline-table image

See the Pen list-item by Erik Egnatosyan (@SansaciaCodenyx) on CodePen.

⇓Результат данного примера показан на рисунке⇓

⇓Այս օրինակի արդյունքը ցույց է տրված նկարում⇓

list-item image

See the Pen table by Erik Egnatosyan (@SansaciaCodenyx) on CodePen.

⇓Результат данного примера показан на рисунке⇓

⇓Այս օրինակի արդյունքը ցույց է տրված նկարում⇓

display-table image

See the Pen table-caption by Erik Egnatosyan (@SansaciaCodenyx) on CodePen.

⇓Результат данного примера показан на рисунке⇓

⇓Այս օրինակի արդյունքը ցույց է տրված նկարում⇓

table-caption image

See the Pen table-column-group by Erik Egnatosyan (@SansaciaCodenyx) on CodePen.

⇓Результат данного примера показан на рисунке⇓

⇓Այս օրինակի արդյունքը ցույց է տրված նկարում⇓

table-column-group image

See the Pen table-header-group by Erik Egnatosyan (@SansaciaCodenyx) on CodePen.

⇓Результат данного примера показан на рисунке⇓

⇓Այս օրինակի արդյունքը ցույց է տրված նկարում⇓

table-header-group image

See the Pen table-footer-group by Erik Egnatosyan (@SansaciaCodenyx) on CodePen.

⇓Результат данного примера показан на рисунке⇓

⇓Այս օրինակի արդյունքը ցույց է տրված նկարում⇓

table-footer-group image

See the Pen table-row-group by Erik Egnatosyan (@SansaciaCodenyx) on CodePen.

⇓Результат данного примера показан на рисунке⇓

⇓Այս օրինակի արդյունքը ցույց է տրված նկարում⇓

table-row-group image

See the Pen table-cell by Erik Egnatosyan (@SansaciaCodenyx) on CodePen.

⇓Результат данного примера показан на рисунке⇓

⇓Այս օրինակի արդյունքը ցույց է տրված նկարում⇓

table-cell image

See the Pen table-column by Erik Egnatosyan (@SansaciaCodenyx) on CodePen.

⇓Результат данного примера показан на рисунке⇓

⇓Այս օրինակի արդյունքը ցույց է տրված նկարում⇓

table-column image

See the Pen table-row by Erik Egnatosyan (@SansaciaCodenyx) on CodePen.

⇓Результат данного примера показан на рисунке⇓

⇓Այս օրինակի արդյունքը ցույց է տրված նկարում⇓

table-row image

See the Pen initial by Erik Egnatosyan (@SansaciaCodenyx) on CodePen.

⇓Результат данного примера показан на рисунке⇓

⇓Այս օրինակի արդյունքը ցույց է տրված նկարում⇓

initial image

See the Pen inherit by Erik Egnatosyan (@SansaciaCodenyx) on CodePen.

⇓Результат данного примера показан на рисунке⇓

⇓Այս օրինակի արդյունքը ցույց է տրված նկարում⇓

inherit image
Поддержка браузера дляԲրաուզերի աջակցությունը display элемента տարրին
Browser IE Edge Chrome Firefox Safari Opera
Version 6+ 12+ 4+ 2+ 3.1+ 10+
Notes