Pregunta de la entrevista: ¿Cómo entender el modelo de caja?

Al responder preguntas, aclare su forma de pensar.

1) Hay dos modelos de caja, los modelos de caja W3C y IE.

El modelo de caja definido por 1 y W3C incluye márgenes, bordes, relleno y contenido. El ancho del elemento es igual a ancho=contenido.

2. La única diferencia entre el modelo de caja de IE y el modelo de caja de W3C es el ancho del elemento, ancho = borde + relleno + contenido.

2) Comprensión del modelo de caja

El modelo de caja definido por IE es razonable, por lo que se agrega un nuevo tamaño de caja a css3, que contiene dos atributos: contenido-caja y borde. -caja.

Ancho =El contenido del elemento del cuadro de contenido (1).

(2) El ancho del elemento border-box = borde + relleno + contenido.

3) ¿Más comprensión

? Para elementos en línea, el margen superior/margen inferior no es válido para los elementos superiores e inferiores, y el margen izquierdo/margen derecho es válido.

? Para elementos adyacentes a nivel de bloque, el margen superior y el margen inferior se superponen de acuerdo con ciertas reglas.

(1) son todos números enteros y el valor del margen es el máximo de los dos.

(2) Los valores de los márgenes son todos negativos y se toma el valor mínimo.

(3) Lo positivo y lo negativo son opuestos y el valor del margen es la suma de los dos.

Además, es la comprensión de bfc.