Рейтинг@Mail.ru
УРОКИ CSS CSS3 ПРИМЕРЫ CSS СПРАВОЧНИК CSS РЕКЛАМА

CSS Урок 11 Блочная Модель


« Назад Далее »

CSS Блочная Модель

Все 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;
padding:10px;
border:5px solid gray;
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
{
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
}
</style>
</head>

Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает




« Назад Далее »
© 2011-2017 Уроки CSS
Рейтинг@Mail.ru