Свойство 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%;
}