La transmisión de documentos CSS, los elementos de nivel de bloque (Bloque), en línea (en línea). La Guía de Autorización de Reilly <CSS> descubrió que el concepto de flujo de documentos mencionado en él me hizo muy sensible. Este concepto es realmente importante. Si hay algún error, es puramente normal. El flujo del documento divide el formulario de arriba a abajo en filas y descarga elementos en cada fila en orden de izquierda a derecha, que es el flujo de documentos. Hay algunas preguntas más que no entiendo 1. Como elemento en línea, uno de los tres elementos básicos, ¿cuál es la principal diferencia entre él y los elementos a nivel de bloque? ¿Qué significan los elementos en línea? ¿Qué es un elemento de nivel de bloque? El texto chino de la "Guía autorizada de CSS" muestra que cualquier elemento visible que no sea un elemento de nivel de bloque es un elemento en línea. La característica de su expresión es la forma de "diseño de fila". Por ejemplo, cuando establecemos un elemento en línea de fondo de borde: 1px Solid #000;, se repite en cada línea, y habrá una línea negra delgada debajo de cada línea. Si es un elemento de nivel de bloque, las líneas negras que se muestran solo aparecerán debajo del bloque. Déjame darte un ejemplo práctico simple: por ejemplo <Viv> Amo CSS - 52CSS.com </div> Los elementos en línea generalmente se basan en elementos básicos semánticos. Los elementos en línea solo pueden acomodar texto u otros elementos en línea, y el elemento en línea común "A". Elemento de bloque elemento en línea Elemento variable Elemento variable es un elemento de bloque o un elemento en línea basado en el contexto.
Cada elemento de nivel de bloque no flotante ocupa una fila, y el elemento flotante flota en un extremo de la fila de acuerdo con las regulaciones.
Los elementos en línea tampoco ocupan una sola fila.
Hay tres situaciones que harán que el elemento exista fuera de la transmisión del documento, a saber, el posicionamiento absoluto y el posicionamiento fijo. .
El elemento flotante no ocupa ningún espacio de flujo de documento normal, y el posicionamiento del elemento flotante se basa en el flujo de documento normal, y luego extrae del flujo del documento y se mueve hacia la izquierda o la derecha en la medida de lo posible. El contenido de texto rodeará el elemento flotante. Cuando se extrae un elemento de la secuencia de documentos normal, otros elementos que aún están en la secuencia de documentos ignorarán el elemento y llenará su espacio original.
La causa raíz de los conceptos flotantes es la interpretación del navegador de la teoría. Solo puedo decir que muchas personas usan IE como estándar, pero no lo es.
Según el flujo de documentos, podemos comprender fácilmente los siguientes patrones de posicionamiento:
El posicionamiento relativo, es decir, compensación en relación con la posición del elemento en el flujo de documentos.
El posicionamiento absoluto significa completamente separado de la secuencia de documentos, y es compensado y posicionamiento fijo en relación con el elemento principal más cercano del atributo de posición no estático, es decir, completamente separado de la secuencia de documentos, y está compensada en relación con la ventana gráfica.
2. ¿Cómo entender cuándo el atributo claro toma el valor correcto?
Los elementos como P, H1 o Div a menudo se llaman elementos de nivel de bloque, y estos elementos se muestran como un contenido; es decir, "caja en línea". (Puede usar display = bloque para convertir elementos en la fila en elementos de bloque. Display = Ninguno significa que el elemento generado no tiene un cuadro en absoluto, y ninguno muestra elementos, ni ocupa espacio en el documento)
R: La línea es un elemento dentro de una línea, y solo se puede colocar en la línea;
B: Para decirlo sin rodeos, el elemento en la línea es como una palabra;
C: elementos generales de nivel de bloque como el párrafo <p>, el título <h1> <h2> ..., lista, <ul> <ol> <li>, tabla <table>, form <form>, div <div> y Elementos corporales como <body>. Los elementos en línea son como: Elementos de formulario <Poning>, Hyperlinks <a>, imagen <img>, <span> ..... .....
D: La característica distintiva de la invisibilidad a nivel de bloque es que cada elemento a nivel de bloque se muestra desde una nueva línea, y la invisibilidad posterior también debe mostrarse desde otra línea.
E: <span> pertenece a un elemento en línea en la definición CSS, mientras que <viv> es un elemento de nivel de bloque.
Para aquellos que han estudiado CSS, pueden entenderlo al principio. Pero no es fácil de entender para los novatos, ¡así que lo explico principalmente a los novatos más familiares!
El uso de la palabra contenedor hará que sea más fácil comprender su existencia y un propósito vívidamente. pequeño contenedor. <Span> es un contenedor pequeño. Pero, ¿qué debo hacer si quiero ponerle tinta? Es muy simple.
Quiero usar CSS para definir el estilo de la letra C, para que podamos usar <span>.
<Div> Me encanta CSS - <span> 52css.com </span> W3C Standard </div>
El elemento de bloque es generalmente un contenedor de otros elementos. ., solo se puede usar para contener otros elementos de bloque.
Sin el efecto de CSS, los elementos de bloque se organizarán en orden en fila cada vez. Con CSS, podemos cambiar el modo de diseño predeterminado de este HTML y colocar los elementos de bloque en la posición que desee. En lugar de comenzar otra línea estúpidamente cada vez. Cabe señalar que la etiqueta de la tabla también es un tipo de elemento de bloque. Velocidad. Sin embargo, si un usuario ordinario hace clic accidentalmente en el botón Vista de 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ñada en función del concepto de buena reconstrucción puede al menos permitir a los usuarios comunes sin desarrollo web para comprender rápidamente el contenido. Desde esta perspectiva, el código de diseño CSS debería tener una mejor experiencia estética.
Puede imaginar el elemento del contenedor de bloque Div como cajas, o si ha jugado con artículos de clip, será más fácil de entender. Primero recortamos los artículos que necesitamos de varios periódicos y revistas. Cada corte de pieza es un bloque. Luego volvemos a marcar estos trozos de papel en una nueva hoja de papel en blanco de acuerdo con nuestras propias intenciones de diseño. Esto formará sus propias noticias únicas de resumen. Como una extensión de la tecnología, el diseño de diseño web sigue el mismo patrón. .
Los elementos de bloque y los elementos en línea son conceptos en la especificación HTML. La diferencia básica entre los elementos de bloque y los elementos en línea es que los elementos de bloque generalmente comienzan con nuevas líneas. Sin embargo, cuando se agrega control CSS, la diferencia de atributos entre los elementos de bloque y los elementos en línea no se convertirá en una diferencia. Por ejemplo, podemos agregar un elemento en línea cite al atributo de pantalla: bloqueo, para que también pueda tener atributos que comienzan desde una nueva línea cada vez.
El concepto básico de un elemento variable es que necesita determinar si el elemento es un elemento de bloque o un elemento en línea basado en la relación contextual. Los elementos variables aún pertenecen a las dos categorías de dos elementos. Vea el texto completo para la clasificación de elementos generales.
Con respecto al nombre chino del elemento en línea, hay muchos elementos en línea, elementos integrados, elementos en línea y elementos de entrada directa. Básicamente no hay traducción unificada, solo llámelo como quieras. Además, cuando se trata de elementos en línea, pensaremos que hay un atributo de pantalla que se muestra: en línea;
* Dirección - Dirección * BlockQuote - Bloque Referencia * Centro - Alineación de bloques en la lista de Directorio de elevación * Dir: Div - El nivel de bloque de uso común es fácil y también es la etiqueta principal del diseño CSS * DL - Lista de definición * FieldSet - Control de formulario Grupo* Formulario - Formulario de interacción* H1 - Título grande* H2 - Subtítulo* H3 - Nivel 3 Título* H4 - Nivel 4 Título* H5 - Nivel 5 Título* H6 - Nivel 6 Título* HR - Divisor horizontal* ISINDEX - INPUTCIÓN DE INPUT
* Menú - Lista de menú * Noframes - Frames Contenido opcional, (Muestre este contenido de bloque para navegadores que no admiten Frame * Noscript - Contenido de script opcional (muestre este contenido para navegadores que no admiten Script)
* ol - formulario de clasificación * p - párrafo * pre -formato Texto * Tabla - Tabla * UL - Lista no presenta
* A - Punto de anclaje * ABBR - Abreviatura * Acrónimo - Primera palabra * B - Bold (no recomendado)
* bdo - bidi anular
* Gran - Gran fuente * BR - Break de línea * Cite - CITA * Código - Código de computadora (necesario al citar el código fuente)
* DFN - Definir campos * em - enfatizar * Font - configuración de fuentes (no recomendado)
* I - Italic * img - Imagen * Entrada - Box de entrada * KBD - Definir texto del teclado * etiqueta - etiqueta de tabla * q - referencia corta * s - marca media (no recomendada)
* SAMP - DEFINE Ejemplo Código de computadora * Seleccionar - Selección de proyecto * Pequeño - Texto de fuente pequeña * Span - Contenedores en línea de uso común, Definir bloques dentro del texto * Strike - Mediana puntual * fuerte - énfasis en negrita * Subscript * Sup - Superscript * TextAREA - Cuadro de entrada de texto de múltiples líneas * TT - Teletext * U - Subscore * Var - Definir variables
* Applet - Applet Java
* Botón - Botón * Del - Eliminar texto * iframe - marco en línea
* INS - Texto insertado* Mapa - Bloque de imágenes (mapa)
* objeto - objeto objeto* script - script cliente