Модель CSS-блока
Модель, используемая для стилизации веб-сайтов

Модель коробки
Модуль CSS Box Model Уровень 3
Блочная модель CSS
Имя на родине
Модуль CSS Box Model Уровень 3
СтатусОбзор рекомендаций кандидатов W3C
Последняя версияУровень 3
22 декабря 2020 г. [1] (2020-12-22)
ОрганизацияКонсорциум Всемирной паутины
КомитетРабочая группа CSS
Редакторы
  • Элика Дж. Этемад [1]
  • Берт Бос [2]
  • Антон Проуз [2]
Базовые стандартыCSS
ДоменCSS
Веб-сайтwww.w3.org/TR/css-box-3/
Cascading Style Sheets
Concepts
Philosophies
Tools
Comparisons
  •  Cascading Style Sheets

В веб-разработке блочная модель CSS относится к тому, как элементы HTML моделируются в браузерных движках и как размеры этих элементов HTML выводятся из свойств CSS . Это фундаментальная концепция для композиции веб-страниц HTML . [3] Руководящие принципы блочной модели описаны веб-стандартами Консорциума Всемирной паутины (W3C), в частности, рабочей группой CSS. На протяжении большей части конца 1990-х и начала 2000-х годов в основных браузерах существовали нестандартные реализации блочной модели. С появлением CSS2 в 1998 году, который представил это box-sizingсвойство, проблема в основном была решена.

Специфика

Спецификация каскадных таблиц стилей (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]

История

Разница в интерпретации ширины между моделями W3C и Internet Explorer

До HTML 4 и CSS очень немногие элементы HTML поддерживали и границу, и отступ, поэтому определение ширины и высоты элемента не было очень спорным. Однако оно варьировалось в зависимости от элемента. Атрибут ширины HTML таблицы определял ширину таблицы, включая ее границу. [7] С другой стороны, атрибут ширины HTML изображения определял ширину самого изображения (внутри любой границы). [8] Единственным элементом, который поддерживал отступ в те ранние дни, была ячейка таблицы. Ширина ячейки определялась как «предлагаемая ширина для содержимого ячейки в пикселях, исключая отступ ячейки». [9]

В 1996 году CSS [10] ввел поля, границы и отступы для многих других элементов. Он принял определение ширины в отношении содержимого, границ, полей и отступов, аналогичное определению для ячейки таблицы. [11] С тех пор это стало известно как модель W3C box .

В то время очень немногие производители браузеров реализовали блочную модель 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 также использует режим совместимости, если перед объявлением типа документа имеется объявление 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 .

