CSS Box Model
Все HTML-элементы можно рассматривать как коробки. В CSS термин "модель коробки" используется, когда речь идет о дизайне и компоновке.
Модель CSS коробка по существу ящик, который оборачивается вокруг каждого элемента HTML. Он состоит из: полей, рамок, отступов и фактическое содержание.
На приведенном ниже рисунке показана модель коробки:
Объяснение различных частей:
- Содержание - Содержание коробки, в котором отображаются текст и изображения
- Обивка - Очищает область вокруг содержимого.Обивка является прозрачным
- Граница - Граница , которая идет вокруг дополнения и содержания
- Маржа - Очищает область за пределами границы.Маржа является прозрачным
Модель окно позволяет добавить рамку вокруг элементов, а также определить пространство между элементами.
Ширина и высота элемента
Для того, чтобы установить ширину и высоту элемента правильно во всех браузерах, вам нужно знать, как работает модель коробки.
 | Важно: При установке свойства ширины и высоты элемента с помощью CSS, вы просто установить ширину и высоту области содержимого.Для того, чтобы вычислить полный размер элемента, необходимо также добавить отступы, границы и поля. |
|---|
Предположим , мы хотим , чтобы стиль в <div> элемент , чтобы иметь общую ширину 350px:
Вот математика:
Общая ширина элемента должна рассчитываться следующим образом:
Общая ширина элемента = ширина + левый + правый обивка обивка + левая граница + правая граница + левое поле + правое поле
Общая высота элемента должна быть рассчитана следующим образом:
Общая высота элемента = высота + верхняя обивка + нижняя обивка + верхняя граница + нижняя граница + верхнее поле + нижнее поле
| Примечание для старых IE: Internet Explorer 8 и более ранних версий, заполнители и границы в width собственности. Чтобы устранить эту проблему, добавьте <!DOCTYPE html> на страницу HTML. |
|---|
Проверьте себя с упражнениями!
Упражнение 1 » Упражнение 2» Упражнение 3 » Упражнение 4»