Какое-то древнее дерьмо

Живёт тупо потому, что за хостинг уплачено на годы вперед

Семантическая верстка — советы и решения. Часть третья. Блочная модель

22 декабря 2007 · Комментариев: 14 · HTML/CSS, Рецептарий

Блочная модель

Одна из ключевых особенностей cемантической валидной верстки — использование правильной блочной модели. Рассмотрим на примере, как она работает.

html:

<div id="parent">
    <div id="element">
        Lorem ipsum…
    </div>
</div>

style.css:

#parent {
    border:1px solid red;
    }
#element {
    width:200px; /* Ширина области контента */
    margin:40px; /* Поля */
    padding:20px; /* Отступы */
    border:4px solid #CCC; /* Границы */
    background:#F2F2F2;
    }

Иллюстрация размерностей

Визуальная ширина блока 248 пикселей, несмотря на то, что четко задана ширина в 200 пикселей. Дело в том, что по спецификации CSS визуальный размер блока складывается из суммы размера области контента, величины отступов и ширины границ. Заданное нами в CSS значение ширины (width) — на самом деле ширина области контента. Отсюда мы получаем визуальную ширину блока следующим образом.

Визуальный размер блока = 200 (ширина области контента) + 40 (сумма правого и левого отступов) + 8 (сумма правой и левой границ).

Для того чтобы четко задать визуальную ширину, при написании значений размеров в CSS нужно выполнить ряд нехитрых действий. Из желаемой визуальной ширины необходимо вычесть сумму обоих отступов и сумму обеих границ. Таким образом, чтобы изобразить блок шириной 200 пиксел, необходимо задать следующее значение правила width:

width = 200 (нужная визуальная ширина блока) — 40 (сумма правого и левого отступов) — 8 (сумма правой и левой границ).

Переопределим значение правила width в CSS.

style.css:

#element {
    width:152px; /* Ширина области контента */
    margin:40px; /* Поля */
    padding:20px; /* Отступы */
    border:4px solid #CCC; /* Границы */
    }

Иллюстрация размерностей - 2

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

Неправильная блочная модель и кроссбраузерные проблемы

Даже при использовании полного правильного DOCTYPE, вы столкнетесь с ситуацией, когда блочная модель работает неправильно. Это связано с неправильной реализацией блочной модели в IE 5.x. В этом браузере визуальная ширина нашего примера вычисляется следующим образом:

Визуальная ширина блока = значению правила width.

Хотя такая модель может показаться более логичной, она не соответствует спецификации CSS.

Чтобы избежать различного отображения блоков в IE 5.x и более современных браузерах, необходимо применить хак с экранированием. Дело в том, что в CSS можно вполне законно экранировать символы (кроме A–F), и такие правила будут вполне корректно работать везде, кроме IE пятых версий. Так будет выглядеть хак, необходимый в данном примере:

ie.css:

* HTML #element {
    width:200px; /* Для пятых версий IE, некорректно обрабатывающих блочную модель */
    w\idth:152px; /* Для более старших */
    }

Для достижения такого же результата вы можете использовать и условные комментарии, подключая отдельный css-файл Internet Explorer версии 5.

Полезные ссылки

Комментариев: 14 ↓

  • WilliamKidd

    а чем “правильная” модель лучше “неправильной”?

  • admin

    Присутствием/отсутствием в стандарте.

  • WilliamKidd

    хороший ответ))
    а если сравнивать логичность и удобство, то кто победит? я слышал планируется ввести некое свойство аналогичное width в старой блочной модели, так ли это?

  • admin

    Правильная мне больше нравится. Но за четыре года что угодно могло понравиться :)

    Я сейчас удалился от вёрстки, поэтому несколько не слежу за новостями.

  • FX Poster

    Flack, а чем занимаешься, если не секрет?

  • Михаил

    WilliamKidd > я слышал планируется ввести некое свойство аналогичное width в старой блочной модели, так ли это?

    Не совсем. В CSS3 предполагается введение свойства box-sizing, явно указывающий, что указывает width – ширину по контенту или по бордеру. Есть еще свойтво -moz-box-sizing, работающее, как ясно из префикса только в Mozilla. http://quirksmode.org/css/box.html#link4

  • CCatch

    неправильной легче и быстрее)

  • Pass

    Хмм.. полезно.. по-моему так удобней..

  • Brando

    Вправду, экономия времени налицо…спасибо вам огромное!

  • George

    Спасибо большое! Прочитал, попробовал – победил!

  • Беганский Павел

    CCatch
    ну я бы не стал так уж утверждать…

  • Блессинг

    ДЕйствительно рациональный способ…я и не знал)

  • Lost Sense

    На данный момент IE5 уже умер, а все верстальщики привыкли к модели, не учитывающей отступы, так что, имхо, проблема исчерпана =)

  • mihdan

    Выровнять блочную модель для всех браузеров логичнее было бы через стили, бех хаков:

    div {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    }

Оставить комментарий