CSS Модель "коробки"

Все HTML-элементы можно рассматривать как коробки. В CSS, понятие "Модель 'коробки'" используется, когда речь идет о дизайне и верстке.

CSS Модель "коробки" по существу является коробкой, которая обтекает элементы HTML, и она состоит из: полей, границ, заполнения, и фактического содержания.

Модель "коробки" позволяет разместить рамку вокруг элементов и элементы пространства, в связи с другими элементами.

На рисунке ниже показана модель "коробки":

Объяснение различных частей:

Поля - Очищает район вокруг границы. Не имеет цвет фона, и оно полностью прозрачно
Граница - Граница, которая идет вокруг заполнения и содержания. Граница зависит от цвета фона окна
Заполнение - Очищает район вокруг содержания. Заполнение зависит от цвета фона окна
Содержание - Содержание коробки, где расположены текст и изображения

Для того, чтобы установить ширину и высоту элемента правильно во всех браузерах, вам нужно знать, как модель "коробки" работает.

Ширина и высота элемента

Важно: Когда вы определяете свойства width и height элемента с CSS, вы только указываете width и height области содержимого. Чтобы узнать полный размер элемента, необходимо также добавить padding, border и margin.

Общая ширина элемента в приведенном ниже примере 300px:

width:250px;
padding:10px;
border:5px solid gray;
margin:10px;

Давайте подсчитаем:
250px (ширина)
+ 20px (левое и правое заполнение)
+ 10px (левая и привая граница)
+ 20px (левое и правое поле)
= 300px

Представьте, что вы имеете только 250px пространства. Давайте сделаем элемент с общей шириной 250px:

Пример 1

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
     div.ex
     {
          width:220px;
          padding:10px;
          border:5px solid gray;
          margin:0px;
     }
</style>

</head>
<body>
<img src="/images/250px.gif" width="250" height="1" alt="" /><br /><br />

<div class="ex">Линия сверху шириной 250px.<br />
Полная ширина этого элемента также 250px.</div>

<p><b>Важно:</b> Этот пример не будет корректно отображаться в IE!<br />
Тем не менее, мы будем решать эту проблему в следующем примере.</p>
</body>
</html>

Результат выполнения кода выше:

Попробуйте сами

Общая ширина элемента должна всегда быть рассчитана, как это:

Общая ширина элемента = ширина + левое поле + левая граница + левое заполнение + правое поле + правая граница + правое заполнение

Общая высота элемента должна всегда быть рассчитана, как это:

Общая высота элемента = высота + верхнее поле + верхняя граница + верхнее заполнение + нижнее поле + нижняя граница + нижнее заполнение

Проблема совместимости браузеров

Если вы тестировали предыдущий пример в Internet Explorer, вы видели, что общая ширина не была точно 250px.

IE включает в ширину заполнение и границы, когда свойство width указано, если DOCTYPE не указан.

Чтобы решить эту проблему, просто добавьте DOCTYPE в код:

Пример 2

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
     div.ex
     {
          width:220px;
          padding:10px;
          border:5px solid gray;
          margin:0px;
     }
</style>
</head>
<body>
<img src="/images/250px.gif" width="250" height="1" alt="" /><br /><br />
<div class="ex">Линия сверху шириной 250px.<br />
Полная ширина этого элемента также 250px.</div>
<p><b>Примечание:</b> В этом примере мы добавили декларацию DOCTYPE (выше элемента HTML), поэтому он показывается правильно во всех браузерах.</p>
</body>
</html>

Результат выполнения кода выше:

Попробуйте сами

Была ли эта информация полезной?

Да Нет

CSS Модель "коробки"