CSS фреймворк модели
- Предыдущая страница Высота/ширина CSS
- Следующая страница Контур CSS
CSS фреймворк модели
Все элементы HTML можно рассматривать как прямоугольники. В CSS, когда говорят о дизайне и макете, используется термин «модель коробки» или «коробочный модель».
Модель рамки CSS по существу представляет собой рамку, окружающую каждый элемент HTML. Она включает: внешние поля, рамку, внутренние поля и само содержимое. На рисунке ниже показана модель рамки:
Описание частей:
- Содержимое - Содержимое рамки, где отображается текст и изображения.
- Внутренние поля - Удаление области вокруг содержимого. Внутренние поля прозрачны.
- Рамка - Описывает рамку вокруг внутренних полей и содержимого.
- Внешние поля - Удаление области за границами рамки. Внешние поля прозрачны.
Модель рамки позволяет добавлять рамки вокруг элементов и определять пространство между ними.
Наиболее внутренняя часть рамки элемента - это реальное содержимое, вокруг него находятся внутренние поля. Внутренние поля представляют собой фон элемента. Края внутренних полей - это рамка. За рамкой - внешние поля, по умолчанию они прозрачны и не закрывают后面的 элементы.
Совет:Фон применяется к области, состоящей из содержимого и внутренних полей, рамок.
Внутренние поля, рамки и внешние поля являются опциональными, значение по умолчанию составляет ноль. Однако, многие элементы будут установлены стилями пользователя-agents. Эти стили можно заменить, установив margin и padding элементов в ноль. Это можно сделать по отдельности, а также использовать универсальный селектор для настройки всех элементов:
* {
margin: 0;
padding: 0;
}
В CSS width и height указывают на ширину и высоту области содержимого. Увеличение внутренних полей, рамок и внешних полей не влияет на размер области содержимого, но увеличивает общую размер рамки элемента.
Предположим, что у каждого края рамки 10 пикселей внешних полей и 5 пикселей внутренних полей. Если вы хотите, чтобы этот элемент достиг 100 пикселей, вам нужно установить ширину содержимого 70 пикселей. См. рисунок ниже:
#box {
width: 70px;
margin: 10px;
padding: 5px;
}
Совет:Внутренние поля, рамки и внешние поля могут применяться ко всем сторонам элемента, а также к отдельным сторонам.
Совет:Внешние поля могут быть отрицательными, и в многих случаях используются отрицательные внешние поля.
Пример
Демонстрация модели рамки:
div {
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
Ширина и высота элементов
Для правильной установки ширины и высоты элементов во всех браузерах, вам необходимо понимать, как работает модель рамки.
Важно:При установке свойств width и height элемента с помощью CSS, достаточно установить ширину и высоту области содержимого. Для расчета полного размера элемента необходимо добавить внутренние поля, рамки и внешние поля.
Пример
<div> Общая ширина элемента будет 350px:
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
Рассчитывается следующим образом:
320px (ширина) + 20px (левый + правый внутренние отступы) + 10px (левый + правый отступы рамки) + 0px (левый + правый внешние отступы) = 350px
Общая ширина элемента должна быть рассчитана следующим образом:
Общая ширина элемента = ширина + левый внутренний отступ + правый внутренний отступ + левый отступ рамки + правый отступ рамки + левый внешний отступ + правый внешний отступ
Общая высота элемента должна быть рассчитана следующим образом:
Общая высота элемента = высота + верхний внутренний отступ + нижний внутренний отступ + верхний отступ рамки + нижний отступ рамки + верхний внешний отступ + нижний внешний отступ
- Предыдущая страница Высота/ширина CSS
- Следующая страница Контур CSS
