"La guía definitiva de CSS" en chino: 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.
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 contenedor pequeño.
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". Especial, solo se puede utilizar para contener otros elementos de 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.
Los elementos 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.
PD: con respecto al nombre chino de 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 hablemos 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 (margen flotante) de IE.
elemento de bloque
* dirección - dirección
* cita en bloque - cita en bloque
* centro - bloque de alineación central
* dir - listado de directorio
* div: el nivel de bloque de uso común también es la etiqueta principal del diseño CSS
* dl - lista de definiciones
* conjunto de campos - grupo de control de formulario
* formulario - formulario interactivo
* h1 - Titular
* h2 - subtítulo
*h3 - Título de nivel 3
*h4 - Título de nivel 4
*h5 - Título de nivel 5
*h6 - Título de nivel 6
*hr - divisor horizontal
* isindex - mensaje de entrada
*menú - lista de menús
* noframes: contenido opcional de marcos (muestra este contenido de bloque para navegadores que no admiten marcos)
*noscript -) Contenido de script opcional (muestra este contenido para navegadores que no admiten scripts)
*ol - ordenar formulario
* p - párrafo
* texto preformateado
* mesa - mesa
* ul - elemento en línea de lista sin clasificar (elemento en línea)
* a - punto de anclaje
*abbr - abreviatura
*acrónimo - palabra inicial
* 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 - énfasis
* fuente - configuración de fuente (no recomendado)
* yo - cursiva
* img - imagen
* entrada - cuadro de entrada
* kbd - define el texto del teclado
* etiqueta - etiqueta de la tabla
*q - cita breve
* s - guión (no recomendado)
* samp: define el código de computadora de muestra
* seleccionar - selección de elementos
* pequeño - texto de fuente pequeña
* span: contenedor en línea comúnmente utilizado para definir bloques dentro del texto
* huelga - línea central
*fuerte: énfasis en negrita
* sub - subíndice
* sup - superíndice
* área de texto: cuadro de entrada de texto de varias líneas
*tt - texto télex
* u - guión bajo
* var: define un elemento variable variable: un elemento variable 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 imágenes (mapa)
* objeto - objeto objeto
* secuencia de comandos - secuencia de comandos del cliente
Popularidad: 26% [?]