Блочная модель CSS

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

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

Пункты для размышления

Постарайтесь ответить на предложенные вопросы. После выполнения задания попробуйте ответить на них ещё раз

• В чем разница между марджинами (margin) и паддингами (padding)?
• Как границы (borders) влияют на размер блока?
• Как при помощи марджинов (margin) отцентровать элемент на странице по горизонтали?
• Что значит, когда "отступы схлопнуты" (margins are collapsed)?
• Какая разница между block, inline-block и inline элементами в рамках блочной модели?
• Когда необходимо задавать ширину элементов, а когда можно позволить браузеру самому это определять?
• Как тени, примененные к блоку, влияют на размер блочного элемента?
• Как вы можете проверить блочную модель элементов при помощи инструментов разработчика (Developer Tools) (полезная схема)?

Задание:

1. Прочитайте про блочную модель CSS от Шея Хау (Shay Howe) (здесь так же затрагиваются вопросы позиционирования и применения свойства float).
2. Прочитайте про блочную модель CSS от CSS-Tricks.
3. Прочитайте про блочную модель в htmlbook на русском

Дополнительные ресурсы

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

• Документация по блочной модели CSS