Cada elemento de una página web es un cuadro rectangular. La propiedad de visualización en CSS determina cómo se comporta esa caja rectangular. Hay solo un puñado de valores que se usan comúnmente:
div ( display: inline; /* Default of all elements, unless UA stylesheet overrides */ display: inline-block; /* Characteristics of block, but sits on a line */ display: block; /* UA stylesheet makes things like and block */ display: run-in; /* Not particularly well supported or common */ display: none; /* Hide */ )
El valor predeterminado para todos los elementos es en línea. La mayoría de las "hojas de estilo del agente de usuario" (los estilos predeterminados que el navegador aplica a todos los sitios) restablecen muchos elementos a "bloquear". Repasemos cada uno de estos y luego cubramos algunos de los otros valores menos comunes.
En línea
El valor predeterminado para elementos. Piense en elementos como , o y cómo ajustar texto en esos elementos dentro de una cadena de texto no interrumpe el flujo del texto.
El elemento tiene un borde rojo de 1 px. Observe que se encuentra alineado con el resto del texto.
Un elemento en línea aceptará márgenes y relleno, pero el elemento aún se ubica en línea como es de esperar. El margen y el relleno solo alejarán otros elementos horizontalmente, no verticalmente.
Un elemento en línea no aceptará heighty width. Simplemente lo ignorará.
Bloque en línea
Un elemento configurado en inline-blockes muy similar a en línea en que se configurará en línea con el flujo natural del texto (en la "línea de base"). La diferencia es que puede establecer un widthy heightque se respetará.
Cuadra
La blockhoja de estilo UA del navegador establece una serie de elementos . Por lo general son elementos contenedores, como , y
. También texto "bloques" como
y
. Los elementos de nivel de bloque no se asientan en línea, sino que se rompen. Por defecto (sin establecer un ancho) ocupan tanto espacio horizontal como pueden.
Los dos elementos con los bordes rojos son
s que son elementos de nivel de bloque. El elemento entre ellos no se sienta en línea porque los bloques se descomponen debajo de los elementos en línea.
Entrar corriendo
Primero, esta propiedad no funciona en Firefox. Se dice que la especificación no está lo suficientemente bien definida. Sin embargo, para comenzar a entenderlo, es como si quisieras que un elemento de encabezado se alineara con el texto debajo de él. Flotarlo no funcionará y tampoco lo hará ninguna otra cosa, ya que no desea que el encabezado sea un elemento secundario del elemento de texto debajo de él, desea que sea su propio elemento independiente. En los navegadores "compatibles", es así:
Sin embargo, no cuente con eso.
Flexbox
La displaypropiedad también se utiliza para nuevos métodos de diseño como Flexbox.
.header ( display: flex; )
Hay algunas versiones anteriores de la sintaxis de flexbox, así que consulte este artículo para conocer la sintaxis del uso de flexbox con el mejor soporte de navegador. Asegúrese de consultar esta guía completa de Flexbox.
Raíz de flujo
El flow-rootvalor de visualización crea un nuevo "contexto de formato de bloque", pero por lo demás es similar block. Un nuevo BFC ayuda con cosas como limpiar flotadores, eliminando la necesidad de hacks para hacer eso.
.group ( display: flow-root; )
Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.
Escritorio
Cromo
Firefox
ES DECIR
Borde
Safari
58
53
No
79
13
Móvil / Tablet
Android Chrome
Android Firefox
Androide
Safari de iOS
88
85
81
13.0-13.1
Cuadrícula
La propiedad de visualización también establecerá inicialmente el diseño de la cuadrícula.
body ( display: grid; )
Aquí está nuestra guía sobre el diseño de cuadrícula, que incluye un gráfico de compatibilidad con el navegador.
Ninguno
Elimina completamente el elemento de la página. Tenga en cuenta que mientras el elemento todavía está en el DOM, se elimina visualmente y de cualquier otra forma imaginable (no puede tabularlo ni a sus elementos secundarios, los lectores de pantalla, etc. lo ignoran).
Valores de tabla
Existe un conjunto completo de valores de visualización que obligan a los elementos que no son de tabla a comportarse como elementos de tabla, si es necesario. Es poco común, pero a veces le permite ser "más semántico" con su código mientras utiliza los poderes de posicionamiento únicos de las tablas.
