layout - attribute - ¿Por qué el modelo de caja W3C se considera mejor?

html title attribute

Question

¿Por qué la mayoría de los desarrolladores consideran que el modelo de caja W3C es mejor que el modelo de caja utilizado por Internet Explorer?

Es muy frustrante desarrollar páginas que se vean de la manera que usted las quiere en Internet Explorer, pero el modelo de cuadro W3C me parece contraintuitivo. Por ejemplo, si los márgenes, el relleno y el borde se tienen en cuenta en el ancho, podría asignar valores de ancho a todas mis columnas sin preocuparse por la cantidad de columnas y los cambios que realice en sus márgenes y relleno.

Con el modelo de caja del W3C tengo que preocuparme por la cantidad de columnas que tengo y desarrollar algo parecido a una fórmula matemática para calcular los valores de ancho correctos al modificar los márgenes y el relleno. Cambiar sus valores sería difícil especialmente para diseños complejos. Considere este pequeño marco de trabajo que escribí:

#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;
        }

Los valores que asigné aquí flaquearán a menos que haya tres columnas, y por lo tanto los márgenes en 0+20+20+20+20+0 . Sería difícil modificar el relleno y los márgenes; mis anchos enteros tendrían que ser recalculados. Si el ancho de columna incorpora relleno y márgenes, todo lo que tendría que hacer es cambiar el ancho y tengo mi diseño. Estoy menos criticando el modelo de caja y más con la esperanza de entender por qué se considera mejor ya que me resulta difícil trabajar con él.

¿Estoy haciendo esto mal? Parece contra-intuitivo utilizar el modelo de caja de W3C. Algunos consejos serían realmente apreciados.

¡Gracias!

Answer 1

Aunque me parece que el W3C lo hace la mayor parte del tiempo, en este caso particular, debo decir que el modelo de caja de IE es superior.

Un problema común que encuentro a menudo es cuando quiero establecer el ancho para que sea un porcentaje y tener un relleno de píxeles también. Para hacer que un div se extienda al 100% y agregar relleno, me veo obligado a usar dos divs en lugar de uno: de lo contrario, aplicar el 100% en un div solo resultará en realidad más de lo esperado después de tener en cuenta el relleno. Hace que sea realmente difícil trabajar con diseños fluidos.

Answer 2

No se trata tanto de un problema que es mejor o peor, sino que sigue el estándar de una organización aceptada y que no ...

Por otro lado, de sus problemas sería alguien que quiere que su texto se envuelva dentro de un contenedor de 300 píxeles, que tiene una distancia de 10 píxeles del siguiente. Ahora tendría que hacer los mismos cálculos que su ejemplo para calcular el ancho ... es un caso de cómo ves el mismo problema ...

Answer 3

No todos lo consideran mejor. Para extraer una cita de Quirksmode .

Personalmente, el modelo de caja de W3C es intuitivo. Para citarme a mí mismo:

Lógicamente, una caja se mide de un borde a otro. Toma una caja física, cualquier caja. Pon algo en él que sea claramente más pequeño que la caja. Pida a cualquiera que mida el ancho de la caja. Él medirá la distancia entre los lados de la caja (los ''bordes''). Nadie pensará en medir el contenido de la caja.

Los diseñadores web que crean cuadros para mantener el contenido se preocupan por el ancho visible de la caja, la distancia de la frontera a la frontera. Los bordes, y no el contenido, son las señales visuales para el usuario del sitio. A nadie le interesa el ancho del contenido.

Estoy de acuerdo, el modelo de border-box tiene más sentido (al menos, me sirve). Hubo disputas sobre el modelo de caja original de W3C, que condujo a la definición de la propiedad de box-sizing en CSS3.

Answer 4

Personalmente, prefiero -para mi vergüenza ocasional- el modelo de caja de IE. Como lo señala el OP, parece tener más sentido tener un ancho predefinido a partir del cual se restan el margen, el relleno y el ancho del borde, que tener un ancho al cual se agregan .

Por otro lado, puedo trabajar con ambos modelos muy felizmente, todo lo que realmente quiero es consistencia entre las implementaciones, cualquiera que sea la implementación que se elija.

Answer 5

Respuesta de una palabra - -box-sizing

Usted elige cómo quiere que funcione su modelo de caja .

Answer 6

Si siempre usa relleno, borde y margen en una caja, el modelo IE puede verse mejor y más lógico, pero rara vez es el caso. Sí, el modelo de caja WC3 es un poco más complicado, pero rinde frutos en términos de posibilidades y un estricto control "to-the-pixel" sobre su diseño. Una vez que hagas suficientes diseños con el modelo de caja, te acostumbrarás bastante bien, una vez que explores su poder y nunca querrás considerar los IE-bugs como una mejor forma de hacer diseños web. Confía en mí, estado allí.