Для опытного глаза HTML страница представляет собой набор из конструктивных блоков. Они помогают ему создать свой уникальный проект. Одними из таких вспомогательных инструментов являются блочные элементы, которые чаще всего встречаются на странице.
Блочный элемент — это основной конструктивный элемент страницы, который можно представить в виде прямоугольника. К ним относятся: p,div, h1-h6 и так далее. Однако они имеют ряд особенностей.
Особенности блочных элементов
- Может иметь родителя
<body>, в соответствии с правилами. К примеру, тэг<li>обязан иметь в родителях тэг<ul>или<ol>. - Могут быть родителями для практически всех других элементов. Однако и тут есть свои исключения из правил,внутри тэга
<p>могут находиться только строчные элементы. - Им можно задавать значения width и height. Если этого не сделать, то он займёт всю область по горизонтали, а высота будет лимитироваться содержимым.
- У них отсутствуют ограничения на стили margin и padding. Но и тут не обошлось без исключений, к
<table>padding применять нельзя. - Каждый новый блок, начинается со следующей строки.
Примечание
Элементы строчного типа не могут содержать в себе блочные. С целью борьбы с неопытными верстальщиками, большинство интернет-браузеров целенаправленно отображают такое написание не правильно.
Ширина блочных элементов
Мы можем воспользоваться рядом решений для задания ширины этим элементам. Основные, из которых рассматриваются далее:
Дочернему элементу блочного типа задана фиксированная ширина
Если ширина у дочернего элемента имеет некоторое значение, то ширина родителя не будет на неё влиять (вне зависимости больше она его или меньше).
HTML
<div class=”ParentContent”> <div class=”FirstChildren”></div> <div class=”SecondChildren”></div> </div>
CSS
.ParentContent { width: 200px; } .FirstChildren { width: 100px; } .SecondChildren { width: 300px; }
Ширина задана в процентах
Если задать ширину в процентах, то она будет напрямую завесить от ширины родителя.
Ширина не указана
Если элементу не была задана ширина( max-width, min-width, width), то она принимает значение auto. В таком случае дочерний блочный элемент займёт всю область контента родительского элемента.
При этом, стоит обратить внимание, что при изменении ширины родительского элемента будет меняться ширина дочернего.
Пример, когда у родительского элемента задана ширина 220px и 250px, представлен ниже.
Если блочному, дочернему элементу задано некое значение max-width, то вне зависимости от ширины родителя они не превысят этого значения. Также если элементу задан min-width,то он не будет меньше этого значения, даже если ширина родителя меньше. В таком случае ширина дочернего элемента будет больше родительской.
Внешние отступы оказывают влияние на ширину дочернего элемента.
CSS
.FirstChildren { width: auto; margin-left:100px } .ParentContent { width: 300px; }
Ширину дочернего блока можно увеличить. Это можно достичь за счет добавления отрицательного отступа.
CSS
.ParebtContent { width:200px; } .FirstChildren { width:auto; margin-right: -100px; }
Высота блочного элемента
Как и в случае с шириной, если высота не задана, то по умолчанию она принимает значение auto.
При этом значении, она будет меняться в зависимости от количества содержимого. В случае если её задать, то поведение блока будет таким же, каким оно было, когда задавали ширину. Это также касается минимальных и максимальных значений.
Вывод
Существование блочных элементов существенно облегчают задачу верстки страницы. Для опытного верстальщика страница представляется в виде набора прямоугольников и квадратов которыми он, оперативно манипулирует для создания своего проекта.
