Язык CSS
Блоки CSS.


В HTML все элементы можно разделить на два типа: блочные и строчные.
Блочные элементы визуально создают самостоятельную структурную единицу - блок. К ним можно отнести, например, элементы H1-H6, P, DIV. Такие элементы отделяются от других абзацными отступами.
Строчные элементы выводятся линейной строкой. К ним можно отнести, например, элементы I, B, U, S и другие.
В CSS модель документа представляется блоком.
Каждый элемент в дереве элементов документа представляет собой самостоятельный блок. Причем, есть блоки, структурно отделенные от остальных, а есть строчные блоки, которые могут находиться внутри структурных блоков.
Блок имеет прямоугольную форму:

Состав блока

Итак, у блока есть содержимое, например, для элемента p - это текст. Вокруг содержимого есть отступы (padding), они служат для того, чтобы текст не примыкал вплотную к границе блока. Фон отступов такой же, как и у содержимого. Затем идет граница блока (border), которая может быть как видимой, так и невидимой. Также блок имеет поля (margin), которые задают дополнительное свободное пространство вокруг блока. Фон полей прозрачный, т.е. сквозь него просвечивает фон родительского элемента. Размер блока, т.е. его ширина (width) и высота (height), определяются содержимым. И это надо запомнить: поля и отступы не учитываются в размере блока.

Попробуем на практике. Создадим html-документ с двумя параграфами.
Для того, чтобы увидеть отступы, поля и границы, зададим границу (пока не вдаваясь в подробности из чего она состоит):
p{
border:1px solid red}
Проверьте результат в браузере.


Результат в браузере:
Практика.Границы.


Попробуем на практике. Как мы уже знаем, отступы от границы задаются свойством padding, зададим его для параграфов:
p{
border:1px solid red; padding:10px}
Проверьте результат в браузере.


Результат в браузере:
Практика.Отступы.


Попробуем на практике. Теперь у нас есть отступы внутри блока. Задание полей отделит блоки друг от друга:
p{
border:1px solid red; padding:10px; margin:50px}
Проверьте результат в браузере.


Результат в браузере:
Практика.Поля.


Попробуем на практике. Наконец, зададим размеры блоков параграфов:
p{
border:1px solid red; padding:10px; margin:50px; width:400px; height:150px}
Проверьте результат в браузере.


Результат в браузере:
Практика.Размеры блока.


Таким образом, можно располагать элементы на странице так, как нам захочется. И без таблиц и обилия кода.


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


Источники:


Язык CSS. Свойства - текст. Язык CSS. Свойства - margin, padding, border.


comments powered by Disqus