Стандарт CSS гласит, что границы и отступы должны применяться поверх указанной ширины элемента. Таким образом, если у меня есть div 200px, и я применяю границы и отступы на 40px, то общая ширина будет 240px. Это имеет смысл; тем не менее, Internet Explorer на самом деле сделал все по-другому. Они приняли модель, где максимальная ширина — это то, что вы указали. Затем границы и отступы учитываются в этой ширине, уменьшая область содержимого. В результате ширина элемента никогда не превышает заявленной ширины в 200 пикселей.
Интересно, поскольку мы в основном работаем с чрезвычайно чувствительными плавающими макетами, где даже добавление границы в 1 пиксель может нарушить дизайн, я понял: правильно ли Internet Explorer это сделал?
Размер коробки
«Свойство CSS размера блока используется для изменения блочной модели CSS по умолчанию, используемой для вычисления ширины и высоты элементов. Это свойство можно использовать для эмуляции поведения браузеров, которые неправильно поддерживают спецификацию блочной модели CSS ».
Полный скринкаст
Это означает, что если вы решите имитировать оригинальную интерпретацию блочной модели Internet Explorer, вы можете это сделать. Значением по умолчанию для размера блока является «content-box». Это просто означает, что ширина и высота элемента не включают границы и отступы (или поля).
Изменяя это значение на «border-box», значения ширины и высоты включают в себя границы и отступы.
|
01
02
03
04
05
06
07
08
09
10
11
12
|
#box {
width: 200px;
height: 200px;
background: red;
padding: 10px;
border: 10px solid black;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
|
Поскольку мы объявили размер блока со значением «border-box», конечная ширина элемента #box, стилизованного выше, будет 200 пикселей.
Специально для плавающих макетов, это может сэкономить вам много головной боли! Но с учетом сказанного я все еще не определился. Что вы думаете о том, как Internet Explorer интерпретирует блочную модель?