Учебник по CSS 3: понимание свойства box-sizing
Автор：Eve Cole
Время обновления：2009-06-12 17:54:27
Говоря об ошибках IE, печально известным примером является неправильная интерпретация «коробчатой модели»: в IE5.x и IE6/7 в режиме Quirks и граница, и отступы включаются в ширину. Это добавляет много проблем в работу интерфейсных инженеров. Необходимо учитывать каждый блок, для которого необходимо определить размер: не вызывает ли он «ошибку модели блока»?
В то же время, из-за соответствия стандартам другой группы браузеров, когда мы точно определяем поле, отображаемое в ограниченном пространстве, нам также необходимо посчитать: пространство, оставленное для него, настолько велико, без учета границы и отступов. , мы должны Какова его ширина?
Эта ситуация улучшилась в эпоху CSS3 благодаря свойству box-sizing, которое имеет два значения «content-box» и «border-box».
При определении размера окна: content-box; интерпретация модели окна браузером соответствует стандарту W3C, который мы узнали ранее;
Когда определен box-sizing: border-box;, браузер интерпретирует блочную модель так же, как IE6;
Почему этот атрибут называется «поздним»? Хотя интерпретация блочной модели в IE не соответствует спецификациям W3C, она также имеет свои преимущества: как бы вы ни меняли значения border и padding, это не приведет к изменению общего размера бокс-модели, а будет не нарушать общий макет страницы. В современных браузерах, таких как Firefox, если мы хотим изменить значение отступов, нам необходимо пересчитать ширину поля. Теперь, когда IE6 мертв, это свойство CSS уже давно назрело.
Чтобы попробовать это новое свойство, используйте -moz-box-sizing для Firefox, -webkit-box-sizing для Safari/WebKit и просто используйте box-sizing для Opera.
