CSS-модель блока
 | В этой статье есть несколько проблем. Пожалуйста, помогите улучшить его или обсудите эти проблемы на странице обсуждения . ( Узнайте, как и когда удалять эти шаблонные сообщения )
|
| Модуль CSS Box Model, уровень 3 | |
 Блочная модель CSS | |
| Родное имя | Модуль CSS Box Model, уровень 3 |
|---|---|
| Статус | Снимок рекомендаций кандидата W3C |
| Последняя версия | Уровень 3 22 декабря 2020 г. [1] |
| Организация | Консорциум Всемирной паутины |
| комитет | Рабочая группа CSS |
| Редакторы | |
| Базовые стандарты | CSS |
| Домен | CSS |
| Веб-сайт | www |
| Каскадные таблицы стилей |
|---|
| Концепции |
| Философия |
| Инструменты |
| Сравнения |
В веб-разработке блочная модель CSS относится к тому, как элементы HTML моделируются в движках браузера и как размеры этих элементов HTML определяются на основе свойств CSS . Это фундаментальная концепция композиции веб-страниц HTML . [3] Рекомендации по блочной модели описаны Консорциумом веб-стандартов World Wide Web (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 {
width: 200px;
height: 100px;
padding: 10px;
border: solid 10px black;
margin: 10px;
}
будет указывать размеры блока каждого блока, принадлежащего «myClass». При этом каждый такой блок будет иметь общую высоту 160 пикселей и ширину 260 пикселей.
CSS3 ввел в стандарт блочную модель Internet Explorer , известную как border-box. [6]
История
[ редактировать ]
До появления HTML 4 и CSS очень немногие элементы HTML поддерживали как границу, так и отступы, поэтому определение ширины и высоты элемента не вызывало особых споров. Однако оно варьировалось в зависимости от элемента. Атрибут ширины HTML таблицы определяет ширину таблицы, включая ее границу. [7] С другой стороны, HTML-атрибут ширины изображения определял ширину самого изображения (внутри любой границы). [8] Единственным элементом, поддерживавшим заполнение в те первые дни, была ячейка таблицы. Ширина ячейки определялась как «рекомендуемая ширина содержимого ячейки в пикселях без учета заполнения ячейки». [9]
В 1996 году ЦСС [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 или другой нераспознанный контент появляется перед объявлением типа документа.
- имеется объявление XML . Internet Explorer 6 также использует режим совместимости, если перед объявлением типа документа [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 включил в CSS3 свойство «box-sizing». Когда 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 .
Ссылки
[ редактировать ]- ^ Перейти обратно: а б Этемад, Элика Дж., изд. (22 декабря 2020 г.). «Модуль блочной модели CSS, уровень 3» . W3C . Уровень 3. Рабочая группа CSS . Проверено 9 апреля 2021 г.
- ^ Перейти обратно: а б Бос, Берт; Проуз, Антон, ред. (6 июля 2018 г.). «Базовая модель CSS-блока, уровень 3» . W3C . 31 июля 2018. Рабочая группа CSS . Проверено 9 апреля 2021 г.
- ^ «ССС» . Веб-документы MDN . 23 марта 2019 года . Проверено 30 марта 2019 г.
- ^ Перейти обратно: а б Wium Lie, Хокон ; Бос, Берт (11 января 1999 г.). «Каскадные таблицы стилей, уровень 1 § Модель форматирования» . Консорциум Всемирной паутины . Проверено 26 октября 2017 г.
- ^ Хокон Виум Ли ; Берт Бос (17 декабря 1996 г.). «Каскадные таблицы стилей, уровень 1» . Консорциум Всемирной паутины . Проверено 9 декабря 2006 г.
- ^ Питер-Пол Кох (2013). «CSS – определение размера коробки» . quirksmode.org . Проверено 30 марта 2019 г.
- ^ Рэггетт, Дэйв (23 января 1996 г.). «Табличная модель HTML3» . Консорциум Всемирной паутины . Проверено 26 октября 2017 г. «Таблицы HTML RFC 1942» . IETF .
Ширина таблицы по умолчанию — это пространство между текущими левым и правым полями.
- ^ Рэггетт, Дэйв; Ле Хорс, Арно; Джейкобс, Ян (24 декабря 1999 г.). «13 объектов, изображений и апплетов § Ширина и высота» . Консорциум Всемирной паутины . Проверено 26 октября 2017 г.
- ^ Рэггетт, Дэйв (14 января 1997 г.). «Справочная спецификация HTML 3.2» . Консорциум Всемирной паутины . Проверено 26 октября 2017 г.
- ^ Wium Lie, Хокон ; Бос, Берт (17 декабря 1996 г.). «Каскадные таблицы стилей, уровень 1» . Консорциум Всемирной паутины . Проверено 26 октября 2017 г.
- ^ Wium Lie, Хокон ; Бос, Берт (17 декабря 1996 г.). «Каскадные таблицы стилей, уровень 1» . Консорциум Всемирной паутины . Проверено 26 октября 2017 г.
- ^ Кох, Питер-Пауль. «Доработка модели коробки» . XS4ALL . Проверено 26 октября 2017 г.
- ^ Перейти обратно: а б Кох, Питер-Пауль. «CSS – определение размера коробки» . Режим причуд . Проверено 26 октября 2017 г.
- ^ Перейти обратно: а б Йоханссон, Роджер (21 декабря 2006 г.). «Internet Explorer и блочная модель CSS» . ул. Береа, 456 . Проверено 26 октября 2017 г.
- ^ Лэнс Сильвер (март 2001 г.). «Усовершенствования CSS в Internet Explorer 6» . Сеть разработчиков Microsoft . Майкрософт . Проверено 24 июня 2007 г.
- ^ Шафер, Дэн (2005). HTML-утопия: проектирование без таблиц с использованием CSS . Мельбурн: Sitepoint . стр. 124 и Приложение C. ISBN 0-9579218-2-9 .
- ^ Ши, Дэвид ; Молли Э. Хольцшлаг (2005). Дзен CSS-дизайна . Беркли: Peachpit Press. ISBN 0-321-30347-4 .
- ^ Перейти обратно: а б Маркус Мильке (26 сентября 2006 г.). «Совместимость каскадных таблиц стилей в Internet Explorer 7» . Сеть разработчиков Microsoft . Майкрософт . Проверено 24 июня 2007 г. «Страницы, созданные в нестрогом режиме (с особенностями), не изменят поведение в IE7, и на них не будут влиять сломанные фильтры CSS. Страницы, созданные в нестрогом режиме (или «режиме с особенностями»), не изменят поведение в IE7».
- ^ "!ДОКТИП" . Сеть разработчиков Microsoft . Майкрософт . Проверено 13 января 2007 г. «В следующих примерах показано, как использовать объявление !DOCTYPE для указания DTD, которому соответствует документ, и для переключения Internet Explorer 6 и более поздних версий в режим совместимости со стандартами».
- ^ Арве Берсвендсен (февраль 2004 г.). «CSS для IE без взлома» . Блог Арве Берсвендсена . Архивировано из оригинала 15 января 2007 года . Проверено 16 января 2007 г.
- ^ «Перед веб-стандартами | Дуглас Боуман признается в любви к CSS» . Vorsprungdurchwebstandards.de. Архивировано из оригинала 14 июня 2010 года . Проверено 7 июля 2010 г.
- ^ «Vorsprung durch Webstandards | Питер-Пауль Кох признается в любви к CSS» . Vorsprungdurchwebstandards.de. Архивировано из оригинала 27 февраля 2010 года . Проверено 7 июля 2010 г.
- ^ «Просвещение коробочных моделей, Берни Циммерманн» . Бернзилла.com. 4 апреля 2003 г. Архивировано из оригинала 27 декабря 2010 г. Проверено 7 июля 2010 г.
- ^ «Модуль базового пользовательского интерфейса CSS3» . Консорциум Всемирной паутины .
- ^ "-moz-box-sizing" . Центр разработчиков Mozilla . Мозилла . 11 апреля 2009 года . Проверено 11 апреля 2009 г.
Это свойство можно использовать для эмуляции поведения браузеров, которые неправильно поддерживают спецификацию блочной модели CSS.
Внешние ссылки
[ редактировать ]- Спецификация коробочной модели Консорциума Всемирной паутины (W3C)
- Учебное пособие по блочной модели CSS
- Описание Тантека Челика «взлома коробочной модели»
- Как заставить Internet Explorer хорошо работать с CSS — статья на сайте about.com, в которой описаны различные способы решения проблемы блочной модели и других ошибок IE.
- Совместимость каскадных таблиц стилей в Internet Explorer 7 — статья MSDN, июль 2006 г.
- Различия блочной модели CSS в Firefox и Internet Explorer . Дальнейшее объяснение различий в рендеринге между Mozilla Firefox и Internet Explorer.