CSS3 и блочная модель
13 Nov, 2008Это так мило и забавно, и связано со старыми добрыми временами, когда нужно было верстать под IE5.
Блочная модель (box model)
Думаю все, кто начинал верстать, столкнулись с тем, что модель вычисления ширины блока вместе со всякими padding и border не очень логична.
синий блок 200px на 200px — контент. А padding и border, как видно, добавлены «извне».
Такова модель w3c.
Скриншот сделан в Firebug.
Еще можно посмотреть иллюстрацию
Нет, ну правда: вы задаете колонке ширину 100 пикселей, и небольшую границу в 2 пикселя.
И, вуаля, ширина уже 104 пикселя!
Почему? Если я сказал, чтобы она была 100? =)
Для тех кто не в курсе: если это сделать в ИЕ5, то ширина блока останется 100 пикселей.
Если продавщица хочет больше пространства в коробке, она просто кладет туда меньше товара. А не увеличивает коробку волшебной палочкой. Так работает этот мир.
Вдобавок, все дизайнеры при отрисовке макетов думают майкрософтовской моделью, она интуитивна. А мы потом это верстаем.
Общепринятое пояснение: width — это не ширина «блока», а ширина его «содержимого». Что само по себе красиво в своей алогичной противоречивости. Надеюсь я применил достаточно букв, чтобы все поняли, что мне модель w3c не нравится.
Не то чтобы я винил кого-то, просто так сложилась история стандарта, просто в w3c на тот момент было слишком много технарей. Может быть разработчики броузеров даже сэкономили на этом пару строк кода. И, наверное, кому-то тогда так было проще.
Накипело, не упустил повод высказаться. ;)
Но, забавно не это.
В чем забава?
Забава в том, что на данный момент все современные броузеры (включая IE8 Beta) поддерживают свойство box-sizing. Его смысл: переключать блочную модель от W3C-шной к traditional (или от microsoft). Я сделал специальный пример, где хорошо видно, как лишь с помощью CSS в Safari, IE8, Firefox, Konqueror, Chrome и Opera можно сымитировать старую добрую блочную модель от IE5. Это правда круто, и могло бы сэкономить сотни тысяч дивов-оберток в наших верстках.И... начинают появляться посты с обсуждением новой модели. Удивительно, неужели и правда можно задавать границу в 2 пикселя, а ширина блока по прежнему будет 100! Ура! CSS3 принесла нам еще одно полезное свойство!
Блочная модель 10-летней давности возвращается!
В конце
Я уже года три не вспоминал о блочной модели, я её просто запомнил. Но всплеск интереса к «новой» удобной блочной модели меня сильно позабавил. ЭтоИ, вот просто интересно, кому-то кажется стандартная блочная модель логичной? Правда очень любопытны обоснования.
width:5px;+padding:10px;и, что тогда должно получится в ms-модели (контент длинной -5px)? 2) еще, что-то мне подсказывает, что у модели от w3 есть определенное родство с отступами в таблицах (cellpadding): в данном случае padding'ом абсолютно логично делать отступы от рамок, приплюсовывая размеры колонок. *на правах IMHO >)#comment_form #message { border:1px solid #999; height: 120px; padding: 2px; width: 100%; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -khtml-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } #comment_form #message.focus { border: 2px solid #73a6ff; }Соотвественно наonfocus()добавляется классfocus. Скриншоты: без фокуса, с фокусом, приближенное сравнение. P.S. Маленький оффтопик, было бы удобно, если бы где нибудь рядом с формой комментирования был перечислен список допустимых HTML тегов, а то вставляешь и надеешься, что вставится, а ведь отредактировать уже нельзя ;)<и>, и получается соответственно, что то типа:<blockquote>у модели от w3 есть определенное родство с отступами в таблицах (cellpadding)</blockquote>Хотя возможно это гмейловские выкрутасы )cellpadding-аи "стандартной" боксовой модели имел в виду Vii. К ширине, заданной для ячейки, отступы действительно плюсуются всегда. Но, на мой взгляд, между табличной и CSS-ной моделью есть психологическая разница. В первой мы задаем ширину для элемента (ячейки), а отступы — формально — через свойство контейнера (таблицы)! Т.е. по сути имеем аналог "обертки". Ну а когда ширина и отступы — свойства одного и того же элемента (таблицы), она ужимает свободное место внутри (пока оно есть) при неизменной ширине, не нарушая интуитивной аналогии с "коробкой продавщицы". Пресловутая же CSS-модель (akabox-sizing:content-box) ее-таки нарушает...