Share
El estándar CSS establece que los bordes y el relleno deben aplicarse sobre el ancho especificado de un elemento. Como tal, si tengo un div de 200px y aplico un valor de 40px de bordes y relleno, el ancho total será de 240px. Esto tiene perfecto sentido; Sin embargo, Internet Explorer en realidad hizo las cosas de manera diferente. Adoptaron un modelo donde el ancho máximo es lo que usted especificó. Los bordes y el relleno se incluyen en ese ancho, reduciendo el área de contenido. Como resultado, el ancho del elemento nunca excede el ancho establecido de 200px.
Me pregunto: ¿Internet Explorer lo hizo bien? Ya que trabajamos principalmente con diseños flotantes extremadamente sensibles, donde incluso la adición de un borde de 1px puede romper el diseño.?
“La propiedad CSS de tamaño de caja se usa para alterar el modelo de caja CSS predeterminado que se usa para calcular anchos y alturas de elementos. Es posible usar esta propiedad para emular el comportamiento de los navegadores que no admiten correctamente la especificación del modelo de cuadro CSS ".
Esto significa que, si decide que quiere imitar la interpretación original del modelo de caja de Internet Explorer, puede hacerlo. El valor predeterminado para el tamaño de la caja es "cuadro de contenido". Esto simplemente significa que el ancho y la altura de un elemento no incluyen los bordes y el relleno (o los márgenes).
Al cambiar este valor a "cuadro de borde", los valores de ancho y alto entonces incluir los bordes y el relleno.
#box ancho: 200px; altura: 200px; fondo: rojo; relleno: 10px; borde: 10px negro sólido; -mano-caja de tamaño: cuadro de borde; -webkit-box-dimensionamiento: cuadro de borde; tamaño de caja: caja de borde;
Porque hemos declarado tamaño de caja con un valor de "cuadro de borde", el ancho final del elemento #box, con el estilo de arriba, será de 200 px.
¡Especialmente para diseños flotantes, esto puede ahorrarle muchos dolores de cabeza! Pero con eso dicho, todavía estoy indeciso. ¿Qué opinas de la interpretación de Internet Explorer del modelo de caja??
Accentsconagua