Блочные элементы веб-страницы

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

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

На самом деле ничего сверхъестественного здесь нет и все намного проще, чем кажется. Нужно просто знать к какому типу относится тот или иной элемент web-страницы.

Существует два основных типа элементов страницы: блочные и строчные. Каждый из них имеет свои свойства.

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

1. Что за блочные элементы такие?

Блочные элементы HTML страницы имеют форму прямоугольника. Внутри блочных элементов могут содержаться другие элементы (блочные и строчные).

К блочным элементам относятся теги: <address>, <blockquote>, <div>, <fieldset>, <form>, <h1>,...,<h6>, <hr>, <ol>, <p>, <pre>, <table>, <ul>. Полный список блочных элементов можно посмотреть здесь.

Посмотреть их характеристики и свойства Вы можете в HTML справочнике. Просто скопируйте название тега в строку поиска в левой части страницы.

Для блочных элементов характерны следующие особенности.

    • Блоки располагаются по вертикали друг под другом. Для размещения блоков рядом нужно использовать css свойство float.
    • На прилегающих сторонах элементов действует эффект схлопывания отступов. То есть, если два блочных элемента расположены рядом и имеют отступы со стороны прикосновения, то отступы не суммируются, а действует только один (больший из них).
    • Запрещено вставлять блочный элемент внутрь строчного. Например, запись:
<a>
    <h1>Заголовок</h1>
</a>

Эта запись неправильна, правильно вложить теги наоборот:

<h1>
    <a>Заголовок</a>
</h1>
  • По ширине блочные элементы занимают всё допустимое пространство.
  • Если задана ширина контента (свойство width), то ширина блока складывается из значений width, полей, границ, отступов слева и справа.
  • Высота блочного элемента вычисляется браузером автоматически, исходя из содержимого блока.
  • Если задана высота контента (свойство height), то высота блока складывается из значения height, полей, границ, отступов сверху и снизу. При превышении указанной высоты контент отображается поверх блока.
  • На блочные элементы не действуют свойства, предназначенные для строчных элементов, вроде vertical-align.
  • Текст по умолчанию выравнивается по левому краю.

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

Однако не все блочные теги можно вложить один в другой, поэтому при создании структуры HTML кода чаще всего используется тег <div> — универсальный блок. Тег <div> допустимо вкладывать один в другой, а также в него можно вкладывать любые другие блочные и строчные элементы страницы. Это можно сравнить с кирпичной кладкой. Блоки — это кирпичики и из них мы строим свой сайт.

Блочная верстка

2. Основные css свойства блочных элементов.

К блочным элементам наиболее часто применяются следующие CSS свойства:

  • width — ширина содержимого.
  • height — высота содержимого.
  • margin — внешние отступы.
  • padding — внутренние отступы (поля).
  • border — границы.
  • background — фон.
  • float — обтекание текстом.

Как их использовать, Вы можете посмотреть в CSS справочнике. Cкопируйте название свойства в строку поиска в левой части страницы.

3. Придание блочному элементу свойств строчного элемента.

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

Галерея картинок

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

Если для формирования этих секций использовать тег <div>, то он (как блочный элемент) будет каждый раз начинаться с новой строки. А для строчных элементов нельзя задать цвет фона всей секции и установить размеры.

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

Пока же остановимся на строчно-блочных элементах, которые сочетают преимущества и строчных, и блочных элементов.

В HTML нет тега, который относится к строчно-блочным элементам, но его можно определить, задав элементу css свойство display со значением inline-block.

div {
    display: inline-block;}

Характеристики таких элементов следующие:

  • Внутрь строчно-блочных элементов можно помещать текст, строчные или блочные элементы.
  • Высота элемента вычисляется в зависимости от содержимого блока.
  • Ширина элемента равна содержимому плюс значения отступов, полей и границ.
  • Несколько элементов идущих подряд располагаются на одной строке и переносятся на другую строку при необходимости. Как раз то, что нам нужно.
  • Можно выравнивать по вертикали с помощью свойства vertical-align.
  • Можно задавать ширину и высоту.
  • Отсутствует эффект схлопывания отступов.

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

Не пропустите.

 

Обновления блога:

Вы еще не читаете нашу ?
Тогда получайте новые статьи на E-mail:
Моя статья помогла Вам? Это хорошо! Теперь не нужно жадничать - поделитесь этой статьей с друзьями в социальных сетях.
Хотите быть в курсе того, что происходит на сайте? Читайте меня в Твиттере.

Комментарии к статье:
"Блочные элементы веб-страницы"

  1. Спасибо, Сергей! Статья очень полезная, а главное все доступно и ясно написано :) Только почему-то у тебя при нажатии в комментах смайлики не работает, вручную прописываю...

    • Это такие хитрые смайлы. Их перетаскивать надо :-D

      А у тебя какие смайлы стоят?

  2.  О, получилось!

  3. Александр

    Да Сергей! Владислав прав — про смайлики ИНТЕРЕСНЕЕ! 

    Секрет немудренный — сам пробовал писать уроки написания ТЕГ-ов HTML, и стилевого оформления с помощью Каскадных Таблиц, кроме глухого непонимания — ничего НЕ встретил.

    После дошло — на фоне современной подачи Интернетом любых(!) онлайн — сервисов, с генерацией любых динамических и статических скриптовых  написаний, кто будет «корпеть» над ТЕГА-ми? Мало приверженцев, писанию от руки! В свое время этим гордился! Успехов тебе автор! 1000 посетителей в сутки!  

    • Спасибо, Александр за содержательный комментарий. И Вам тоже успехов!

  4. При использовании HTML5, всё упрощается...

    • Это естественно. Прогресс не стоит на месте. И мы должны идти с ним в ногу.;)

  5. Катя

    Спасибо. Все очень понятно.