Cómo configurar el tamaño del cuadro de div en la solución VSCode: border-box (modelo de cuadro)~
Todos los elementos HTML se pueden ver como cajas. En CSS, el término "modelo de caja" se utiliza en diseño y maquetación. El modelo de cuadro CSS es esencialmente un cuadro que encapsula los elementos HTML circundantes, incluidos márgenes, bordes, relleno y contenido real. El modelo de caja nos permite colocar elementos en el espacio entre otros elementos y los límites de los elementos circundantes. La siguiente figura ilustra el modelo de caja:
La composición del modelo de caja y las áreas correspondientes
La composición del modelo de caja:
Márgenes (distancia exterior )? -Limpiar el área fuera del borde y hacer transparentes los bordes exteriores.
¿Límite? - Bordes en el borde interior y exterior del contenido.
¿Relleno (relleno)? -Limpiar el área alrededor del contenido y hacer transparente el relleno.
¿Contenido? -El contenido del cuadro, mostrar texto e imágenes
Lo anterior es la estructura del modelo de cuadro en HTML, y cada elemento puede ser analizado por este modelo de cuadro. Durante el desarrollo, la expresión estilística de un elemento también está representada por varias partes del modelo de caja. Hay varias dimensiones de atributos correspondientes a estilos en CSS:
Ancho, alto, relleno, borde, margen. Debido a que algunos modelos de cuadro representados por estos atributos son diferentes en diferentes navegadores, se dividen en modelos de cuadro estándar y. modelo de caja extraño.
Primero, el modelo de caja estándar
Explicación: Bajo el tipo de caja estándar.
(1) Los atributos de ancho y alto en CSS representan el ancho y alto del contenido en el modelo de caja respectivamente.
(2)2) El relleno en CSS representa la parte de relleno del modelo de caja.
(3) El borde en CSS representa la parte del borde del modelo de caja.
(4) margen en 4)css representa el margen en el modelo de caja.
2. Modelo de caja extraño (es decir, modelo de caja)
Explicación: bajo el modelo de caja extraño
(1) Los atributos de ancho y alto en CSS representan el ancho. y la altura del contenido en el modelo de caja más el ancho del relleno y el borde en el modelo de caja, respectivamente.
(2)2) El relleno en CSS representa la parte de relleno del modelo de caja.
(3) El borde en CSS representa la parte del borde del modelo de caja.
(4) margen en 4)css representa el margen en el modelo de caja.
* *Resumen del párrafo: la diferencia entre el modelo de caja estándar y el modelo de caja extraño* *
Como se puede ver en lo anterior, la diferencia entre el modelo de caja estándar y el El modelo de caja extraño se refleja completamente en CSS. Los dos atributos de ancho y alto afectan el rendimiento del modelo de caja.
Modelo de caja estándar: ancho/alto = ancho/alto del contenido en CSS.
Modelo de caja extraño: ancho/alto = ancho/alto + borde de relleno para contenido en css
El resultado es:
Debido al modelo de caja estándar y el cuadro extraño Debido a la existencia del modelo, cuando el mismo código CSS actúa sobre el mismo elemento, el ancho y el alto del elemento son diferentes en navegadores con diferentes modelos de cuadro.
En tercer lugar, el modelo de caja bajo el tamaño de caja en CSS3
Sintaxis: (atributo) tamaño de caja:? (Valor de atributo) cuadro de contenido/cuadro de borde/herencia;
El impacto del tamaño del cuadro en el modelo de cuadro:
(1) Cuando el valor de "tamaño del cuadro" es " content-box ", el ancho en css es el ancho del contenido en el modelo de caja. En este punto, es consistente con el modelo de caja estándar.
(2) Cuando el valor de "box-sizing" es "border-box", el ancho en css incluye el ancho del contenido + relleno + borde en el modelo de caja. En este momento, el rendimiento es consistente con el extraño modelo de caja.
Resumen: El atributo box-sizing permite a los desarrolladores controlar si el navegador utiliza el modelo de caja estándar o el modelo de caja extraño.
Compatibilidad de tamaño de caja:
Se ha explicado todo sobre este modelo de caja.
La mejor solución: dado que la compatibilidad del tamaño de la caja es con IE8 o superior, puede usar el tamaño de la caja para configurar uniformemente el modelo de caja para todos los elementos de su proyecto que no necesitan ser compatibles con IE8 o inferior. . Recomendación personal:
* {Tamaño del cuadro: 'Border-Box'}
De esta forma, siempre que se establezca el ancho, será el ancho real de este elemento en la página. No es necesario calcular el efecto del relleno y los bordes en el ancho.
Para proyectos que necesitan ser compatibles con IE8, es necesario agregar código específico para diferentes navegadores. O evite establecer elementos de borde y relleno con un ancho específico.
Contenido relacionado:
1. El margen horizontal entre elementos de una fila es la suma de los márgenes de los dos elementos.
2. ¿Márgenes verticales entre elementos a nivel de bloque? Es decir, toma el más grande.
3. El margen entre cuadros anidados es el relleno del elemento principal + el margen del elemento secundario.
4.el margen se puede establecer en un valor negativo.
Prefijo CSS para diferentes navegadores: Elemento {
-moz-box-sizing:content box;
-WebKit-box-size:content-box ;
-o-box-sizing: cuadro de contenido
-ms-box-sizing: cuadro de contenido
Tamaño del cuadro: cuadro de contenido
p>
}
Referencia:
Estándar W3c:/CSS ref/css3-pr-box-sizing html
.