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

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

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

С моделью Box 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. Некоторые советы будут действительно оценены.

Спасибо!

Ответ 1

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

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

Ответ 2

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

Лично я считаю, что модель ящика W3C контр-интуитивно понятна. Процитировать:

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

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

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

Ответ 3

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

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

Ответ 4

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

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

Ответ 5

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

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

Ответ 6

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