Войти
Блочная модель CSS В веб-разработке, блочная модель CSS относится к тому, как элементы HTML моделируются в движках браузера и как размеры этих элементов HTML выводятся из свойств CSS. Это фундаментальная концепция для создания веб-страниц HTML. Руководящие принципы блочной модели описаны в веб-стандартах Консорциума Всемирной паутины (W3C), в частности, в Рабочей группе CSS. На протяжении большей части конца 1990-х и начала 2000-х годов в основных браузерах существовали нестандартные реализации блочной модели. С появлением CSS2, в котором появилось свойство box-sizing, проблема в основном была решена.
Спецификация каскадных таблиц стилей (CSS) описывает, как элементы веб-страниц отображаются в графических браузерах. Раздел 4 спецификации CSS1 определяет «модель форматирования», которая дает элементы уровня блока, такие как pи цитата, ширину и высоту, а также три уровня окружающих их блоков: отступы, границы и поля. Хотя в спецификации явно не используется термин «блочная модель », этот термин стал широко использоваться веб-разработчиками и поставщиками веб-браузеров.
Все элементы HTML могут рассматриваться как «блоки», включая тег div, тег pили тег. Каждый из этих блоков имеет пять изменяемых размеров:
высотаи ширинаописывают размеры фактического содержимого блока (текст, изображения,...)отступописывает пространство между этим содержимым и границей блокаграницапредставляет собой линию любого типа (сплошную, пунктирную, пунктирную...) вокруг рамки, если присутствуетполе- это пространство вокруг границыСогласно спецификации CSS1, выпущенной W3C в 1996 году и пересмотренной в 1999 году, когда ширина или Высота явно указывается для любого элемента уровня блока, она должна определять только ширину или высоту видимого элемента с добавлением отступов, границ и полей после этого. До CSS3 эта модель блока была известна как модель блока W3C, в CSS3 она известна как блок содержимого.
. Таким образом, общая ширина блока составляет левое поле.+ левый край+ левый отступ+ ширина+ правый отступ+ правый край+ правое поле. Точно так же общая высота блока равна top-margin+ top-border+ top-padding+ height+ . bottom-padding+ bottom-border+ bottom-margin.
Например, следующий код CSS
.myClass {width: 200px; высота: 100 пикселей; отступ: 10 пикселей; граница: сплошная черная 10 пикселей; маржа: 10 пикселей; }будет указывать размеры бокса каждого блока, принадлежащего myClass. Более того, каждый такой блок будет иметь общую высоту 160 пикселей и ширину 260 пикселей.
CSS3 представил в стандарте блочную модель Internet Explorer, известную как border-box.
Разница в том, как ширина интерпретируется между W3C и блочные модели Internet Explorer До HTML 4 и CSS очень немногие элементы HTML поддерживали и границу, и отступ, поэтому определение ширины и высоты элемента не было очень спорным. Однако он варьировался в зависимости от элемента. Атрибут HTML width таблицы определяет ширину таблицы, включая ее границу. С другой стороны, атрибут HTML width изображения определяет ширину самого изображения (внутри любой границы). Единственным элементом, который поддерживал заполнение в те первые дни, была ячейка таблицы. Ширина ячейки была определена как «рекомендуемая ширина содержимого ячейки в пикселях, исключая заполнение ячейки».
В 1996 году CSS ввел поля, границу и заполнение для многих других элементов. Он принял ширину определения по отношению к содержимому, границам, полям и отступам, аналогичную ширине ячейки таблицы. С тех пор это стало известно как коробочная модель W3C.
В то время очень немногие производители браузеров реализовали коробочную модель W3C в точности. Два основных браузера того времени, Netscape 4.0 и Internet Explorer 4.0 определяли ширину и высоту как расстояние от границы до границы. Это было названо традиционной или блочной моделью Internet Explorer.
Internet Explorer в «режиме совместимости » включает содержимое, отступы и границы в пределах указанной ширины или высоты; это приводит к более узкому или более короткому отображению окна, чем при стандартном поведении.
Поведение блочной модели Internet Explorer часто считалось ошибкой из-за того, как более ранние версии Internet Explorer обрабатывает блочную модель или размер элементов на веб-странице, что отличается от стандартного способа, рекомендованного W3C для каскадных таблиц стилей язык. Начиная с версии Internet Explorer 6, браузер поддерживает альтернативный режим визуализации (называемый «режимом соответствия стандартам»), который устраняет это несоответствие. Однако из соображений обратной совместимости все версии по-прежнему ведут себя обычным нестандартным образом по умолчанию (см. режим совместимости ). Internet Explorer для Mac не подвержен этому нестандартному поведению.
Internet Explorer версий 6 и более поздних версий не подвержены этой ошибке, если страница содержит определенные HTML объявления типов документов. Эти версии сохраняют ошибочное поведение в режиме совместимости по причинам обратной совместимости. Например, срабатывает режим причуд:
Были разработаны различные обходные пути, чтобы заставить Internet Explorer версии 5 и более ранних отображать веб-страницы с использованием блочной модели W3C. Эти обходные пути обычно используют не связанные с этим ошибки в обработке селектора CSS в Internet Explorer, чтобы скрыть определенные правила от браузера. Самым известным из этих обходных путей является «взлом модели коробки», разработанный Тантеком Челиком, бывшим сотрудником Microsoft, который разработал эту идею, работая над Internet Explorer для Macintosh. Он включает в себя определение объявления ширины для Internet Explorer для Windows, а затем его замену другим объявлением ширины для браузеров, совместимых с CSS. Это второе объявление скрыто от Internet Explorer для Windows из-за использования других ошибок в способе анализа правил CSS. Реализация этих «хаков» CSS еще больше осложнилась публичным выпуском Internet Explorer 7, в котором были исправлены некоторые проблемы, но не другие, что приводило к нежелательным результатам на страницах, использующих эти хаки.
Хаки блочной модели оказались ненадежными, поскольку полагаются на ошибки в поддержке CSS браузеров, которые могут быть исправлены в более поздних версиях. По этой причине некоторые веб-разработчики вместо этого рекомендовали либо избегать указания ширины и заполнения для одного и того же элемента, либо использовать условный комментарий и / или фильтры CSS, чтобы обойти ошибку блочной модели в старые версии Internet Explorer.
Веб-дизайнер Дуг Боуман сказал, что исходная блочная модель Internet Explorer представляет собой лучший и более логичный подход. Питер-Пол Кох приводит в пример физический блок, размеры которого всегда относятся к самому блоку, включая потенциальное заполнение, но никогда не относятся к его содержимому. Он говорит, что эта модель блока более полезна для графических дизайнеров, которые создают дизайн на основе видимой ширины блоков, а не ширины их содержимого. Берни Циммерманн говорит, что блочная модель Internet Explorer ближе к определению размеров ячеек и заполнения, используемым в табличной модели HTML.
W3C включил свойство «box-sizing» в CSS3. Когда для элемента задано box-sizing: border-box;, любое заполнение или граница элемента рисуется внутри указанной ширины и высоты, «как обычно реализовано устаревшими пользовательскими агентами HTML». Internet Explorer 8, WebKit браузеры, такие как Apple Safari 5.1+ и Google Chrome, браузеры на основе Gecko, такие как Mozilla Firefox 29.0 и новее, Opera 7.0 и новее и Konqueror 3.3.2 и новее поддерживают свойство CSS3 box-sizing. Браузеры Gecko до 29.0 поддерживают ту же функциональность с помощью специфичного для браузера свойства -moz-box-sizing. border-box- это блочная модель по умолчанию, используемая в Bootstrap framework.
