Modelo de caja CSS - caja estándar, caja extraña

1. Concepto

El modelo de caja CSS es un modelo mental utilizado por las técnicas CSS que se utilizan a menudo en el diseño web.

1. Todos los elementos de la página web tienen los siguientes cuatro atributos (utilizados para diseñar elementos) :

• contenido, el ancho y alto del elemento
• margen interior de relleno
• frontera frontera
• margen margen

2. Hay dos tipos de modelos de cajas:

• El primero es el modelo de caja estándar W3C (modelo de caja estándar)
• El segundo modelo de caja estándar de IE (modelo de caja rara)

2. La diferencia entre el ancho y la altura del modelo de caja estándar y el modelo de caja extraña

1. En el modelo de caja estándar width, heightse refiere contental ancho y alto del área de contenido

El tamaño del cuadro debajo del modelo de cuadro estándar = ancho (contenido) + relleno + borde + margen

2. En el modelo de caja extraña width, heightse refiere content + padding + borderal ancho y alto

El tamaño del cuadro debajo del modelo de cuadro extraño = ancho (contenido + borde + relleno) + margen

Tres, tamaño de caja CSS3

1. Función: box-sizing el atributo se usa para cambiar el modelo de caja

2. box-sizingLos atributos comunes de:

• box-sizing: content-boxEs el modelo de caja estándar W3C (propiedad predeterminada)
• box-sizing: border-boxEs el modelo de caja rara de IE
• box-sizing: inheritEspecifica que el valor del atributo se debe heredar del elemento padre box-sizing.