Верхний блок над шапкой
 
+7 (495) 021-98-78

Отображение, позиционирование, размещение и вертикальное выравнивание

Категории: 
12:30 - 20.02.2018
Классы, управляющие отображением

.inl

устанавливает элементу display: inline;

.inlb

устанавливает элементу display: inline-block;

.bl

устанавливает элементу display: block;

Примеры:
<div class="inlb p10 bg_light-grey">div .inlb .p10 .bg_light-grey</div>
div .inlb .p10 .bg_light-grey
<span class="bl p10 bg_light-grey">span .bl .p10 .bg_light-grey</span>
span .bl .p10 .bg_light-grey

Классы, управляющие позиционированием

.rel

устанавливает элементу position: relative;

.abs

устанавливает элементу position: absolute;

.fix

устанавливает элементу position: fixed;

Пример:
<div class="rel p10 bg_light-grey">.rel .p10 .bg_light-grey
  <div class="abs p10 bg_grey">.abs .p10 .bg_grey</div>
</div>
.rel .p10 .bg_light-grey
.abs .p10 .bg_grey

Классы, управляющие размещением

.fl

устанавливает элементу float: left;

.fr

устанавливает элементу float: right;

.fnone

устанавливает элементу float: none !important;

Пример:
<div class="fl p10 bg_light-grey">.fl .p10 .bg_light-grey</div>
<div class="fr p10 bg_light-grey">.fr .p10 .bg_light-grey</div>
.fl .p10 .bg_light-grey
.fr .p10 .bg_light-grey

Классы, управляющие вертикальным выравниванием

.top

устанавливает элементу и вложенным .col vertical-align: top;

.middle

устанавливает элементу и вложенным .col vertical-align: middle;

.bottom

устанавливает элементу и вложенным .col vertical-align: bottom;

Примеры:
<div class="top inlb ph10 pv30 w40 bg_light-grey">.top .inlb .ph10 .pv30 .w40 .bg_light-grey</div>
<div class="top inlb p10 w40 bg_light-grey">.top .inlb .p10 .w40 .bg_light-grey</div>
.top .inlb .ph10 .pv30 .w40 .bg_light-grey
.top .inlb .p10 .w40 .bg_light-grey
<div class="middle inlb ph10 pv30 w40 bg_light-grey">.middle .inlb .ph10 .pv30 .w40 .bg_light-grey</div>
<div class="middle inlb p10 w40 h50 bg_light-grey">.middle .inlb .p10 .w40 .bg_light-grey</div>
.middle .inlb .ph10 .pv30 .w40 .bg_light-grey
.middle .inlb .p10 .w40 .bg_light-grey
<div class="bottom inlb ph10 pv30 w40 bg_light-grey">.bottom .inlb .ph10 .pv30 .w40 .bg_light-grey</div>
<div class="bottom inlb p10 w40 bg_light-grey">.bottom .inlb .p10 .w40 .bg_light-grey</div>
.bottom .inlb .ph10 .pv30 .w40 .bg_light-grey
.bottom .inlb .p10 .w40 .bg_light-grey