Введите ваш адрес почты


sdcvoy.ru
Понравился сайт? Поделись с друзьями!
Главная » Css » Bloki-v-css

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

Чтобы лучше понять урок предлагаю вам немного отвлечься и вспомнить HTML. Если вспомните в нем различают два типа элементов — это блочные и строчные. Блочные элементы (h1-h6, p, div), в отличие от строчных (strong , em , i, b) нельзя расположить на одной строке. Они отделяются между собой абзацными отступами.

В CSS также, как и в HTML используется понятие «блоков», но в отличие от него все элементы, которые записаны в таблицу стилей имеют одинаковую структуру в виде прямоугольника. Причем все блоки имеют свои поля (свойство margin), отступы (свойство padding), границы (border). Также отдельно можно задавать размеры (ширину и высоту) с помощью свойств width и height

При верстке страницы HTML документа следует прежде всего думать какой блок, где будет расположен и постепенно наполнять их содержимым. Следует также помнить, что любой блок можно вложить в другой. Чтобы лучше понять эту структуру предлагаю рассмотреть небольшой рисунок:

Использование блочной структуры в css

Все свойства, которые вы увидели на рисунке и которые были указаны выше, мы рассмотрим отдельно в следующих уроках.



наверх