Flujo de documentos CSS y 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. En la "Guía definitiva de CSS" de Reilly, descubrí que el concepto de flujo de documentos mencionado en él me hizo muy sensible. Desafortunadamente, el libro no explicó qué es el flujo de documentos. Quizás el autor pensó que era demasiado simple para mencionarlo. Pero creo que este concepto 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ándose en mis conjeturas y experimentos, se me ocurrió esta declaración. Si hay algún error, es completamente normal.
El flujo de documentos divide el formulario en filas de arriba a abajo y organiza los elementos en cada fila de izquierda a derecha, que es el flujo de documentos.
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, desplazamiento relativo a la posición del elemento en el flujo de documentos, pero conserva el marcador de posición original.
Posicionamiento absoluto, es decir, completamente fuera del flujo de documentos, desplazamiento y posicionamiento fijo con respecto al elemento principal más cercano con un valor no estático del atributo de posición. Posicionamiento absoluto, es decir, completamente fuera del flujo de documentos, desplazamiento relativo. la ventana gráfica.
Todavía hay algunas preguntas que tengo que resolver. No entiendo
1. Como uno de los tres elementos básicos, ¿cuál es la principal diferencia entre los elementos en línea y los elementos a nivel de bloque?
¿
Cómo se entiende cuando el atributo Clear toma el valor correcto? Parece que la situación experimental siempre es inconsistente con la teoría.
¿Qué son los elementos a nivel de bloque?
El texto chino de la "Guía definitiva de CSS" muestra: Cualquier elemento visible que no sea un elemento a nivel de bloque es un elemento en línea. La característica de su rendimiento es la forma de "diseño de filas". El "diseño de filas" aquí significa que su forma de expresión siempre se muestra en filas. Por ejemplo, cuando configuramos un elemento en línea border-bottom:1px solid #000;, se repetirá en cada fila y habrá una delgada línea negra debajo de cada fila. Si es un elemento a nivel de bloque, la línea negra que se muestra solo aparecerá debajo del bloque.
Los elementos como p, h1 o div a menudo se denominan elementos a nivel de bloque, y estos elementos se muestran como un bloque de contenido. Los elementos como Strong y span se denominan elementos en línea y su contenido se muestra en la línea; , "cuadro en línea". (Puede usar display=block para convertir elementos en línea en elementos de bloque. display=none significa que el elemento generado no tiene ningún marco, no muestra el elemento ni ocupa espacio en el documento)
R: Los elementos en línea son elementos dentro de una fila y solo se pueden colocar dentro de una línea; los elementos a nivel de bloque son solo un cuadro de cuatro cuadrados y se pueden colocar en cualquier lugar de la página.
B: Para decirlo sin rodeos, un elemento en línea es como una palabra; un elemento a nivel de bloque es como un párrafo, si no se define de otra manera, aparecerá en su propia línea.
C: Elementos generales a nivel de bloque como párrafo <p>, título <h1><h2>..., lista, <ul><ol><li>, tabla <table>, formulario <form>, DIV<div > y BODY <cuerpo> y otros elementos. Los elementos en línea son tales como: elementos de formulario <input>, hipervínculos <a>, imágenes <img>, <span>…..
D: La característica notable de los elementos a nivel de bloque es que cada elemento a nivel de bloque comienza a mostrarse en una nueva línea, y los elementos posteriores también deben mostrarse en una nueva línea.
E: <span> es un elemento en línea en la definición de CSS, mientras que <div> es un elemento a nivel de bloque.
Aquellos que han aprendido CSS, pueden entenderlo inmediatamente. Pero no es fácil de entender para los principiantes, ¡así que principalmente quiero hacerlo más familiar para los principiantes!
El uso de la palabra contenedor facilitará la comprensión visual de su existencia y propósito. Los elementos en línea equivalen a contenedores pequeños, mientras que <div> equivale a contenedores grandes. Por supuesto, un contenedor pequeño se puede colocar en un contenedor grande. <span>Es un recipiente pequeño. De esta manera puedes tener una impresión preliminar en tu mente si queremos poner un poco de agua en un recipiente grande. ¿Pero qué pasa si también quiero ponerle un poco de tinta? Es muy sencillo, sacamos el recipiente pequeño, lo llenamos de tinta y lo metemos en el agua limpia del recipiente grande.
Permítanme darles un ejemplo práctico simple: por ejemplo <div>Me encanta CSS - 52CSS.com</div>
Quiero darle estilo a la letra c usando CSS, para que podamos usar <span>.
<div>Me encanta CSS - <span>52CSS.com</span> Estándar W3C</div>
Un elemento de bloque es generalmente un elemento contenedor para otros elementos. Los elementos de bloque generalmente comienzan en una nueva línea. Puede acomodar elementos en línea y otros elementos de bloque. Un elemento de bloque común es la etiqueta de párrafo "P". bastante especial, solo se puede utilizar para contener otros elementos del bloque.
Sin la ayuda de CSS, los elementos del bloque se organizarán una fila a la vez. Con CSS, podemos cambiar el modo de diseño predeterminado de este HTML y colocar los elementos del bloque donde deseemos. En lugar de empezar estúpidamente una nueva línea cada vez. Cabe señalar que la etiqueta de tabla también es un tipo de elemento de bloque. Mire estos dos diseños desde la perspectiva de los usuarios comunes (excluyendo a las personas con discapacidad visual, personas ciegas, etc.). Velocidad de carga de la página. Excepto por la diferencia, no hay otra diferencia. Sin embargo, si un usuario normal hace clic sin darse cuenta en el botón Ver código fuente de la página, la diferencia entre los dos será muy grande. El código fuente de la página de diseño CSS diseñado en base a buenos conceptos de reconstrucción puede al menos permitir que los usuarios comunes sin experiencia en desarrollo web comprendan rápidamente el contenido. Desde esta perspectiva, el código de diseño CSS debería tener una mejor experiencia estética.
Puedes pensar en el elemento contenedor de bloques div como cajas, o si has jugado con el recorte, será más fácil de entender. Primero recortamos los artículos necesarios de varios periódicos y revistas. Cada pieza de contenido cortado es un bloque. Luego pegamos estos trozos de papel en un nuevo trozo de papel en blanco según nuestra intención de diseño. Esto formará su propio resumen único. Como extensión de la tecnología, el diseño web sigue el mismo patrón.
en línea
generalmente se basan en elementos básicos a nivel semántico. Los elementos en línea solo pueden contener texto u otros elementos en línea, y el elemento en línea común "a" lo es.
El elemento de bloque (elemento de bloque) y el elemento en línea (elemento en línea) son conceptos en la especificación HTML. La diferencia básica entre elementos de bloque y elementos en línea es que los elementos de bloque generalmente comienzan en una nueva línea. Cuando se agrega control CSS, esta diferencia de atributo entre elementos de bloque y elementos en línea ya no se convierte en una diferencia. Por ejemplo, podemos agregar un atributo como display:block al elemento en línea citar, de modo que también tenga el atributo de comenzar desde una nueva línea cada vez.
El concepto básico de un elemento mutable es que necesita determinar si el elemento es un elemento de bloque o un elemento en línea según el contexto. Los elementos variables todavía pertenecen a las dos categorías de elementos anteriores. Una vez que el contexto determina su categoría, deben seguir las reglas de los elementos de bloque o los elementos en línea. Consulte el texto completo para conocer la clasificación aproximada de los elementos.
Con respecto al nombre chino del elemento en línea, existen muchos tipos de elementos en línea, elementos en línea, elementos en línea y elementos en línea. Básicamente no existe una traducción unificada, simplemente llámala como quieras. Además, cuando hablamos de elementos en línea, pensaremos en un atributo de visualización llamado display:inline. Este atributo puede solucionar el famoso problema del doble borde flotante de IE.
elemento de bloque
* dirección - dirección * blockquote - referencia de bloque * centro - bloque de alineación * dir - lista de directorios * div - nivel de bloque de uso común, también la etiqueta principal del diseño CSS * dl - lista de definiciones * conjunto de campos - grupo de control de formulario * formulario - formulario de interacción * h1 - Encabezado * h2 - Subtítulo * h3 - Encabezado de nivel 3 * h4 - Encabezado de nivel 4 * h5 - Encabezado de nivel 5 * h6 - Encabezado de nivel 6 * hr - Línea divisoria horizontal * isindex - solicitud de entrada
* menú - lista de menús * noframes - contenido opcional de marcos (este contenido de bloque se muestra para navegadores que no admiten marcos) * noscript - contenido de secuencia de comandos opcional (este contenido se muestra para navegadores que no admiten secuencias de comandos)
* ol - forma ordenada * p - párrafo * texto preformateado * tabla - tabla * ul -
elemento en línea de lista no ordenada (elemento en línea)
* a - punto de anclaje * abbr - abreviatura * acrónimo - primera palabra * b - negrita (no recomendado)
* bdo - anulación de bidi
* grande - fuente grande * br - salto de línea * citar - citar * código - código de computadora (obligatorio al citar el código fuente)
* dfn - definir campos * em - enfatizar * font - configuración de fuente (no recomendado)
* i - cursiva * img - imagen * entrada - cuadro de entrada * kbd - definir texto del teclado * etiqueta - etiqueta de tabla * q - cita corta * s - subrayado (no recomendado)
* samp - define código de computadora de muestra * select - selección de elementos * pequeño - texto de fuente pequeña * span - contenedor en línea de uso común, define bloques dentro del texto * strike - subrayado * fuerte - énfasis en negrita * sub - subíndice * sup - Superíndice * área de texto - Cuadro de entrada de texto de varias líneas * tt - Texto de teletipo * u - Subrayado * var - Definir variables
Elementos variables Los elementos variables determinan si el elemento es un elemento de bloque o un elemento en línea según el contexto.
* subprograma - subprograma de Java
* botón - botón * del - eliminar texto * iframe - marco en línea
* ins - texto insertado * mapa - bloque de imagen (mapa)
* objeto - objeto objeto * script - script de cliente