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



Блочная верстка выполняется на основе тега <div></div>. Div это универсальный контейнер. Мы уже знакомы с вами с блочными элементами: <address>, <blockquote>, <div>, <form>, <fieldset>, <h1>, <div>, <ol>, <p>, <pre>, <table>, <ul>. Это не полный перечень блочных тегов, но наиболее часто используемые. Остальные можно найти в справочнике.

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

 
Блочные элементы имеют свои особенности
Блоки располагаются друг под другом. Для размещения блоков рядом нужно использовать css свойство float.
У двух блочных элементов, расположенные рядом их отступы не суммируются, а берется за основу больший из них. Это еще называют эффектом схлопывания.
На рисунке показано, что отступ 15px поглотил (схлопнул) 5px.
Блочный элемент не вставляется во внутрь строчного элемента.

Неправильная запись

<a> <h1>Заголовок</h1> </a>

Правильная запись

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

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





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


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

Строчно-блочные элементы.


Строчно-блочные элементы не имеют специального тега, но его можно задать с помощью свойство display со значением inline-block.

div { display: inline-block;}

Характеристика строчно-блочных элементов.


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



Мы рассмотрели блочные элементы, которые помогут нам при создании макетов сайта. Я вам советую посмотреть еще урок по блочным элементам в разделе "CSS начинающим".

Далее рассмотрим: Блочные макеты сайта