Что такое блок? Формирование и особенности блока.

Что такое блок? Формирование и особенности блока

Ищу инфу про блочную верстку

Эта статья рассчитана на самых, что не на есть, начинающих или попросту “чайников” в блочной верстке. Сегодня речь пойдет именно о понятии формирования блочных элементов. Для самых начинающих, кто только начинает учить css верстку, тома никак нельзя пропустить эту статью-урок. Желаю удачи и интереса! Читайте…

Элементы языка HTML делятся на 2 типа: строчные и блочные. Вместе, элементы блочного типа создают блоки. В качестве примеров таких элементов можно выделить DIV, P, H1-H6. От остальных элементов они отделяются абзацными отступами.

В отличие от блочных, строчные элементы, на визуализационном уровне, не создают каких-либо определённых единиц структурного характера, а просто записываются строкой. В качестве примера: S, U,B, I и т. д

По сравнению со строчными элементами, блочные нельзя уместить в одну строку.

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

Основой блоков может служить практически любой вид информации, будь то обычный текст, картинка, видео или что-то другое. Эта основа и есть его контент. Говоря проще – содержимое.

В данном случае, текст и является содержимым блока р.

Часто, ради придания более красивого, радующего глаз вида, вокруг основы блока оставляют свободные области, которые называют поля (padding). Что-бы более наглядно продемонстрировать значение этих полей, обратите внимание на обычный, распечатанный лист формата А4. Как вы видите, текст не начинается от левого верхнего края и не заканчивается правым нижним. Благодаря этому глазам удобнее воспринимать текст (да и пальцы потом не в типографской краске).

За пределами полей располагается граница (border). Она может иметь определённую ширину, начиная от 0 и заканчивая любым другим числом, на усмотрение дизайнера, и стиль линий, который может быть как тонкой линией, так и чем-то более объёмным и несомненно привлекательным. Естественно, цвет также задаёт сам дизайнер.

Имеются и отступы (margin). Это некоторое пустое пространство, окружающее границы. Стоит заметить, что не границы, не поля, не отступы не учитываются при задании ширины. Т. е значение ширины блока подразумевает только ширину части блока, которая является информационной.

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

Информационная область: через свойство background.

Поля: также, через свойство background.

Границы: вид определяется посредством свойств границ элементов. Собственно самого фона они не имеют, а показаны через линии разных стилей.

Отступы: данная область прозрачна. Это значит, что она получает родительский фон.

Ну что ж. Вот и все инфо. Коротко и ясно о главном.


Карта сайта


Информационный сайт Webavtocat.ru