2012-02-24

Блоковая модель в CSS

вебмастеринг, css

За много лет у меня выработалась привычка использовать только те приемы CSS верстки которые дают одинаковые результаты во всех браузерах. При этом уже различия браузеров меня не сильно и волнуют - я просто не использую приемы которые могут не работать в том или ином браузере. При этом, есть вещи которые ни в коем случае нельзя делать, чтобы не усложнять себе жизнь. Одна из таких запретных вещей - никогда нельзя указывать одновременно ширину элемента вместе с padding, margin или border. Если так сделать то разверзнуться небеса и боги CSS будут гневно метать в вас молнии а демоны Interhet Explorer сделают с вами чего похуже.

Чтобы наглядно показать почему так нельзя делать я создал файлик. В нем четыре раскрашенных примера:

1. div с шириной 300 пикселей;
2. div с шириной 300 пикселей и рамкой;
3. div с шириной 300 пикселей, рамкой и паддингом;
4. div с шириной 300 пикселей, рамкой, паддингом и маржином;

Как мы видим, во всех браузерах (я использовал FF, Сhrome и IE, для простоты будем называть этот набор "всеми браузерами") картина примерно одинаковая. При этом обратите внимание - ширина 300 пикселей применяется к внутренней области HTML элемента. Т.е. если задать у элемента десятипиксельные бордер, паддинг и маржин то ширина элемента будет 360 пикслелей.

Такое поведение кажется совершенно нелогичным, но это факт - и в стандарте CSS это четко прописано. Как следствие - невозможно использовать ширину 100% вместе с паддингом, маржином или бордером - тогда элемент гарантированно вылезет за пределы своего владельца, что приведет к весьма непредсказуемым результатам. 

Но это только одна сторона медали, теперь уберем из файла DOCTYPE. Как мы знаем html файлы без DOCTYPE в Internet Explorer обрабатыватются совершенно по-другому чем с оным. Это так называемый QuirckMode или еще его называют "режим совместимости".

Во всех браузерах картинка осталась такой же. Кроме Internet Explorer.

Как мы видим не только мне блоковая модель описанная в CSS не понравилась - разработчики IE тоже посчитали её нелогичной, поэтому в ширину элемента в IE входит бордер и паддинг.

Хотя режим совместимости в браузерах используется все реже и реже указанные особенности приходится учитывать при создании страничек на HTML.

 

комментарии:

 
RSS комментариев

Для того чтобы каждый раз не представляться можно войти как зарегистрированный пользователь.

Имя*

разрешены только теги br, font, span, p, strong, u, p, blockquote, a, div, img - остальные будут безжалостно удаляться

разное (183)
howto (124)
программирование (108)
гад-же-ты (75)
мысли (42)
PHP (41)
JavaScript (39)
вебмастеринг (37)
linux (28)
гондураша (28)
юмор (25)
полезное (21)
движок (17)
Android (17)
софт (15)
деньги (14)
видео (13)
кино (13)
музыка (10)
беспредел (10)
путешествия (10)
интернет (9)
diy (9)
ztools (8)
книги (8)
умный дом (8)
занимательная физика (8)
языки (7)
хостинг (7)
Nokia 5800 (7)
lifehack (6)
css (6)
вебдизайн (6)
apple (5)
arduino (5)
связной (5)
прелоадер (5)
козлы (5)
oDesk (5)
занимательная юриспруденция (4)
кухня (4)
Python (4)
аниме (4)
svn (4)
рестораны (3)
энергия (3)
synphony (3)
software (3)
фото на документы (2)
webmastering (2)
Java (2)
Ruby on Rails (2)
спорт (2)
bash (2)
движек (2)
гитара (2)
дурдом (1)
C++ (1)
годнурас (1)
микросервисы (1)
SEO (1)
programming (1)
технологии (1)
наука (1)
сайты (1)
авторское право (1)
восстановить (1)
Поиск по блогу:

Valid XHTML 1.0 Strict