Урок 2.1 Блочные элементы

block-elements

Блочная верстка – сегодня однозначно популярней табличной, о чем мы уже с Вами говорили в Уроке 2 Блочная верстка. Но как обычно есть всегда свои спецификации, которые должен знать и учитывать каждый начинающий html верстальщик в своем нелегком деле. :)

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

Для начала выделим для себя три большие группы блоков (не учитывая блочную таблицу и ее производные):

Думаю, Вы уже встречали такие значения в сss под свойством display. Вот сегодня поговорим об одно из них.

Блочные элементы – block.

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

Важно запомнить основные свойства для блочных элементов:

В принципе, это основные свойства данных элементов, которые необходимо запомнить. Рассмотрим подробнее.

Вложенность

В блочные элементы можно вложить как блочные, так и строчные элементы:

Пример:

</pre>
<div>
<h1><a href="”#”"><span>Ссылка</span></a></h1>
</div>
<pre>

Т.е. в блочные элементы можно вложить бесконечное количество других элементов как блочных, так и строчных. Изменение стилей для других элементов (типа display:block;) не должно нарушать последовательность вложенности.

Нарушение вложенности типа <a href=”http://site.kz”><h2>ссылка</h2></a> приводит к невалидному коду и ошибке типа:

Типичные ошибки вложенности блочных элементов

Пространство блочных элементов

Что значит все доступное пространство? Давайте рассмотрим пример:

</pre>
<div>
Текст</div>
<pre>

Если не задавать параметры для блоков, то они занимают всю ширину в браузере, и Вы не увидели зеленый фон у элемента div. Почему? Вспомните, что мы говорили о ширине блочных элементов:

«Ширина блочного элемента есть все доступное пространство»

Объясняю: элемент абзаца (р) занял все пространство элемента div. Отсюда мы и не видим зеленый фон. По мере добавления текста блоки будут увеличиваться, а это есть одно из свойств элементов – высота рассчитывается исходя из содержимого блока.

Вот еще один пример для разбора:

</pre>
<div>
<h1>Текст</h1>
</div>
<pre>

Отступы у элемента абзаца (p) добавляются по умолчанию в браузере, для их удаления используйте сброс стилей css.

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

Как говорилось выше, ширина для блоков есть width + margin + padding + border;

На картинке все показано, что есть что.

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

Давайте посмотрим на исходный код примера:

</pre>
<div>
<div>Отступы у элемента абзаца (p) добавляются по умолчанию в браузере, для их удаления используйте сброс стилей css.</div>
</div>
<pre>

Давайте посчитаем ширину блока div. qwe:

width: 300px + border:5px; (граница проходит слева и справа! = 10px) + margin:10px 50px 10px 50px; (для ширины необходимы отступ слева и справа) + padding:5px 5px 5px 5px; = 420px;

Получается фактическая ширина блока div.qwe равна 420 px, что необходимо учитывать. Особенно когда делаете макет сайта.

C новой строки.

Каждый блочный элемент по умолчанию начинается с новой строки. Все просто, смотрим пример:

</pre>
<div>текст</div>
<h1>Текст</h1>
<pre>
текст

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


Теперь Вам необходимо сесть и разобраться еще раз во всем, написать похожие примеры, используя firebug посмотреть исходный код.

Надеюсь, статья была интересной и полезной. Теперь вы будете делать меньше ошибок, и будете предвидеть поведение блочных элементов.

Если Вы ждете новых статей по верстке, то советую подписаться на обновления блога ;)

На десерт сегодня матч 2010 года 11 человек против 200(!), в такой команде опасно забивать гол :)

Комментарии к статье

  • #

    Возник вопрос по расчету ширины блока. У вас на рисунке padding = 5px, значит в итоге должно получится 10 px, у вас же указанно 10px 10px. Почему?

    • #

      даже не знаю :)
      сейчас поправлю спасибо)

  • #

    Картинка не работает *SOS*

    • #

      работает) попробуйте обновить

  • #

    не выходит почему-то у меня ширина блок width: 300px + border:5px; :!:

    • #

      что именно не выходит?
      у вас получается, что
      block {
      width:300px;
      border:5px;
      }
      если padding и margin равны 0, то ширина блока 310px.

  • #

    Здравствуйте!
    Я в верстке профан, хочу сделать 1 вещь, но не особо понимаю как.
    У меня вордпресс при наведении мышки на кнопку появляется выделение кнопки, все понятно, но после перехода по кнопке выделение исчезает, то есть кнопка перестает быть выделенной (ну если только не навести на нее), а мне нужно, что бы выделенная была та кнопка, на странице которой я нахожусь в данный момент, подскажите что нужно вписать и где это в ворд пресе найти? :)
    Заранее благодарен вам за внимание и помощь.

    • #

      смотрим css псевдоселекты
      :hover – при наведении
      :active – активная (например, кнопка при нажатии)

  • #

    Спасибо за статью Вы как всегда молодцы. как раз искал про блоки…

  • #

    первая часть весьма доступно всё описано .попрактикую тогда смогу сказать как на самом деле. а за футбольчик спс .вспомнилось как во дворе с девчонками играли .примерно такая же была развесовка. мне нравилось.и воспоминания позитивные.

    • #

      Приветствую Вас, Купить авиабилеты! Не думал, что Купить авиабилеты играл/ла(?) в футбол. Может видео есть? :)
      з.ы. А видео да, классное))

    • #

      а мне и первая не очень понятна