Из Википедии, бесплатной энциклопедии
Перейти к навигации Перейти к поиску

Коробочная модель CSS
Каскадные таблицы стилей
Концепции
Философии
Инструменты
Сравнения

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

Особенности [ править ]

Спецификация каскадных таблиц стилей (CSS) описывает, как элементы веб-страниц отображаются в графических браузерах. Раздел 4 спецификации CSS1 определяет «модель форматирования», которая дает элементы уровня блока, такие как pи, blockquoteширину и высоту, а также три уровня окружающих их блоков: отступы, границы и поля. [2] Хотя в спецификации явно не используется термин «блочная модель», этот термин стал широко использоваться веб-разработчиками и поставщиками веб-браузеров.

Все элементы HTML можно рассматривать как «блоки», включая divтег, pтег или aтег. Каждый из этих ящиков имеет пять изменяемых размеров:

  • heightи widthописать размеры фактического содержания окна (текст, изображения, ...)
  • paddingописывает пространство между этим содержанием и границей окна
  • borderявляется любой вид линии (сплошная, пунктирная, пунктирная ...) окружающие коробку, если она присутствует
  • marginпространство вокруг границы

Согласно спецификации CSS1, выпущенной W3C в 1996 г. и пересмотренной в 1999 г., когда ширина или высота явно указываются для любого элемента уровня блока, она должна определять только ширину или высоту видимого элемента с заполнением, границами, и поля, примененные позже. [2] [3] До 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. [4]

История [ править ]

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

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

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

В то время очень немногие производители браузеров реализовали коробочную модель W3C в точности. Два основных браузера того времени, Netscape 4.0 и Internet Explorer 4.0, определяли ширину и высоту как расстояние от границы до границы. [10] Это называется традиционной [11] или коробочной моделью Internet Explorer . [12]

Internet Explorer в « режиме причуд » включает содержимое, отступы и границы в пределах указанной ширины или высоты; это приводит к более узкому или более короткому рендерингу блока, чем при стандартном поведении. [13]

Окно модель Internet Explorer поведение часто рассматривается как ошибка, из - за того , каким образом в более ранних версиях Internet Explorer обрабатывать блочную модель или размеров элементов в веб - страницы, которая отличается от стандартного способа , рекомендованного W3C для каскадных таблиц стилей Язык таблиц . [14] [15] Начиная с Internet Explorer 6 , браузер поддерживает альтернативный режим визуализации (называемый «режимом соответствия стандартам»), который устраняет это несоответствие. Однако из соображений обратной совместимости все версии по-прежнему ведут себя обычным нестандартным образом (см. Режим совместимости ). Internet Explorer для Mac на это нестандартное поведение не влияет.

Обходные пути [ править ]

Internet Explorer версии 6 и более поздних версий не подвержен этой ошибке, если страница содержит определенные объявления типа HTML- документа . Эти версии сохраняют ошибочное поведение в режиме совместимости по причинам обратной совместимости. [16] Например, запускается режим причуд:

  • Когда объявление типа документа отсутствует или неполное;
  • Когда встречается документ HTML 3 или более ранней версии;
  • Когда используется объявление типа документа HTML 4.0 Transitional или Frameset, а системный идентификатор (URI) отсутствует;
  • Когда комментарий SGML или другое нераспознанное содержимое появляется перед объявлением типа документа
  • Internet Explorer 6 также использует режим quirks, если объявление XML предшествует объявлению типа документа. [17]

Были разработаны различные обходные пути, чтобы заставить Internet Explorer версии 5 и более ранних отображать веб-страницы с использованием блочной модели W3C. Эти обходные пути обычно используют не связанные с этим ошибки в обработке селектора CSS в Internet Explorer, чтобы скрыть определенные правила от браузера. Самым известным из этих обходных путей является «взлом модели коробки», разработанный Тантеком Челиком., бывший сотрудник Microsoft, который разработал эту идею, работая над Internet Explorer для Macintosh. Он включает в себя указание объявления ширины для Internet Explorer для Windows, а затем его переопределение другим объявлением ширины для браузеров, совместимых с CSS. Это второе объявление скрыто от Internet Explorer для Windows за счет использования других ошибок в способе синтаксического анализа правил CSS. Реализация этих «хаков» CSS еще больше осложнилась публичным выпуском Internet Explorer 7, в котором были исправлены некоторые проблемы, но не другие, что приводило к нежелательным результатам на страницах, использующих эти хаки. [16]

Хаки блочной модели оказались ненадежными, потому что они полагаются на ошибки в поддержке CSS браузеров, которые могут быть исправлены в более поздних версиях. По этой причине некоторые веб-разработчики вместо этого рекомендовали либо избегать указания ширины и заполнения для одного и того же элемента, либо использовать условный комментарий и / или фильтры CSS для обхода ошибки блочной модели в старых версиях Internet Explorer. [12] [18]

Поддержка блочной модели Internet Explorer [ править ]

Веб-дизайнер Дуг Боуман сказал, что исходная модель окна Internet Explorer представляет собой лучший и более логичный подход. [19] Питер-Пол Кох приводит пример физического бокса, размеры которого всегда относятся к самому блоку, включая потенциальное заполнение, но никогда не относятся к его содержимому. [11] Он говорит, что эта модель блока более полезна для графических дизайнеров, которые создают дизайн на основе видимой ширины блоков, а не ширины их содержимого. [20] Берни Циммерманн говорит, что блочная модель Internet Explorer ближе к определению размеров ячеек и заполнения, используемым в табличной модели HTML. [21]

