Las reglas de combinación escritas en el margen anterior son la parte más complicada del modelo de caja CSS. Porque esta parte del contenido involucra muchos conceptos que no son fáciles de entender, como espacio libre (espacio libre), flujo normal / flujo de entrada (flujo regular), BFC (contexto de formato de bloque), cuadro de línea (cuadro de línea), cuadro en línea (cuadro en línea) ), bidi (entorno bidireccional), etc.
El modelo de caja CSS no es solo 7 atributos horizontales + 7 atributos verticales:
margin
border
padding
width/height
PS piensa en el tallo de los tacones altos: "no solo el relleno, sino también el margen hoy"
El contenido relevante incluye al menos:
cuadro de contexto 与 cuadro de borde
Método de cálculo de porcentaje de relleno / margen
fondo 与 relleno / margen / borde
margen negativo
fusión de margen
El modelo de caja es la unidad básica en el modelo de formato visual y una parte esencial del modelo de diseño CSS
El modelo de caja CSS describe una caja rectangular generada para elementos en el árbol del documento y diseñada de acuerdo con el modelo de formato visual.
(Citado del modelo de 8 cajas)
Por lo tanto, el modelo de caja también es el primer nivel de abstracción establecido por CSS en la parte superior del árbol del documento, y es la parte donde el control de diseño de CSS está directamente relacionado con los elementos del documento. La consolidación de márgenes es uno de los factores que afectan directamente al formato vertical. Es necesario comprender
1. Escenario clásico En el
siguiente ejemplo, se asume que la AU no tiene una hoja de estilo predeterminada, y los atributos de estilo no declarados se toman a sus valores iniciales de acuerdo con la especificación.
Además, se asume que UA cumple con la especificación CSS
1. Fusionar márgenes entre elementos de la lista
li {
margin: 8px;
}
那么列表项之间的间距是多少？
.li-case1 li {
margin: 8px;
/* 添个上内边距 */
padding-top: 1px;
}
.li-case2 li {
margin: 8px;
/* 添个下边框 */
border-bottom: 1px solid;
}
¿Cuál es el espacio entre los elementos de la lista en case1 y case2?
2. Fusión de márgenes anidados profundos
/* 缩进表示对应文档结的构嵌套关系 */
div.outer,
div.container,
div.content,
div.inner {
margin: 10px;
min-width: 100px;
min-height: 100px;
}¿Cuál es el resultado de la representación de estos 4 divs anidados?
div.outer,
div.container,
div.content,
div.inner {
margin: 10px;
min-width: 100px;
min-height: 100px;
/* 添个border */
border: 1px solid;
}
¿ahora que?
div.outer,
div.container,
div.content,
div.inner {
margin: 10px;
/* 删掉min-width, min-height和border */
}
¿Qué te parece ahora?
3. Combinación de márgenes con brechas
div.container {
border-top: 1px solid;
background: #ccc;
margin-bottom: 60px;
}
/* 缩进表示对应文档结的构嵌套关系 */
div.float {
float: left;
width: 100px;
height: 50px;
}
div.following-float {
clear: left;
margin-top: 50px;
}
div.following-container {
color: red;
}
¿Cuál es la distancia entre la parte superior del texto rojo y la parte inferior de .following-float?
div.container {
border-top: 1px solid;
background: #ccc;
margin-bottom: 60px;
}
/* 缩进表示对应文档结的构嵌套关系 */
div.float {
float: left;
width: 100px;
height: 50px;
}
div.following-float {
clear: left;
/* 把50改成49 */
margin-top: 49px;
}
div.following-container {
color: red;
}
¿ahora que?
¿Qué tal cambiar 50 a 0 y 51? ¿Qué pasará por separado?
PD La respuesta a estas preguntas aún se desconoce por el momento, porque la Demo aún no ha comenzado a escribirse ;-) Entonces tenemos tiempo suficiente para que adivinemos con cuidado
2. Condiciones de fusión
¿Qué tipo de márgenes se fusionarán?
Los márgenes horizontales no se fusionan. Los márgenes verticales adyacentes se fusionarán, excepto en 2 casos especiales:
Los márgenes exteriores del cuadro del elemento raíz no se combinan
Si el margen superior de un elemento con un espacio es adyacente al margen inferior, su margen se fusionará con el margen vecino del siguiente hermano (elemento), pero no se fusionará con el bloque padre después de la fusión. Fusión de margen inferior
Omitir # 1. No es razonable aplicar márgenes al elemento raíz
El artículo 2 introduce un nuevo concepto llamado "liquidación". El nombre en inglés es liquidación. Parece estar relacionado con el atributo claro, pero en realidad es intuitivo. Se refiere al espacio formado por el movimiento de la posición del elemento causado por el atributo claro. Véase la Especificación CSS 9 Modelo de formato visual. Se implican dos puntos clave:
Tiene el atributo claro
Y (atributo claro) movió la posición del elemento
Si se cumplen estas dos condiciones, se dice que un elemento tiene un hueco
Nota: Si se aplica el atributo clear, la posición real del elemento no cambia. Por ejemplo, si el elemento se coloca en esa posición a través de margin-top, la posición de diseño del elemento en sí es la misma que la posición del efecto clear (es decir, el atributo clear no aporta espacio adicional Ocupación, la llamada brecha), no hay brecha. Por el contrario, si la aplicación del atributo claro hace que la posición real del elemento cambie, es decir, una parte del espacio sobre el elemento es traída por el atributo claro, incluso si hay un espacio.
Con un espacio no es suficiente, pero los márgenes superior e inferior del elemento son adyacentes (lo que significa que la altura real del elemento es 0, y no hay relleno, borde), y si se satisface al mismo tiempo, la combinación de los márgenes exteriores de este elemento será limitada: sus márgenes exteriores Solo fusionar con el margen adyacente del siguiente hermano, el resultado combinado no se fusionará con el margen inferior del bloque padre
PD: hay un boleto para desafiar la escena clásica 3 aquí, pero aún está lejos
Definición de "adyacente" ¿Cuando
dos márgenes exteriores se consideran "adyacentes"?
Todos pertenecen a cajas de nivel de bloque en flujo, en el mismo contexto de formato de bloque
No hay recuadro de línea, espacios, relleno ni bordes para separarlos
Todos pertenecen a los bordes de la caja adyacentes verticales (bordes de la caja adyacentes verticalmente)
3 frases y 4 nuevos conceptos, prioriza la profundidad
Corriente
Corriente / corriente exterior (entrada / salida ) se refiere a si un diseño de esquema de flujo convencional del elemento de posicionamiento
Continúe primero a profundidad, hay 3 tipos de esquemas de posicionamiento:
Flujo regular. Incluyendo formato de bloque, formato en línea y posicionamiento relativo
flotador. Saque de la posición de la corriente normal para moverse hacia la izquierda / derecha
Posicionamiento absoluto. Romper con la corriente regular y determinar su posición de acuerdo con su bloque contenedor
El elemento no tiene flotación (el valor de aplicación del atributo de flotación es ninguno), ni posicionamiento absoluto (el valor de aplicación del atributo de posición no es absoluto), y no es el elemento raíz, entonces se distribuye de acuerdo con el flujo regular y pertenece al elemento en el flujo, de lo contrario es Elemento de salida
Contexto de formato de bloque
flotantes, elementos absolutamente posicionados, contenedores de bloque que no son cajas de bloque (como bloques en línea, celdas de tabla y títulos de tabla) y cajas de bloque cuyo 'desbordamiento' no es 'visible' (cuando el valor ha sido (Excepto cuando se propaga a la ventana gráfica) establecerá un nuevo contexto de formato de bloque para su contenido
En un contexto de formato de bloque, los cuadros se colocan uno tras otro en dirección vertical, comenzando desde la parte superior del bloque contenedor. La distancia vertical entre dos cuadros hermanos está determinada por el atributo 'margen'
En otras palabras, si nadie crea un nuevo BFC, entonces está en el BFC actual. Al igual que el alcance JS, todos están ubicados en el alcance más externo (contexto de formato de bloque más externo) de forma predeterminada. Cuando se encuentran cuadros de nivel de bloque ordinarios, se colocan en el contexto de formato de bloque. Cuando se encuentran con especiales (flotante, absolutamente posicionado, etc.) Etc.) Simplemente cree una nueva capa de alcance (cree un nuevo contexto de formato de bloque), y los elementos que contiene se colocan en este alcance interno (nuevo contexto de formato de bloque)
Una vez que se completa el diseño, desde la perspectiva del contexto de formato, es una serie de BFC anidados, cada BFC es responsable de administrar el diseño de un conjunto de cajas de bloque (o elementos a nivel de bloque)
Nota: El contexto de formato en línea no se menciona aquí, porque no tiene mucho sentido distinguir diferentes contextos de formato en línea (en la definición de especificación, no hay una escena especial sobre el contexto de formato entre líneas). Entonces, ¿cuándo se creará un nuevo contexto de formato en línea? De acuerdo con la especificación, un nuevo contexto de formato en línea se crea solo cuando el contenedor de bloques contiene solo cuadros de nivel en línea, a diferencia de BFC, que se puede forzar explícitamente a crear
PD Para obtener más información sobre cuándo se creará un nuevo contexto de formato en línea, consulte ¿Cuándo establece un cuadro un contexto de formato en línea?
Un área rectangular que contiene cajas de la misma fila se llama caja de fila.
Una caja de línea siempre es lo suficientemente alta para contener todas las cajas que contiene.
El cuadro de línea es una representación abstracta de la línea en CSS y cada elemento de línea está en el mismo cuadro de línea. Si es demasiado largo para ajustarse y ajustarse automáticamente, se creará otro cuadro de línea para la siguiente línea. Por otro lado, el cuadro de línea no es una definición puramente abstracta, tiene un ancho y una altura, que se utilizan para determinar el diseño de la línea.
El "marco sin línea" entre los márgenes adyacentes puede entenderse simplemente como la ausencia de elementos en línea para separarlos del
límite del marco adyacente vertical. Los
cuatro escenarios siguientes satisfacen la situación de que los márgenes externos pertenecen al límite del marco adyacente vertical:
El margen superior del cuadro y el margen superior del primer elemento secundario en flujo
El margen inferior del cuadro y el margen superior del siguiente hermano en la siguiente secuencia
El margen inferior del elemento secundario en la última secuencia y el margen inferior del elemento principal cuya altura se calcula como 'automático'
Los márgenes superior e inferior del cuadro requieren que el cuadro no haya establecido un nuevo contexto de formato de bloque y que el valor calculado de 'altura mínima' sea 0, el valor calculado de 'altura' sea 0 o 'automático' y no haya elementos secundarios en la secuencia.
Parece demasiado largo. Simplifiquemos las condiciones y supongamos que todos los elementos están en la secuencia. Entonces:
Padre-hijo: el margen del elemento padre y el margen del hijo mayor
Hermanos: el margen inferior del elemento y el margen superior del hermano derecho
Padre e hijo: margen inferior de Yaoer y margen inferior del elemento principal
Self: 0 Margen superior y margen inferior del elemento de alto "vacío"
PS "Vacío" aquí se refiere al vacío de papas fritas. O no hay nada en él, o se han llevado a los niños en el exilio
En otras palabras, la definición de la posición de "márgenes adyacentes" se divide específicamente en tres situaciones: padre e hijo, hermano y yo (la combinación de los márgenes superior e inferior de sí mismo es bastante peculiar)
La re-comprensión de la combinación de márgenes "adyacentes" y externos
ha sentado las bases para el concepto anterior. Ahora integramos los puntos dispersos, y primero redefinimos "adyacentes":
Padre e hijo, hermanos o los márgenes del elemento en sí son "adyacentes" si están muy juntos
Hay otro punto clave: cerca uno del otro. Es decir, los dos márgenes exteriores no están separados por el "muro". Hay 3 tipos de "muros":
Raza: ambas partes deben estar en cajas de nivel de bloque in-stream
Creencia: estar en el mismo contexto de formato de bloque
Región: no hay cuadro de línea, espacio, margen interior ni borde entre los dos
En este punto, "adyacente" ya es muy claro, invirtamos la definición de fusión de márgenes:
Los márgenes verticales adyacentes de los elementos no raíz se fusionarán, si hay un espacio, la fusión es limitada
Restringido significa que si los márgenes superior e inferior del elemento con un espacio son adyacentes entre sí, solo se puede combinar con el margen exterior del elemento hermano y no se puede combinar con el margen inferior del elemento principal.
3. Inferencias
sobre las condiciones de fusión Según las condiciones para la fusión de márgenes, existen 8 inferencias:
Los márgenes entre un cuadro flotante y cualquier otro cuadro no se fusionarán (ni siquiera entre un cuadro flotante y sus elementos secundarios in-stream)
Los márgenes de los elementos que establecen un nuevo contexto de formato de bloque (por ejemplo, cuadros flotantes y elementos cuyo "desbordamiento" no es "visible") no se fusionarán con sus elementos secundarios de flujo
Los márgenes de los cuadros absolutamente posicionados no se fusionarán (ni siquiera con sus elementos secundarios in-stream)
Los márgenes de los cuadros de bloques en línea no se fusionarán (ni siquiera con sus elementos secundarios in-stream)
El margen inferior del elemento a nivel de bloque en la secuencia siempre se fusionará con el margen superior de su próximo hermano a nivel de bloque en la secuencia, a menos que el hermano (elemento) tenga un espacio
El margen superior del elemento a nivel de bloque en la secuencia se fusionará con el margen superior de su primer elemento secundario de nivel de bloque en secuencia, siempre que el elemento no tenga un borde superior ni un margen interno superior, y sus elementos secundarios no tengan espacios.
El margen inferior de un cuadro de nivel de bloque in-stream cuya 'altura' es 'automático' y 'altura mínima' es 0 se fusionará con el margen inferior de su último elemento secundario de nivel de bloque in-stream, siempre que el cuadro no tenga un margen inferior Margen y borde inferior, y el margen inferior de sus hijos no se fusiona con el margen superior con espacio
Los márgenes exteriores de la caja también se fusionarán, siempre que la propiedad 'min-height' sea 0, no haya un borde superior-inferior ni un margen interior superior-inferior, y la 'altura' sea 0 o 'automático', y no haya una caja de línea, entonces Los márgenes de todos los elementos secundarios de la secuencia (si los hay) se fusionarán
Resumen simplificado, pero 4 elementos:
No in-stream (posicionamiento absoluto o flotante) no fusionar
Activar la creación de un nuevo BFC (elementos flotantes, absolutamente posicionados, contenedores de bloques que no son cajas de bloques y ciertas cajas de bloques cuyo 'desbordamiento' no es 'visible') no fusionadas con elementos secundarios
Las cajas que no son de nivel de bloque (bloques en línea) no se combinan
En general, los márgenes superior e inferior de los elementos hermanos, los márgenes superior e inferior de los elementos principal y secundario, y los márgenes superior e inferior del propio elemento se fusionarán
Los primeros 3 puntos están dirigidos a las condiciones previas de "adyacente" (in-stream, mismo BFC, caja a nivel de bloque), y el cuarto punto es la paráfrasis de 4 tipos de escenas "adyacentes", y la expansión es de 8 inferencias
4. Comportamiento de fusión Después de
fusionar dos márgenes adyacentes, el margen resultante se denomina margen plegado.
PScollapsed margin se traduce deliberadamente como plegable para indicar el resultado, separado de la acción combinada
Hay 2 características de la fusión de márgenes:
Recursión: es decir, fusión profunda. Después de fusionar una vez, compruebe si los márgenes exteriores adyacentes al resultado fusionado se pueden fusionar, si es así, fusionar
Codicia: busca el resultado de fusión más amplio. Dos valores positivos de margen toman el valor máximo y dos valores negativos toman el valor máximo absoluto
Para características recursivas, la definición de "adyacente" extiende una fórmula recursiva:
El margen doblado también puede ser adyacente a otro margen, siempre que cualquier parte de su margen sea adyacente a ese margen.
La codicia está relacionada con el método de cálculo del resultado fusionado del margen, debido a que el margen permite valores negativos, la situación es un poco más complicada:
Ambos son valores positivos, encuentre directamente el máximo de los dos
Uno positivo y otro negativo, suma y suma
Ambos son negativos, encuentre el máximo del valor absoluto de los dos
P.ej:
ul {margin-bottom: -15px;}
/* 缩进表示对应文档结的构嵌套关系 */
li {margin-bottom: 20px;}
h1 {margin-top: -18px;}
Entonces la distancia vertical entre h1 y el último li es 20 + -max (| -15 |, | -18 |) = 2px
Independientemente de si el valor positivo o el valor negativo, el principio de buscar el valor máximo es hacer que el resultado de la combinación sea lo más amplio posible (un valor negativo con un valor absoluto mayor puede desplazar el contenido del elemento más lejos), es decir, codicioso.
5. Demostración en línea
Dirección de demostración : Http://ayqy.net/temp/margin-collapse.html
Las respuestas de PS están en la demostración, las explicaciones están en el código fuente
Material de referencia ¿
Cuándo establece un cuadro un contexto de formato en línea ?: Los comentarios de las preguntas son valiosos y ayudan a comprender el contexto de formato en línea
Colapso y liquidación de márgenes: liquidación 的 示例
Ejemplo de fusión de márgenes con espacios: use Firefox para ver, porque Chrome y Safari no cumplen con las especificaciones
Márgenes que se contraen: no es necesario que lea esto después de leer este artículo.