Просмотров: 1 281

Блочные элементы

Давайте начнем рассмотрение видов элементов CSS с блочных элементов. Блочные элементы — это элементы из которых строиться каркас всей страницы. Своего рода это кирпичи, из которых будет состоять вся веб-страница.

10553902

К блочным элементам относятся элементы со значением свойства display:

block, list-item, и table

Это элементы:

html, address,
blockquote,
body, dd, div,
dl, dt, fieldset, form,
frame, frameset,
h1, h2, h3, h4,
h5, h6, noframes,
ol, p, ul, center,
dir, hr, menu, pre, li, table, isindex,

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

Итак, что же это за характеристики:

+ Исходя из названия, можно догадаться, что блочные элементы представляют собой прямоугольную область, в которой находится какое-либо содержимое.

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

//webgyry.info/box-dimension-css

+ Блочные элементы могут содержать в себе другие строчные или блочные элементы. Уровень вложенности никак не ограничен.

<div>
   <p>Уровень вложенности 1</p>
   <div>
       <p>Уровень вложенности 2</p>
       <span>Строчный элемент</span>
       <div>Уровень вложенности 3</div>
   </div>
</div>

Исключение из этого правила элемент <p>, он не может содержать в себе другие блочные элементы.

+ Для блочных элементов действует эффект схлопования свойства margin (об этом чуть позже)

+ Блочные элементы запрещено вставлять в строчные.

Следующая форма записи не пройдет валидацию:

<a><p>Абзац</p></a>

Необходимо написать так:

<p><a>Абзац</a></p>

+ Свойство width для блочных элементов принимает значение по умолчанию auto и блок занимает все доступное по ширине пространство:

 

Исключением из этого правила является элемент table, ширина которого будет зависеть от его содержимого.

+ Если к блочным элементам не применяется особые формы позиционирования, то блоки располагаются один под другим. Это правило действует даже в том случае, если пространства сбоку от блока достаточно, чтобы вместить блок, который находится ниже.

+ Для блочных элементов действует правило.

Ширина блочного элемента = значение свойства width для элемента + padding-left + margin-left + padding-right + margin-right + border-left + border-right

<div style="width:300px; background:#ccc;">Блок с шириной 300px</div>
<div style="width:400px; background:#C90; margin-left:10px; padding-left:10px; border-left:10px solid #000; margin-right:10px; padding-right:10px; border-right:10px solid #000;">
 Блок с шириной 300px и установленными значениями margin, padding и border
</div>

Хотя ширина у обоих блоков задана одинаковой, но явно видно, что нижний блок больше по ширине чем верхний.

+ Высота блочного элемента, по умолчанию, принимает значение auto и принимает такое значение, которое необходимо для того, чтобы полностью вместился весь контент.

+ Высота блочного элемента = значение свойства height для элемента + padding-top + margin-top + padding-bottom + margin-bottom + border-top + border-bottom

+ Если высота блока задана каким-то конкретным значением и содержимое не вмещается в заданные границы, то оно будет отображаться поверх блока.

<div style="height:100px; width:100px; background:#ccc;">Блок с высотой 100px Блок с высотой Блок с высотой Блок с высотой Блок с высотой Блок с высотой Блок с высотой</div>

+ Для блочных элементов не работает свойство vertical-align и др. свойства, которые предназначены для работы со строчными элементами.

Это основные характеристики блочных элементов. Их понимание позволяет решить множество проблем, которые возникают при верстке сайтов. Поэтому посмотрите их внимательно еще раз, это может сэкономить вам много времени в будущем.