W3C включил свойство «box-sizing» в CSS3. Если box-sizing: border-box;для элемента указано значение, любое заполнение или граница элемента рисуется внутри указанной ширины и высоты, «как обычно реализуется устаревшими пользовательскими агентами HTML». [22] 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свойство браузера .[23] border-box - это модель коробки по умолчанию, используемая в среде Bootstrap .

Ссылки [ править ]

  1. ^ «CSS» . Веб-документы MDN . 23 марта 2019 . Проверено 30 марта 2019 .
  2. ^ a b Виум Ли, Хокон ; Бос, Берт (11 января 1999 г.). «Каскадные таблицы стилей, уровень 1 § Модель форматирования» . Консорциум World Wide Web . Проверено 26 октября 2017 года .
  3. ^ Håkon Wium Ли ; Берт Бос (17 декабря 1996 г.). «Каскадные таблицы стилей, уровень 1» . Консорциум World Wide Web . Проверено 9 декабре +2006 .
  4. Перейти ↑ Peter-Paul Koch (2013). «CSS - размер коробки» . quirksmode.org . Проверено 30 марта 2019 .
  5. ^ Раггетт, Дэйв (23 января 1996). «Модель таблицы HTML3» . Консорциум World Wide Web . Проверено 26 октября 2017 года .«HTML-таблицы RFC 1942» . IETF . Ширина таблицы по умолчанию - это расстояние между текущими левым и правым полями.
  6. ^ Рэггетт, Дэйв; Ле Хорс, Арно; Джейкобс, Ян (24 декабря 1999 г.). «13 объектов, изображений и апплетов § Ширина и высота» . Консорциум World Wide Web . Проверено 26 октября 2017 года .
  7. ^ Раггетт, Дэйв (14 января 1997). «Справочная спецификация HTML 3.2» . Консорциум World Wide Web . Проверено 26 октября 2017 года .
  8. ^ Wium Ли, Хокон ; Бос, Берт (17 декабря 1996 г.). «Каскадные таблицы стилей, уровень 1» . Консорциум World Wide Web . Проверено 26 октября 2017 года .
  9. ^ Wium Ли, Хокон ; Бос, Берт (17 декабря 1996 г.). «Каскадные таблицы стилей, уровень 1» . Консорциум World Wide Web . Проверено 26 октября 2017 года .
  10. ^ Кох, Питер-Пол. «Доработка коробчатой ​​модели» . XS4ALL . Проверено 26 октября 2017 года .
  11. ^ а б Кох, Петр-Поль. «CSS - размер коробки» . QuirksMode . Проверено 26 октября 2017 года .
  12. ^ a b Йоханссон, Роджер (21 декабря 2006 г.). «Internet Explorer и блочная модель CSS» . 456 Berea Street . Проверено 26 октября 2017 года .
  13. ↑ Лэнс Сильвер (март 2001 г.). «Улучшения CSS в Internet Explorer 6» . Сеть разработчиков Microsoft . Microsoft . Проверено 24 июня 2007 года .
  14. ^ Шафер, Дэн (2005). HTML Utopia: проектирование без таблиц с помощью CSS . Мельбурн: Sitepoint . стр.  124 и Приложение C . ISBN 0-9579218-2-9.
  15. ^ Ши, Дэвид ; Молли Э. Хольцшлаг (2005). Дзен дизайна CSS . Беркли: Peachpit Press. ISBN 0-321-30347-4.
  16. ^ a b Маркус Мильке (26 сентября 2006 г.). «Совместимость каскадных таблиц стилей в Internet Explorer 7» . Сеть разработчиков Microsoft . Microsoft . Проверено 24 июня 2007 года . «Страницы, созданные в нестрогом режиме (причуды), не изменят поведения в IE7 и не будут затронуты сломанными фильтрами CSS. Страницы, созданные в нестрогом режиме (или« режиме причуд »), не изменят поведение в IE7».
  17. ^ "! DOCTYPE" . Сеть разработчиков Microsoft . Microsoft . Проверено 13 января 2007 года . «В следующих примерах показано, как использовать объявление! DOCTYPE для указания DTD, которому соответствует документ, и для переключения Internet Explorer 6 и более поздних версий в режим совместимости со стандартами».
  18. ^ Арв Bersvendsen (февраль 2004). «CSS без взлома для IE» . Интернет-блог Арве Берсвендсена . Архивировано из оригинала 15 января 2007 года . Проверено 16 января 2007 года .
  19. ^ "Vorsprung durch Webstandards | Дуглас Боуман заявляет о своей любви к CSS" . Vorsprungdurchwebstandards.de. Архивировано из оригинального 14 июня 2010 года . Проверено 7 июля 2010 года .
  20. ^ "Vorsprung durch Webstandards | Питер-Пол Кох заявляет о своей любви к CSS" . Vorsprungdurchwebstandards.de. Архивировано из оригинального 27 февраля 2010 года . Проверено 7 июля 2010 года .
  21. ^ "Просветление коробчатой ​​модели, Берни Циммерманн" . Bernzilla.com. 4 апреля 2003 года Архивировано из оригинала 27 декабря 2010 . Проверено 7 июля 2010 года .
  22. ^ "Модуль базового пользовательского интерфейса CSS3" . Консорциум World Wide Web .
  23. ^ "-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.