курс самостоятельной работы
УРОК 11 - БЛОЧНАЯ МОДЕЛЬ
Все HTML элементы могут рассматриваться как блоки (в смысле контейнеры, оболочки и т.п.). В CSS, термин "блочная модель" используется, когда говорят о дизайне и компоновке.
Блочная модель CSS - это по существу контейнер (оболочка), который вмещает (оборачивает) HTML элементы, и состоит из: полей, границ, отступов и фактического содержимого.
Блочная модель позволяет нам устанавливать границу вокруг элементов и располагать элементы по отношению к другим элементам.
Изображение ниже иллюстрирует блочную модель:
Поля
Границы
Отступы
Содержание
Объяснение различных частей:
Поля - создают пространство вокруг границы. Поля не имеют фоновых цветов, они полностью прозрачны;
Граница - граница идет вокруг отступов и содержания. Цвет границы определяется цветом фона блока;
Отступы - создают пространство вокруг содержания. На отступы влияет фоновый цвет блока;
Содержание - содержание блока, где располагается текст, изображения и т.п.
Для того чтобы установить ширину и высоту элемента корректно во всех браузерах, вам необходимо знать, как работает блочная модель.
Ширина и высота элемента
Важно: Когда вы указываете свойства ширины (width) и высоты (height) элемента в CSS, вы только устанавливаете ширину и высоту области содержания. Для того чтобы узнать полный размер элемента, вы должны также прибавить отступы, границу и поля.
Общая ширина элемента в примере ниже равна 300px.
Пример:
width:250px;
padding:10px;
border:5px solid gray;
margin:10px;
Проведем арифметический расчет:
250px (ширина)
+ 20px (левый и правый отступы)
+ 10px (левая и правая границы)
+ 20px (левое и правое поля)
= 300px
Предположим, что у вас есть только 250px пространства. Давайте сделаем элемент с общей шириной в 250px:
width:220px;
margin:0px;
нажмите чтобы увидеть результат
Общая ширина элемента всегда должна вычисляться так:
Общая ширина элемента = собственно ширина (содержания) + левый отступ + правый отступ + левая граница + правая граница + левое поле + правое поле.
Общая высота элемента всегда должна вычисляться так:
Общая высота элемента = собственно высота (содержания) + верхний отступ + нижний отступ + верхняя граница + нижняя граница + верхнее поле + нижнее поле.
Проблемы совместимости браузеров
Если вы проверяли предыдущий пример в Internet Explorer, вы увидели, что общая ширина не была точно равна 250px.
IE8 и более ранние версии включают отступы и границы в ширину, когда свойство width установлено, пока не объявлен тип документа DOCTYPE.
Чтобы устранить эту проблему, просто добавьте 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
{
}
</style>
</head>