|
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>
|
Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает |
|
