Блочная модель CSS
Чтобы правильно применять CSS, необходимо иметь в голове модель того, как элементы страницы взаимодействуют друг с другом. В противном случае, вы просто случайным образом пытаетесь угадать, а затем проверяете, как элементы смещаются. Блочная модель и есть та самая модель. Она определяет, как каждый из элементов размещается на странице и как они друг с другом соотносятся.
Если вы хотите, чтобы ваш рабочий процесс был эффективным, вам нужно иметь прочные знания о том, как это работает. Поэтому потратьте время, чтобы действительно закрепить в памяти мысленную модель того, как элементы взаимодействуют друг с другом на странице.
Пункты для размышления
Постарайтесь ответить на предложенные вопросы. После выполнения задания попробуйте ответить на них ещё раз
- В чем разница между марджинами (margin) и паддингами (padding)?
- Как границы (borders) влияют на размер блока?
- Как при помощи марджинов (margin) отцентровать элемент на странице по горизонтали?
- Что значит, когда "отступы схлопнуты" (margins are collapsed)?
- Какая разница между
block
,inline-block
иinline
элементами в рамках блочной модели? - Когда необходимо задавать ширину элементов, а когда можно позволить браузеру самому это определять?
- Как тени, примененные к блоку, влияют на размер блочного элемента?
- Как вы можете проверить блочную модель элементов при помощи инструментов разработчика (Developer Tools) (полезная схема)?
Задание:
- Прочитайте про блочную модель CSS от Шея Хау (Shay Howe) (здесь так же затрагиваются вопросы позиционирования и применения свойства float).
- Прочитайте про блочную модель CSS от CSS-Tricks.
- Прочитайте про блочную модель в htmlbook на русском
Дополнительные ресурсы
Этот раздел содержит полезные ссылки на дополнительные материалы. Они не обязательны, так что расценивайте их как нечто полезное, если вы хотите поглубже погрузиться в тему.