Свойство display

В каскадных таблицах стилей имеется такое многоцелевое свойство, как display, которое определяет отображение элемента в HTML-документе. Свойство display располагает внушительным списком разного рода значений. Но в основном из-за того что не все опции поддерживаются браузерами, используется только четыре наиболее распространённых параметра, таких как – block, inline, list-item и none.
Стоит отметить, что начиная с IE8 практически все браузеры, за редким исключением, полностью поддерживают остальные значения свойства display.
display : block;
display : inline;
display : inline-block;
display : inline-table;
display : list-item;
display : run-in;
display : table;
display : table-caption;
display : table-cell;
display : table-column;
display : table-column-group;
display : table-footer-group;
display : table-header-group;
display : table-row;
display : table-row-group;
block
– это значение указывает на то, что элемент будет выводиться как блочный.
inline
– при наличие этого параметра элемент отобразится как встроенный.
inline-block
– задаёт характеристики блочного и встроенного элемента.
inline-table
– задаёт характеристики таблицы <table
> которая при этом является встроенным элементом.
list-item
– данное значение добавляет маркер как в списке.
none
– временное удаление элемента.
run-in
– элемент будет блочным или встроенным в зависимости от его расположения.
table
– это значение задаёт элементу свойства подобные тегу <table
>.
table-caption
– элемент получает свойства подобные тегу <caption
>.
table-cell
– назначает элементу свойство ячеек таблицы аналогичных тегу <td
> или <th
>.
table-column
– колонка таблицы подобно тегу <col>.
table-column-group
– группа колонок аналогично тегу <colgroup
>.
table-header-group
– свойства аналогичные тегу <thead
>.
table-row
– параметр аналогичный действию тега <tr
>.
table-row-group
– свойства элемента подобные действию тега <tbody
>.
В данном примере имеется два блока с классами first-block
и second-block
, которым заданы свойства межстрочного интервала line-height
со значением 50
пикселей и отступы padding-right
и padding-left
справа и слева по 20
пикселей. По отдельности для первого блока задан цвет фона жёлтого оттенка #fC0
, а для второго блока красный цвет фона #f30
и белый цвет для шрифта #fff
. По умолчанию данные контейнеры уже имеют свойство block
, поэтому в CSS
он не указан.

HTML
<div class="first-block">
Первый блок
</div>
<div class="second-block">
Второй блок
</div>
CSS
.first-block,
.second-block{
line-height: 50px;
padding-right: 20px;
padding-left: 20px;
}
.first-block{
background-color: #fC0;
}
.second-block{
background-color: #f30;
color: #fff;
}
Если первому блоку и второму блоку, взятому из первого примера, задать свойство inline
то в результате их расположение будет выглядеть следующим образом:

HTML
<div class="first-block">
Первый блок
</div>
<div class="second-block">
Второй блок
</div>
CSS
.first-block,
.second-block{
display: inline;
line-height: 50px;
padding-right: 20px;
padding-left: 20px;
}
.first-block{
background-color: #fC0;
}
.second-block{
background-color: #f30;
color: #fff;
}
Для блоков first-block
и second-block
задано свойство inline-block
.
display: inline-block;

Двум блокам first-block
и second-block
задано свойство inline-table
.
display: inline-table;

Для того чтобы перед контейнером например <div>
или <p>
поставить маркер используется свойство list-item
. Стоит отметить, что обязательно должен быть отступ слева margin-left
в противном случае маркера не будет видно.

HTML
<div class="list">
<p>Источники тока</p>
<p>Предохранители</p>
<p>Трансформаторы</p>
</div>
<div class="list">
<div>Диоды</div>
<div>Резисторы</div>
<div>Конденсаторы</div>
</div>
CSS
.list {
margin-top: 40px;
margin-left: 50px;
margin-bottom: 40px;
}
.list p,
.list div {
margin-left: 25px;
display: list-item;
}
.list p {
list-style-type: disc;
}
.list div {
list-style-type: square;
}
С помощью свойства table
, которое задаёт блоку свойства таблицы, table-row
аналогу <tr>
и table-cell
задающее свойство ячеек, можно реализовать блочную таблицу.
В данной таблице дополнительно использованы свойства table-header-group
и table-row-group
аналог <thead>
и <tbody>
.

HTML
<div class="table">
<div class="thead">
<div class="row">
<div class="col">Наименование</div>
<div class="col">Обозначение</div>
</div>
</div>
<div class="row">
<div class="col">Корпус</div>
<div class="col">202.10.06.01</div>
</div>
<div class="row">
<div class="col">Кронштейн</div>
<div class="col">202.10.06.02</div>
</div>
<div class="tbody">
<div class="row">
<div class="col">Сепаратор</div>
<div class="col">202.10.06.03</div>
</div>
<div class="row">
<div class="col">Фиксатор</div>
<div class="col">202.10.06.04</div>
</div>
</div>
<div class="row">
<div class="col">Шток</div>
<div class="col">202.10.06.05</div>
</div>
<div class="row">
<div class="col">Штуцер</div>
<div class="col">202.10.06.06</div>
</div>
</div>
CSS
.table{
width: 450px;
display: table;
color: #494b4d;
font-size: 17px;
margin: 50px auto;
border-top-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-left-style: solid;
border-top-color: #333;
border-left-color: #333;
}
.table .thead{
color: #fff;
background-color: #999;
display: table-header-group;
}
.table .tbody{
display: table-row-group;
background-color: #d8d8d8;
}
.table .row{
display: table-row;
}
.table .col{
display: table-cell;
padding: 8px 0px 8px 30px;
border-right-width: 1px;
border-bottom-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-right-color: #333;
border-bottom-color: #333;
}
.table .col:nth-child(1){
width: 50%;
}
.table .col:nth-child(2){
width: 50%;
}