elemento."> !}El elemento de detalles HTML () crea un widget de divulgación en el que la información es visible solo cuando el widget se activa en un
Elementos del bloque HTML. Elementos en bloque y en línea. Etiquetas en bloque y en línea
En HTML, la mayoría de los elementos se pueden dividir en dos grupos: bloque ( bloquear) y minúscula ( en línea).
No siempre es posible para un desarrollador novato comprender de inmediato cuál es la diferencia entre ellos y también recordar si algún elemento pertenece a grupo específico. Pero con el tiempo, con experiencia laboral, no tendrá ni una pizca de tales dificultades.
Elementos en línea
Los elementos en línea incluyen etiquetas:
,
,
,
,
, ,
,
,
....
Los elementos en línea del flujo general están dispuestos secuencialmente en una línea, uno tras otro.
Un elemento en línea o parte de su contenido solo se mueve a otra línea al final de la línea o cuando algo los obliga a ir a una nueva línea.
Los elementos en línea, por supuesto, se pueden colocar dentro de elementos de bloque.
Elementos de bloque
Los elementos del bloque incluyen etiquetas:
,
-
,
- Los elementos a nivel de bloque pueden aparecer sólo dentro de un elemento.
...
,
,
,
,
,
....
Un bloque es como una unidad estructural separada, separada por un párrafo. Los elementos de bloque en el flujo general están dispuestos secuencialmente. uno debajo del otro. Por defecto, dos elementos de bloque no pueden aparecer en la misma línea.
Uno o más bloques también pueden ubicarse dentro de otro ( de los padres) elemento de bloque.
En CSS, los bloques se crean en base a elementos HTML y tienen la siguiente estructura.
Cualquier bloque tiene forma de rectángulo.
Un elemento de bloque tiene un borde y contenido: puede ser información de texto, fotografías, el logotipo de una empresa, etc., llamado contenido ( Inglés contenido- contenido).
Usando la propiedad de borde, puede darle al borde del bloque el diseño necesario: establezca el grosor, el color y el estilo de las líneas. De forma predeterminada, el borde es invisible.
Entre el contenido y el borde existen distancias internas - márgenes (propiedad relleno). No tienes que usarlos. Es decir, si no se configuran explícitamente mediante la propiedad padding, entonces el borde estará muy adyacente al contenido del bloque, o a una distancia mínima de él. Por otro lado, los campos pueden tener tamaños muy específicos especificados por el desarrollador.
Alrededor del bloque, más allá de su borde, hay áreas vacías y desocupadas llamadas sangrías (propiedad margen). Las sangrías son las distancias desde el borde del bloque hasta los elementos más cercanos o, si no hay ninguno, hasta los bordes de la ventana del navegador. Las sangrías, al igual que los márgenes, están ausentes de forma predeterminada o tienen un ancho mínimo determinado automáticamente por el navegador.
También puede establecer un ancho fijo para un bloque (propiedad ancho) y altura (propiedad altura), pero sólo por su contenido. El relleno, el borde y los márgenes no están incluidos. De forma predeterminada, tanto el alto como el ancho del bloque se ajustan para adaptarse al espacio ocupado por el contenido.
Fragmento de código:
Elementos en línea ubicado en una línea.
Están encerrados en un elemento de bloque: ¡un párrafo! El ajuste del texto se produce automáticamente, al final de la línea.
El siguiente bloque es un párrafo que comienza en una nueva línea.
Se organizan dos párrafos.
Dentro de un bloque de etiquetas div
Los fragmentos de texto individuales están encerrados en una etiqueta de extensión. ¡Y se les ha marcado un estilo!
Resultado: Elementos en línea ubicado en una línea. Están encerrados en un elemento de bloque: ¡un párrafo!
El ajuste del texto se produce automáticamente, al final de la línea.
El siguiente bloque es un párrafo que comienza en una nueva línea.
Se organizan dos párrafos.
">div
¡Dentro del bloque hay una etiqueta div! HTML ( Lenguaje de marcado de hipertexto ) históricamente los elementos se clasificaban como elementos "a nivel de bloque" o como elementos "en línea". Los elementos en línea son aquellos que sólo ocupan el espacio delimitado por las etiquetas que definen el elemento, en lugar de interrumpir el flujo del contenido.
En este artículo, examinaremos los elementos HTML en línea y en qué se diferencian de los elementos a nivel de bloque.
Un elemento en línea no comienza en una nueva línea y solo ocupa el ancho necesario.
En línea vs. elementos a nivel de bloque: una demostración
Esto se demuestra más fácilmente con un ejemplo sencillo. Primero, algo de CSS simple que usaremos:
Resaltar (color de fondo:#ee3; )
En línea
Veamos el siguiente ejemplo que demuestra un elemento en línea: El siguiente tramo es un elemento en línea ; su trasfondo ha sido
coloreado para mostrar tanto el principio como el final de la influencia del elemento en línea. El siguiente párrafo es un
elemento a nivel de bloque;
su fondo ha sido coloreado para mostrar tanto el principio como el final de la influencia del elemento a nivel de bloque.
También se utiliza el CSS (que no se muestra en el modo de lectura estándar):
Cuerpo (margen: 0; relleno: 4px; borde: 1px sólido #333;) .highlight (color de fondo:#ee3;)
Renderizado usando el mismo CSS que antes, obtenemos:
Element cambia totalmente la disposición del texto, dividiéndolo en tres segmentos: el texto anterior al
Entonces el
"s texto, y finalmente el texto que sigue al
Cambiar niveles de elementos
Puedes cambiar el presentación visual de un elemento utilizando la propiedad de visualización CSS. Por ejemplo, al cambiar el valor de visualización de "inline" a "block", puede indicarle al navegador que represente el elemento en línea en un cuadro de bloque en lugar de un cuadro en línea, y viceversa. Sin embargo, hacer esto no cambiará la categoría y el modelo de contenido del elemento. Por ejemplo, incluso si la visualización del elemento span se cambia a "block", todavía no permitirá anidar un elemento div dentro de él.
Diferencias conceptuales
En resumen, estas son las diferencias conceptuales básicas entre elementos en línea y a nivel de bloque:
Modelo de contenido Generalmente, los elementos en línea pueden contener solo datos y otros elementos en línea. No se pueden colocar elementos de bloque dentro de elementos en línea. Formato De forma predeterminada, los elementos en línea no fuerzan el inicio de una nueva línea en el flujo del documento. Los elementos de bloque, por otro lado, normalmente provocan que se produzca un salto de línea (aunque, como de costumbre, , esto se puede cambiar usando CSS).
Lista de elementos "en línea"
Los siguientes elementos están en línea de forma predeterminada (aunque los elementos de bloque y en línea ya no están definidos en HTML 5, use
¡Dentro del bloque hay una etiqueta div! HTML () los elementos históricamente se clasificaban como elementos "a nivel de bloque" o elementos "en línea". De forma predeterminada, un elemento a nivel de bloque ocupa todo el espacio de su elemento principal (contenedor), creando así un "bloque". Este artículo ayuda a explicar lo que esto significa.
Los navegadores suelen mostrar el elemento a nivel de bloque con una nueva línea antes y después. después del elemento. Puedes visualizarlos como una pila de cajas.
Un elemento a nivel de bloque siempre comienza en una nueva línea y ocupa todo el ancho disponible (se extiende hacia la izquierda y hacia la derecha tanto como puede).
El siguiente ejemplo demuestra la influencia del elemento a nivel de bloque:
Elementos a nivel de bloque
HTML
Este párrafo es un elemento a nivel de bloque; su fondo ha sido coloreado para mostrar el elemento principal del párrafo.
CSS
p (color de fondo: #8ABB55;) Uso
Nivel de bloque vs. en línea
Hay un par de diferencias clave entre los elementos a nivel de bloque y los elementos en línea:
Modelo de contenido Generalmente, los elementos a nivel de bloque pueden contener elementos en línea y (a veces) otros elementos a nivel de bloque. Inherente a esta distinción estructural es la idea de que los elementos en bloque crean estructuras "más grandes" que los elementos en línea.
Formato predeterminado De forma predeterminada, los elementos a nivel de bloque comienzan en líneas nuevas, pero los elementos en línea pueden comenzar en cualquier lugar de una línea.
Elementos
Contact information.
!}
Article content.
element represents a portion of a document whose content is only indirectly related to the document" s main content.>
Aside content.
Element (or HTML Block Quotation Element) indicates that the enclosed text is an extended quotation. Usually, this is rendered visually by indentation (see Notes for how to change it). A URL for the source of the quotation may be given using the cite attribute, while a text representation of the source can be given using the !} El elemento HTML representa una composición autónoma en un documento, página, aplicación o sitio, que está destinada a ser distribuible o reutilizable de forma independiente (por ejemplo, en sindicación). Los ejemplos incluyen: una publicación en un foro, un artículo de revista o periódico, o una entrada de blog.
,
-
,
,