Блог Vaden Pro

Все о самостоятельном создании и продвижении сайтов

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

Дата:1.05.15 в 14:38
Раздел: 

Для опытного глаза HTML страница представляет собой набор из конструктивных блоков. Они помогают ему создать свой уникальный проект. Одними из таких вспомогательных инструментов являются блочные элементы, которые чаще всего встречаются на странице.

элементы блочного типа

Блочный элемент – это основной конструктивный элемент страницы, который можно представить в виде прямоугольника. К ним относятся: p,div, h1-h6 и так далее. Однако они имеют ряд особенностей.

Особенности блочных элементов

  1. Может иметь родителя <body> , в соответствии с правилами. К примеру, тэг <li> обязан иметь в родителях тэг <ul> или <ol>.
  2. Могут быть родителями для практически всех других элементов. Однако и тут есть свои исключения из правил,внутри тэга <p>могут находиться только строчные элементы.
  3. Им можно задавать значения width и height. Если этого не сделать, то он займёт всю область по горизонтали, а высота будет лимитироваться содержимым.
  4. У них отсутствуют ограничения на стили margin и padding. Но и тут не обошлось без исключений, к <table> padding применять нельзя.
  5. Каждый новый блок, начинается со следующей строки.

Примечание

Элементы строчного типа не могут содержать в себе блочные. С целью борьбы с неопытными верстальщиками, большинство интернет-браузеров целенаправленно отображают такое написание не правильно.

Ширина блочных элементов

Мы можем воспользоваться рядом решений для задания ширины этим элементам. Основные, из которых рассматриваются далее:

Дочернему элементу блочного типа задана фиксированная ширина

Если ширина у дочернего элемента имеет некоторое значение, то ширина родителя не будет на неё влиять (вне зависимости больше она его или меньше).

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;
}

положительный margin

Ширину дочернего блока можно увеличить. Это можно достичь за счет добавления отрицательного отступа.

CSS

.ParebtContent {
   width:200px;
}
.FirstChildren {
   width:auto;
   margin-right: -100px;
}

отрицательный margin

Высота блочного элемента

Как и в случае с шириной, если высота не задана, то по умолчанию она принимает значение auto.

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

Вывод

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

Оценок: 2 (средняя 5 из 5)

Оценка: 
Ключевые слова: 
Понравилась статья? Расскажите о ней друзьям:

Курсы по CSS (в открытом доступе)