Flujo de documentos CSS, elementos a nivel de bloque (bloque) y elementos en línea (en línea). He leído muchos libros y muchos artículos antes. Todo lo que he visto es un conocimiento básico fragmentario del diseño CSS, que es relativamente superficial. O'Reilly, descubrí que el concepto de flujo de documentos mencionado en él me hizo sentir muy sensible. Desafortunadamente, el libro no explica qué es el flujo de documentos. Quizás el autor pensó que era demasiado simple para mencionarlo. Es realmente importante. Después de comprenderlo, un montón de teorías de diseño de CSS se vuelven fáciles de entender y me doy cuenta de la racionalidad del diseño de CSS. Así que basé mis conjeturas y experimentos para encontrar una explicación. .
flujo de documentos
Divida el formulario en filas de arriba a abajo y organice los elementos en cada fila de izquierda a derecha, que es el flujo del documento.
Cada elemento no flotante a nivel de bloque ocupa su propia línea y los elementos flotantes flotan en un extremo de la línea según sea necesario. Si la línea actual no cabe, flotará en una nueva línea.
Los elementos en línea no ocuparán una fila. Casi todos los elementos (incluidos los elementos a nivel de bloque, en línea y de lista) pueden generar subfilas para colocar subelementos.
Hay tres situaciones que harán que existan elementos fuera del flujo de documentos, a saber, flotante, posicionamiento absoluto y posicionamiento fijo, pero en IE, los elementos flotantes también existen en el flujo de documentos (lo que me hace pensar que esto es razonable><).
Los elementos flotantes no ocupan ningún espacio de flujo de documentos normal, y el posicionamiento de los elementos flotantes todavía se basa en el flujo de documentos normal, y luego se extraen del flujo de documentos y se mueven lo más posible hacia la izquierda o hacia la derecha. El contenido del texto se ajustará alrededor del elemento flotante. Cuando un elemento se extrae del flujo de documentos normal, otros elementos que aún están en el flujo de documentos ignoran el elemento y llenan su espacio original.
El concepto confuso de flotación se debe a la interpretación que hace el navegador de la teoría. Solo se puede decir que mucha gente usa IE como estándar, pero en realidad no lo es.
Según el flujo de documentos, podemos comprender fácilmente los siguientes patrones de posicionamiento:
posicionamiento relativo,
Es decir, el elemento se desplaza con respecto a su posición en el flujo de documentos, pero se conserva el marcador de posición original.
posicionamiento absoluto,
Es decir, está completamente separado del flujo de documentos y está desplazado con respecto al elemento principal más cercano con un valor no estático del atributo de posición.
posicionamiento fijo,
Es decir, está completamente separado del flujo de documentos y desplazado con respecto a la ventana gráfica.
Hay algunas preguntas más que no puedo resolver a continuación.
Como uno de los tres elementos básicos, ¿cuál es la principal diferencia entre elementos en línea y elementos a nivel de bloque?
¿Cómo se entiende cuando la propiedad Clear toma el valor correcto? Parece que la situación experimental siempre es inconsistente con la teoría.