Почему модель коробки W3C считается лучше?

Question

Почему большинство разработчиков считают блочную модель W3C лучше блочной модели, используемой Internet Explorer?

Это очень расстраивает разработку страниц, которые выглядят так, как вы хотите в Internet Explorer, но я считаю, что блочная модель W3C нелогична. Например, если поля, отступы и границы были учтены в ширине, я мог бы присвоить значения ширины всем моим столбцам, не беспокоясь о количестве столбцов и любых изменениях, которые я вносил в их отступы и поля.

С блочной моделью W3C мне нужно беспокоиться о количестве столбцов, которые у меня есть, и разработать что-то похожее на математическую формулу для вычисления правильных значений ширины при изменении полей и отступов. Изменение их значений будет сложно, особенно для сложных макетов. Рассмотрим эту небольшую рамку, которую я написал:

#content {
margin:0 auto 30px auto;
padding:0 30px 30px 30px;
width:900px;
}
    #content .column {
        float:left;
        margin:0 20px 20px 20px;
    }
    #content .first {
        margin-left:0;
    }
    #content .last {
        margin-right:0;
    }   
        .width_1-4 {                    
            width:195px;                
        }                       
        .width_1-3 {
            width:273px;                
        }
        .width_1-2 {
            width:430px;
        }
        .width_3-4 {
            width:645px;
        }
        .width_1-1 {
                    width:900px;
        }

Значения, которые я здесь присвоил, будут прерываться, если не будет трех столбцов, и поэтому поля будут 0+20+20+20+20+0, Было бы трудно изменить отступы и поля; вся моя ширина должна быть пересчитана. Если бы ширина столбца включала отступы и поля, все, что мне нужно было бы сделать, это изменить ширину, и у меня есть макет. Я меньше критикую коробочную модель и больше надеюсь понять, почему она считается лучше, так как мне трудно с ней работать.

Я делаю эту вещь неправильно? Просто кажется нелогичным использовать блочную модель W3C. Некоторые советы будут по достоинству оценены.

Спасибо!

Answer 1

Одним словом ответ - -box-sizing

Вы выбираете, как вы хотите, чтобы ваша модель коробки работала.

Answer 2

Не все считают это лучше. Чтобы извлечь цитату из Quirksmode.

Лично я нахожу коробочную модель W3C нелогичной. Процитирую себя:

Логически, поле измеряется от границы до границы. Возьмите физический ящик, любой ящик. Положите в него что-то, что будет значительно меньше коробки. Попросите кого-нибудь измерить ширину коробки. Он будет измерять расстояние между сторонами коробки ("границы"). Никто не будет думать об измерении содержимого коробки.

Веб-дизайнеры, которые создают боксы для содержания, заботятся о видимой ширине бокса, о расстоянии от границы до границы. Границы, а не содержание, являются визуальными подсказками для пользователя сайта. Никого не интересует ширина контента.

Я согласен, border-box модель имеет больше смысла (по крайней мере, для меня). Были споры по поводу оригинальной коробочной модели W3C, что привело к определению box-sizing свойство в CSS3.

Answer 3

Лично я предпочитаю, к своему случайному стыду, модель коробки IE. Как отмечено в OP, кажется, имеет больше смысла иметь заранее заданную ширину, из которой вычитаются отступы, отступы и ширину границы, чем иметь ширину, к которой они затем добавляются.

С другой стороны, я вполне могу работать с обеими моделями, все, что мне действительно нужно, - это согласованность между реализациями, какая бы реализация не была выбрана.

Answer 4

Хотя я считаю, что W3C делает это правильно большую часть времени, в данном конкретном случае я должен сказать, что блочная модель IE лучше.

Одна распространенная проблема, с которой я часто сталкиваюсь, это когда я хочу установить ширину в процентах, а также иметь отступы пикселей. Чтобы получить div для растяжения до 100% и добавить заполнение, я вынужден использовать два div вместо одного - в противном случае применение 100% к одному div на самом деле окажется больше, чем вы ожидаете после того, как будет добавлен padding. Это действительно затрудняет работу с текучими макетами.

Answer 5

Вопрос не в том, что лучше или хуже, но в том, что следует стандарту принятой организации, а что нет.

С другой стороны, вашими проблемами будет тот, кто хочет, чтобы его текст был помещен в контейнер размером 300 пикселей, расстояние до которого составляет 10 пикселей. Теперь вам придется выполнить те же вычисления, что и в вашем примере, чтобы вычислить ширина.. это тот случай, когда вы видите ту же проблему..

Answer 6

Если вы всегда используете отступы, границы и поля для рамки, IE-модель может выглядеть лучше и логичнее, но это редко так. Да, блочная модель WC3 немного сложнее, но она окупается с точки зрения возможностей и строгого контроля над макетом. Как только вы сделаете достаточно макетов с блочной моделью, вы привыкнете к этому тихо, как только вы изучите его мощь, и вы никогда не захотите даже рассматривать IE-баги как лучший способ создания веб-макетов. Поверь мне, был там.