He aquí por qué:
* Modelo de caja estándar: En el modelo de caja CSS estándar, la propiedad 'ancho' especifica el ancho del área de contenido de un elemento. Los anchos de relleno y borde se agregan * en la parte superior * de este ancho de contenido para determinar el ancho total del elemento.
* Modelo de caja de modo de peculiaridades de Internet Explorer (también conocido como "Modelo de caja rota" o el "Modelo de caja IE"): En el modo Quirks, Internet Explorer calculó el ancho total de un elemento * que incluye * relleno y bordes. Entonces, si establece `ancho:100px; relleno:10px; borde:5px; `En modo de peculiaridad, el ancho * total * del elemento sería de 100 px, y el área de contenido se reduciría para acomodar el relleno y los bordes. En un navegador compatible con estándares, el ancho total sería 100px (contenido) + 20px (relleno) + 10px (borde) =130px.
Modo de peculiaridades
El modo Quirks se activó en versiones más antiguas de Internet Explorer (específicamente, IE5.5 o más, y IE6 cuando el documento carecía de un Doctype adecuado) para representar páginas web, ya que estaban diseñadas para esos navegadores más antiguos. Esto se hizo para mantener la compatibilidad hacia atrás y evitar que los sitios web más antiguos se rompan.
Modo de navegadores y estándares modernos
Versiones modernas de Internet Explorer (IE7 y posterior), así como todos los demás navegadores importantes (Chrome, Firefox, Safari, Edge), predeterminado al modo de estándares Cuando un Doctype adecuado está presente en el documento HTML. En el modo estándar, implementan correctamente el modelo de caja CSS estándar.
propiedad CSS `box-sizing`
La propiedad CSS `box-singing` proporciona una forma de cambiar el comportamiento del modelo de caja. Cuando establezca `box-sizing:border-box;` En un elemento, se comportará como el viejo modelo de caja del modo de peculiaridad IE. Esto a menudo se usa para simplificar los cálculos de diseño y hacer que los diseños receptivos sean más fáciles de administrar.
En resumen:si bien ningún navegador moderno utilizado activamente rompe intencionalmente el modelo de caja estándar de forma predeterminada, comprender cómo Internet Explorer solía manejarlo en modo Quirks es históricamente importante. Usar `box-sizing:border-box` es una forma de lograr el comportamiento de" modelo de caja de IE "intencionalmente de una manera compatible con el navegador cruzado.