Ссылки

  1. ^ ab Etemad, Elika J., ed. (22 декабря 2020 г.). "CSS Box Model Module Level 3". W3C . Уровень 3. Рабочая группа CSS . Получено 9 апреля 2021 г. .
  2. ^ ab Bos, Bert; Prowse, Anton, ред. (6 июля 2018 г.). "CSS Basic Box Model Level 3". W3C . 31 июля 2018 г. CSS Working Group . Получено 9 апреля 2021 г. .
  3. ^ "CSS". MDN Web Docs . 23 марта 2019 г. Получено 30 марта 2019 г.
  4. ^ ab Wium Lie, Håkon ; Bos, Bert (11 января 1999 г.). "Каскадные таблицы стилей, уровень 1 § Модель форматирования". World Wide Web Consortium . Получено 26 октября 2017 г. .
  5. ^ Håkon Wium Lie ; Bert Bos (17 декабря 1996 г.). «Каскадные таблицы стилей, уровень 1». World Wide Web Consortium . Получено 9 декабря 2006 г.
  6. ^ Питер-Пол Кох (2013). "CSS – box-sizing". quirksmode.org . Получено 30 марта 2019 .
  7. ^ Раггетт, Дэйв (23 января 1996 г.). «Модель таблицы HTML3». Консорциум Всемирной паутины . Получено 26 октября 2017 г."RFC 1942 HTML Tables". IETF . Ширина таблицы по умолчанию — это пространство между текущими левым и правым полями.
  8. ^ Раггетт, Дэйв; Ле Хорс, Арно; Якобс, Ян (24 декабря 1999 г.). «13 объектов, изображений и апплетов § Ширина и высота». Консорциум Всемирной паутины . Получено 26 октября 2017 г.
  9. ^ Раггетт, Дэйв (14 января 1997 г.). "HTML 3.2 Reference Specification". World Wide Web Consortium . Получено 26 октября 2017 г.
  10. ^ Wium Lie, Håkon ; Bos, Bert (17 декабря 1996 г.). «Каскадные таблицы стилей, уровень 1». World Wide Web Consortium . Получено 26 октября 2017 г. .
  11. ^ Wium Lie, Håkon ; Bos, Bert (17 декабря 1996 г.). «Каскадные таблицы стилей, уровень 1». World Wide Web Consortium . Получено 26 октября 2017 г. .
  12. ^ Кох, Питер-Пол. "Настройка блочной модели". XS4ALL . Получено 26 октября 2017 г. .
  13. ^ ab Koch, Peter-Paul. "CSS – box-sizing". QuirksMode . Получено 26 октября 2017 г. .
  14. ^ ab Johansson, Roger (21 декабря 2006 г.). «Internet Explorer и блочная модель CSS». 456 Berea Street . Получено 26 октября 2017 г.
  15. ^ Лэнс Сильвер (март 2001 г.). "Улучшения CSS в Internet Explorer 6". Microsoft Developer Network . Microsoft . Получено 24 июня 2007 г. .
  16. ^ Шафер, Дэн (2005). HTML Utopia: Проектирование без таблиц с использованием CSS. Мельбурн: Sitepoint . С. 124 и Приложение C. ISBN 0-9579218-2-9.
  17. ^ Shea, David ; Molly E. Holzschlag (2005). Дзен CSS-дизайна. Беркли: Peachpit Press. ISBN 0-321-30347-4.
  18. ^ ab Markus Mielke (26 сентября 2006 г.). "Совместимость каскадных таблиц стилей в Internet Explorer 7". Microsoft Developer Network . Microsoft . Получено 24 июня 2007 г. .«Страницы, созданные в нестрогом режиме (quirks), не изменят своего поведения в IE7 и не будут затронуты неисправными фильтрами CSS.Страницы, созданные в нестрогом режиме (или «quirks mode»), не изменят своего поведения в IE7».
  19. ^ "!DOCTYPE". Microsoft Developer Network . Microsoft . Получено 13 января 2007 г. .«В следующих примерах показано, как использовать декларацию !DOCTYPE для указания DTD, которому соответствует документ, и для переключения Internet Explorer 6 и более поздних версий в режим соответствия стандартам».
  20. ^ Арве Берсвендсен (февраль 2004 г.). "CSS без хаков для IE". Веблог Арве Берсвендсена . Архивировано из оригинала 15 января 2007 г. Получено 16 января 2007 г.
  21. ^ "Vorsprung durch Webstandards | Дуглас Боуман заявляет о своей любви к CSS". Vorsprungdurchwebstandards.de. Архивировано из оригинала 14 июня 2010 г. Получено 7 июля 2010 г.
  22. ^ "Vorsprung durch Webstandards | Петер-Пауль Кох заявляет о своей любви к CSS". Vorsprungdurchwebstandards.de. Архивировано из оригинала 27 февраля 2010 г. Получено 7 июля 2010 г.
  23. ^ "Box Model Enlightenment, Bernie Zimmermann". Bernzilla.com. 4 апреля 2003 г. Архивировано из оригинала 27 декабря 2010 г. Получено 7 июля 2010 г.
  24. ^ "Базовый модуль пользовательского интерфейса CSS3". Консорциум Всемирной паутины .
  25. ^ "-moz-box-sizing". Центр разработчиков 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.
Retrieved from "https://en.wikipedia.org/w/index.php?title=CSS_box_model&oldid=1165348360"