Обзор фреймворк модели CSS

CSS модель рамки (Box Model) определяет, как рамка элемента обрабатывает содержимое элемента,отступ,рамка и Отступ способа.

Обзор фреймворк модели CSS

CSS фреймворк модели

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

Совет:Фон применяется к области, состоящей из содержимого и отступов, рамок.

Отступы, рамки и отступы являются опциональными, по умолчанию значение равно нулю. Однако, многие элементы будут установлены пользователем агента стиля таблицы. Эти значения можно изменить, установив отступ и отступ элемента в ноль. Это можно сделать по отдельности, а также использовать универсальный селектор для установки всех элементов:

* {
  margin: 0;
  padding: 0;
}

В CSS, width и height указывают на ширину и высоту области содержимого. Увеличение отступов, рамок и отступов не влияет на размер области содержимого, но увеличивает общую размер рамки элемента.

Предположим, что у рамки по каждой стороне 10 пикселей отступа и 5 пикселей отступа. Если вы хотите, чтобы этот элемент-рамка достиг 100 пикселей, вам нужно установить ширину содержимого 70 пикселей. См. рисунок ниже:

Пример CSS фреймворк модели 
#box {
  width: 70px;
  margin: 10px;
  padding: 5px;
}

Совет:Отступы, рамки и отступы могут применяться ко всем сторонам элемента или к отдельным сторонам.

Совет:Отступ может быть отрицательным, и в多く случаев используется отрицательный отступ.

Совместимость браузеров

Как только для страницы был установлен правильный DTD, большинство браузеров будут отображать содержимое в соответствии с показанным на рисунке. Однако, IE 5 и 6 отображают его неправильно. В соответствии с规范ами W3C, пространство, занимаемое содержимым элемента, устанавливается свойством width, а значения padding и border вокруг содержимого рассчитываются отдельно. К сожалению, IE5.X и 6 используют свою нестандартную модель в режиме怪异模式. Свойство width в этих браузерах не является шириной содержимого, а является суммой ширины содержимого, отступов и рамки.

Хотя есть методы для решения этой проблемы. Но на данный момент лучшим решением является избежание этой проблемы. То есть, не добавлять элементам внутренний отступ с указанной шириной, а пытаться добавить внутренний отступ или внешний отступ к родительскому и дочернему элементам.

Перевод терминов

  • element: элемент.
  • padding: внутренний отступ, также его можно перевести как заполнение.
  • border: контур.
  • margin: внешний отступ, также его можно перевести как пробел или пустота.

В codew3c мыuniformно называем padding и margin внутренним отступом и внешним отступом. Пространство внутри контура称为 внутренним отступом, а пространство снаружи контура称为 внешним отступом, легко запомнить, правда:)