Что такое блочная модель в CSS.

Одно из самых главных и ключевых понятий в CSS - это понятие блочной модели документа.

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

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

По сути, любая веб-страница, которую вы будете создавать, она состоит из простых блоков. Это определенные структурные единицы, которые ее формируют.

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

Что же это за свойства?

Во-первых - это свойство width, которое отвечает за образование ширины блока. 

Далее идет свойство padding, которое отвечает за внутренние отступы этого блока от содержимого, которое в нем находится. 

Далее идет граница или рамка (свойство border).

И последним идет свойство margin, которое отвечает за внешние отступы этого блока от других блоков на веб-странице.

Каждому из этих свойств, через знак тире, может добавляться та сторона, к которой это свойство относится.

Например, если мы напишим padding-top, то внутренние отступы будут относиться к верхней части нашего блочного элемента. 

В итоге, чтобы узнать, какая итоговая ширина будет у блока, нужно сложить:

margin-left + border-left + padding-left + width + padding-right  + border-right + margin-right

Чтобы получить итоговое значение блока по высоте, нужно сложить:

margin-bottom + border-bottom + padding-bottom + height + padding-top  + border-top + margin-top

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

По сути, сочетание свойств, о которых мы с вами сейчас поговорили, и является блочной моделью документа в CSS.

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


Чтобы оставить комментарий или отчет по выполнению задания, зарегистрируйтесь на сайте.