superposición de márgenes
Cuando escribí el código antes, no presté atención a este problema.
Sin embargo, mirando el código hace unos días, hay dos niveles de bloques adyacentes
Una de las partes de nivel de bloque anteriores escribió margin-bottom:10px
Una de las siguientes partes a nivel de bloque está escrita margin-top:10px
Estos dos se superpondrán y no fallarán al mismo tiempo.
Entonces, lo que queremos hacer es involucrar BFC
BFC : Contexto de formato de bloque [Contexto de formato de bloque]
Para crear un BFC para un elemento HTML, solo necesita cumplir una o más de las siguientes condiciones:
- El valor de flotación no es ninguno. (Flotar: izquierda o flotar: derecha)
- El valor de la posición no es estático ni relativo. (Posición: absoluta o posición: fija)
- El valor de visualización es inline-block, table-cell, flex, table-caption o inline-flex
- desbordamiento 的 值 不是 visible （desbordamiento: oculto 、 desbordamiento: desplazamiento）
Cuando ocurre la superposición:
1. Cuando ambos márgenes sean positivos, tome el máximo de los dos;
2. Cuando los márgenes sean todos valores negativos, tome el que tenga el valor absoluto mayor y luego cambie de la posición 0 en dirección negativa;
3. Cuando hay valores positivos y negativos, primero saque el valor absoluto más grande en el margen negativo y luego agréguelo al margen más grande en el valor del margen positivo.