Cuando diseñamos una página web, a menudo nos encontramos con una situación en la que el ancho o el alto de la página web final excederá nuestro cálculo previo. En realidad, esto se debe al llamado modelo de caja CSS.
| #prueba{margin:10px;padding:10px;width:100px;height:100px;} |
Como en el código anterior, muchas veces calcularemos la posición que ocupa como ancho: 120 px, alto: 120 px, porque según el entendimiento normal, el relleno es el margen interior, que debe incluirse en el ancho, y el margen es el borde exterior. distancia, entonces ancho = margen izquierdo + margen derecho + ancho, pero la interpretación del navegador del modelo de cuadro CSS no es la misma, por lo que al final encontraremos que el ancho y alto de la página web diseñada excederá nuestro cálculos esperados y, finalmente, provocar la desalineación de la pantalla.
De hecho, no es así. El cálculo real de la posición ocupada por la prueba debería ser ancho = margen izquierdo + margen derecho + relleno izquierdo + relleno derecho + ancho, es decir, el tamaño real del ancho debería ser. ser margen interior + margen exterior +El ancho en sí, es decir, el tamaño real de la prueba debe ser 140px. El cálculo de la altura es el mismo que el cálculo del ancho.
Y si se agrega un borde a la prueba, el algoritmo de ancho y alto también debería agregar el tamaño del borde.
| #prueba{margin:10px;padding:10px;border:5px;ancho:100px;alto:100px;} |
El ancho de la prueba aquí debe ser el borde exterior + el borde interior + el borde + el ancho mismo, por lo que el ancho de la prueba es 150 px.
Como se muestra en la figura siguiente, la posición real ocupada por el ancho y el alto no es el área pequeña en sí, sino que debe llegar hasta la capa azul oscuro más externa.
