|
Plati.ru - Магазин цифровых товаров: пин-коды для игр, интернета и IP-телефонии, электронные книги, программное обеспечение, красивые номера ICQ и многое другое. Зайди и убедись сам! |
Боксовая модель CSS
Боксовая модель
Каждый HTML элемент можно рассматривать как прямоугольный ящик (коробку). В CSS упоминают термин "боксовая модель", когда речь идет о дизайне и разметке веб-страниц.
Боксовая модель CSS — это прямоугольник, окружающий html элемент и состоящий из следующих элементов: margin, border, padding и контента.
Схематически боксовую модель можно изобразить так:
Элементы боксовой модели:
- Margin — очищает пространство вокруг границы элемента, не позволяя другим элементам приближаться к границе элемента. Можно сказать, что это "личное пространство" элемента. Margin не имеет фонового цвета и прозрачен
- Border — граница (рамка), окружающая padding и контент (содержимое). Цвет границы можно изменить
- Padding — очищает пространство вокруг контента (содержимого). Можно сказать, что это "личное пространство" контента. Padding окрашивается в цвет фона элемента.
- Содержимое — пространство для содержимого, куда помещается текст и/или изображения.
Чтобы правильно задать ширину и высоту элемента, вам надо знать, как рассчитываются размеры элементов в боксовой модели.
Высота и ширина элемента
Внимание: когда вы задаете ширину и высоту элемента с помощью CSS, вы указываете только размеры зоны содержимого. Для вычисления полного размера элемента, вам надо добавить к вашим размерам внутренние/внешние отступы и рамку.
Смотрите, в этом примере общая ширина элемента равна 300px:
Пример
width:250px;
padding:10px;
border:5px solid gray;
margin:10px;
Давайте посчитаем:
250px (width)
+ 20px (правый и левый padding)
+ 10px (правая и левая граница)
+ 20px (правый и левый margin)
= 300px
Представим себе, что у нас есть только 250 px для элемента. Давайте попробуем написать код CSS для такого элемента:
Пример
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
Общую ширину элемента можно рассчитать так:
Общая ширина элемента = width + левый padding + правый padding + правая граница + левая граница + левый margin + правый margin
Я думаю, для вас не составит труда вывести формулу для расчета общей высоты элемента.
Поддержка в браузерах
Если вы проверяли пример, приведенный выше, в Internet Explorer, вы должны были заметить, что общая ширина элемента была меньше 250px.
IE включает padding и границы в ширину, указанную вами, если не указан DOCTYPE.
Для исправления этой ошибки IE, достаточно добавить в код DOCTYPE:
Пример
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
div.ex
{
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
}
</style>
</head>
