В веб - разработки , то модель блочную относится к тому, как HTML элементы моделируются в браузере двигателей и как размеры этих элементов HTML получены из CSS свойств. Это фундаментальная концепция для создания веб-страниц в формате HTML . [3] Руководящие принципы блочной модели описаны веб-стандартами Консорциума World Wide Web (W3C), в частности, Рабочей группой CSS. На протяжении большей части конца 1990-х и начала 2000-х годов в основных браузерах существовали нестандартные совместимые реализации блочной модели. С появлением в 1998 году CSS2 , который представил это box-sizing
свойство, проблема в основном была решена.
Модуль блочной модели CSS, уровень 3 | |
Родное имя | Модуль блочной модели CSS, уровень 3 |
---|---|
Статус | Снимок рекомендаций кандидата W3C |
Последняя версия | Уровень 3 22 декабря 2020 г. [1] |
Организация | Консорциум World Wide Web |
Комитет | Рабочая группа CSS |
Редакторы | |
Базовые стандарты | CSS |
Домен | CSS |
Веб-сайт | www |
Особенности
Спецификация каскадных таблиц стилей (CSS) описывает, как элементы веб-страниц отображаются в графических браузерах. Раздел 4 спецификации CSS1 определяет «модель форматирования», которая дает элементы уровня блока, такие как p
и, blockquote
ширину и высоту, а также три уровня окружающих их блоков: отступы, границы и поля. [4] Хотя в спецификации явно не используется термин «блочная модель», этот термин стал широко использоваться веб-разработчиками и поставщиками веб-браузеров.
Все элементы HTML можно рассматривать как «блоки», включая div
тег, p
тег или a
тег. Каждый из этих ящиков имеет пять изменяемых размеров:
height
иwidth
описать размеры фактического содержания окна (текст, изображения, ...)padding
описывает пространство между этим содержанием и границей окнаborder
является любой вид линии (сплошная, пунктирная, пунктирная ...) окружающие коробку, если она присутствуетmargin
пространство вокруг границы
Согласно спецификации CSS1, выпущенной W3C в 1996 г. и пересмотренной в 1999 г., когда ширина или высота явно указываются для любого элемента уровня блока, она должна определять только ширину или высоту видимого элемента с отступом, границами, и поля, примененные позже. [4] [5] До CSS3 эта блочная модель была известна как блочная модель W3C , в CSS3 она известна как content-box
.
Таким образом, общая ширина коробки составляет left-margin
+ left-border
+ left-padding
+ width
+ right-padding
+ right-border
+ right-margin
. Точно так же общая высота коробки равна top-margin
+ top-border
+ top-padding
+ height
+ bottom-padding
+ bottom-border
+ bottom-margin
.
Например, следующий код CSS
. myClass { ширина : 200 пикселей ; высота : 100 пикселей ; отступ : 10 пикселей ; граница : сплошная черная 10 пикселей ; поле : 10 пикселей ; }
будет указывать размеры блока каждого блока, принадлежащего myClass. Причем каждый такой блок будет иметь общую высоту 160 пикселей и ширину 260 пикселей.
CSS3 представил в стандарте блочную модель Internet Explorer , известную как border-box
. [6]
История
До HTML 4 и CSS очень немногие элементы HTML поддерживали как границу, так и отступы, поэтому определение ширины и высоты элемента не было очень спорным. Однако он варьировался в зависимости от элемента. Атрибут HTML width таблицы определяет ширину таблицы, включая ее границу. [7] С другой стороны, атрибут HTML width изображения определяет ширину самого изображения (внутри любой границы). [8] Единственным элементом, который поддерживал заполнение в те дни, была ячейка таблицы. Ширина ячейки была определена как «предлагаемая ширина содержимого ячейки в пикселях, исключая заполнение ячейки». [9]
В 1996 году CSS [10] представил поля, границы и отступы для многих других элементов. Он принял ширину определения по отношению к содержимому, границам, полям и отступам, аналогичную ширине ячейки таблицы. [11] С тех пор это стало известно как коробочная модель W3C .
В то время очень немногие производители браузеров реализовали коробочную модель W3C в точности. Два основных браузера того времени, Netscape 4.0 и Internet Explorer 4.0, определяли ширину и высоту как расстояние от границы до границы. [12] Это называется традиционной [13] или коробочной моделью Internet Explorer . [14]
Internet Explorer в « режиме причуд » включает содержимое, отступы и границы в пределах указанной ширины или высоты; это приводит к более узкому или более короткому рендерингу блока, чем при стандартном поведении. [15]
Окно модель Internet Explorer поведение часто рассматривается как ошибка, из - за того , каким образом в более ранних версиях Internet Explorer обрабатывать блочную модель или размеров элементов в веб - страницы, которая отличается от стандартного способа , рекомендованного W3C для каскадных таблиц стилей Язык таблиц . [16] [17] Начиная с Internet Explorer 6 , браузер поддерживает альтернативный режим визуализации (называемый «режимом соответствия стандартам»), который устраняет это несоответствие. Однако из соображений обратной совместимости все версии по-прежнему ведут себя обычным нестандартным образом (см. Режим совместимости ). Это нестандартное поведение не влияет на Internet Explorer для Mac .
Обходные пути
Internet Explorer версии 6 и более поздних версий не подвержен этой ошибке, если страница содержит определенные объявления типа HTML- документа . Эти версии сохраняют ошибочное поведение в режиме совместимости по причинам обратной совместимости. [18] Например, запускается режим причуд:
- Когда объявление типа документа отсутствует или неполное;
- Когда встречается документ HTML 3 или более ранней версии;
- Когда используется объявление типа документа HTML 4.0 Transitional или Frameset, а системный идентификатор (URI) отсутствует;
- Когда комментарий SGML или другое нераспознанное содержимое появляется перед объявлением типа документа
- Internet Explorer 6 также использует режим quirks, если объявление XML предшествует объявлению типа документа. [19]
Были разработаны различные обходные пути, чтобы заставить Internet Explorer версии 5 и более ранних отображать веб-страницы с использованием блочной модели W3C. Эти обходные пути обычно используют не связанные с этим ошибки в обработке селектора CSS в Internet Explorer, чтобы скрыть определенные правила от браузера. Самым известным из этих обходных путей является «взлом модели коробки», разработанный Тантеком Челиком , бывшим сотрудником Microsoft, который разработал эту идею, работая над Internet Explorer для Macintosh. Он включает в себя указание объявления ширины для Internet Explorer для Windows, а затем его переопределение другим объявлением ширины для браузеров, совместимых с CSS. Это второе объявление скрыто от Internet Explorer для Windows за счет использования других ошибок в способе синтаксического анализа правил CSS. Реализация этих «хаков» CSS еще больше осложнилась публичным выпуском Internet Explorer 7, в котором были исправлены некоторые проблемы, но не другие, что приводило к нежелательным результатам на страницах, использующих эти хаки. [18]
Хаки блочной модели оказались ненадежными, потому что они полагаются на ошибки в поддержке CSS браузеров, которые могут быть исправлены в более поздних версиях. По этой причине некоторые веб-разработчики вместо этого рекомендовали либо избегать указания ширины и заполнения для одного и того же элемента, либо использовать условный комментарий и / или фильтры CSS для обхода ошибки блочной модели в старых версиях Internet Explorer. [14] [20]
Поддержка коробочной модели Internet Explorer
Веб-дизайнер Дуг Боуман сказал, что исходная модель окна Internet Explorer представляет собой лучший и более логичный подход. [21] Питер-Пол Кох приводит пример физического бокса, размеры которого всегда относятся к самому блоку, включая потенциальные отступы, но никогда не относятся к его содержимому. [13] Он говорит, что эта модель блока более полезна для графических дизайнеров, которые создают дизайн на основе видимой ширины блоков, а не ширины их содержимого. [22] Берни Циммерманн говорит, что блочная модель Internet Explorer ближе к определению размеров ячеек и заполнения, используемым в табличной модели HTML. [23]
W3C включил свойство «box-sizing» в CSS3. Если box-sizing: border-box;
для элемента задано значение, любое заполнение или граница элемента рисуется внутри указанной ширины и высоты, «как обычно реализуется устаревшими пользовательскими агентами HTML». [24] 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
свойство браузера . [25] border-box
- это модель коробки по умолчанию, используемая в среде Bootstrap .
Рекомендации
- ^ a b Etemad, Elika J., ed. (22 декабря 2020 г.). "Модуль блочной модели CSS, уровень 3" . W3C . Уровень 3. Рабочая группа CSS . Проверено 9 апреля 2021 года .
- ^ а б Бос, Берт; Проуз, Антон, ред. (6 июля 2018 г.). «CSS Basic Box Model Level 3» . W3C . 31 июля 2018 г. Рабочая группа CSS . Проверено 9 апреля 2021 года .
- ^ «CSS» . Веб-документы MDN . 23 марта 2019 . Проверено 30 марта 2019 .
- ^ а б Виум Ли, Хокон ; Бос, Берт (11 января 1999 г.). «Каскадные таблицы стилей, уровень 1 § Модель форматирования» . Консорциум World Wide Web . Проверено 26 октября 2017 года .
- ^ Хокон Виум Ли ; Берт Бос (17 декабря 1996 г.). «Каскадные таблицы стилей, уровень 1» . Консорциум World Wide Web . Проверено 9 декабря +2006 .
- ^ Питер-Пауль Кох (2013). «CSS - размер коробки» . quirksmode.org . Проверено 30 марта 2019 .
- ^ Рэггетт, Дэйв (23 января 1996). «Модель таблицы HTML3» . Консорциум World Wide Web . Проверено 26 октября 2017 года .«HTML-таблицы RFC 1942» . IETF .
Ширина таблицы по умолчанию - это расстояние между текущими левым и правым полями.
- ^ Рэггетт, Дэйв; Ле Хорс, Арно; Джейкобс, Ян (24 декабря 1999 г.). «13 объектов, изображений и апплетов § Ширина и высота» . Консорциум World Wide Web . Проверено 26 октября 2017 года .
- ^ Рэггетт, Дэйв (14 января 1997 г.). «Справочная спецификация HTML 3.2» . Консорциум World Wide Web . Проверено 26 октября 2017 года .
- ^ Виум Ли, Хокон ; Бос, Берт (17 декабря 1996 г.). «Каскадные таблицы стилей, уровень 1» . Консорциум World Wide Web . Проверено 26 октября 2017 года .
- ^ Виум Ли, Хокон ; Бос, Берт (17 декабря 1996 г.). «Каскадные таблицы стилей, уровень 1» . Консорциум World Wide Web . Проверено 26 октября 2017 года .
- ^ Кох, Питер-Поль. «Доработка коробчатой модели» . XS4ALL . Проверено 26 октября 2017 года .
- ^ а б Кох, Питер-Поль. «CSS - размер коробки» . QuirksMode . Проверено 26 октября 2017 года .
- ^ а б Йоханссон, Роджер (21 декабря 2006 г.). «Internet Explorer и блочная модель CSS» . 456 Berea Street . Проверено 26 октября 2017 года .
- ^ Лэнс Сильвер (март 2001 г.). «Улучшения CSS в Internet Explorer 6» . Сеть разработчиков Microsoft . Microsoft . Проверено 24 июня 2007 года .
- ^ Шафер, Дэн (2005). HTML Utopia: проектирование без таблиц с помощью CSS . Мельбурн: Sitepoint . стр. 124 и Приложение C . ISBN 0-9579218-2-9.
- ^ Ши, Дэвид ; Молли Э. Хольцшлаг (2005). Дзен дизайна CSS . Беркли: Peachpit Press. ISBN 0-321-30347-4.
- ^ а б Маркус Мильке (26 сентября 2006 г.). «Совместимость каскадных таблиц стилей в Internet Explorer 7» . Сеть разработчиков Microsoft . Microsoft . Проверено 24 июня 2007 года . «Страницы, созданные в нестрогом режиме (причуды), не изменят поведения в IE7 и не будут затронуты сломанными фильтрами CSS. Страницы, созданные в нестрогом режиме (или« режиме причуд »), не изменят поведение в IE7».
- ^ "! DOCTYPE" . Сеть разработчиков Microsoft . Microsoft . Проверено 13 января 2007 года . «В следующих примерах показано, как использовать объявление! DOCTYPE для указания DTD, которому соответствует документ, и для переключения Internet Explorer 6 и более поздних версий в режим совместимости со стандартами».
- ^ Арве Берсвендсен (февраль 2004 г.). «CSS без взлома для IE» . Интернет-блог Арве Берсвендсена . Архивировано из оригинала 15 января 2007 года . Проверено 16 января 2007 года .
- ^ «Vorsprung durch Webstandards | Дуглас Боуман заявляет о своей любви к CSS» . Vorsprungdurchwebstandards.de. Архивировано из оригинального 14 июня 2010 года . Проверено 7 июля 2010 года .
- ^ «Vorsprung durch Webstandards | Питер-Пауль Кох заявляет о своей любви к CSS» . Vorsprungdurchwebstandards.de. Архивировано из оригинального 27 февраля 2010 года . Проверено 7 июля 2010 года .
- ^ «Просветление коробочной модели, Берни Циммерманн» . Bernzilla.com. 4 апреля 2003 года Архивировано из оригинала 27 декабря 2010 . Проверено 7 июля 2010 года .
- ^ «Модуль базового пользовательского интерфейса CSS3» . Консорциум World Wide Web .
- ^ "-моз-бокс-калибровка" . Центр разработчиков Mozilla . Mozilla . 11 апреля 2009 . Проверено 11 апреля 2009 года .
Это свойство можно использовать для имитации поведения браузеров, которые неправильно поддерживают спецификацию блочной модели CSS.
Внешние ссылки
- Спецификация коробочной модели консорциумом всемирной паутины (W3C)
- Учебник по блочной модели CSS
- Описание Тантек Челик "взлома модели коробки"
- Как заставить Internet Explorer хорошо работать с CSS - статья на about.com, в которой описаны различные способы решения проблемы блочной модели и других ошибок IE.
- Совместимость каскадных таблиц стилей в Internet Explorer 7 - статья MSDN, июль 2006 г.
- Различия модели CSS Box в Firefox и Internet Explorer - Дальнейшее объяснение различий в рендеринге между Mozilla Firefox и Internet Explorer.