Los datos expuestos en este blog, son solo de índole informativo. Por favor realiza siempre una copia de seguridad antes de realizar cualquier cambio en tu proyecto.
CSS: propiedades de visualización
Este tutorial de CSS explica cómo usar una propiedad de CSS llamada exposición Con sintaxis y ejemplos.
describir
La propiedad de visualización de CSS define el tipo de cuadro de representación utilizado para un elemento.
sintaxis
La sintaxis para mostrar las propiedades CSS es:
display: value;
parámetro o parámetro
valor
El tipo de cuadro de renderizado. Puede ser uno de los siguientes:
| valor |
describir |
| no cualquiera |
Apagar la visualización del elemento.
div {pantalla: ninguno;} |
| cola |
El elemento generará un cuadro de elemento en línea
div {pantalla: en línea;} |
| bloqueo |
El elemento generará un cuadro de elemento de bloque
div {pantalla: bloque;} |
| bloque en línea |
El elemento generará un cuadro de elemento de bloque que se comporta como un cuadro en línea
div { pantalla: bloque en línea; } |
| La lista de elementos |
El elemento generará un cuadro de elemento de bloque y un cuadro en línea de elemento de lista separado para el contenido
div { pantalla: elementos de la lista; } |
| mesa |
Los elementos se comportan como HTML
elemento
div {pantalla: tabla;}
| título de la tabla |
Los elementos se comportan como HTML
elemento
div { pantalla: título de la tabla; } |
| Columna de la tabla |
Los elementos se comportan como HTML
elemento
div { pantalla: columna de la tabla; } |
| grupo de lista |
Los elementos se comportan como HTML
elemento
div { pantalla: grupo de columnas de la tabla; } |
| grupo de encabezado |
Los elementos se comportan como HTML
elemento
div { pantalla: grupo de encabezado; }
| grupo de filas de la tabla |
Los elementos se comportan como HTML
| | elemento
div { pantalla: grupo de filas de la tabla; }
| Grupo de pie de tabla |
Los elementos se comportan como HTML
| elemento
div { pantalla: grupo de pie de página de tabla; }
| fila de la tabla |
Los elementos se comportan como HTML
| elemento
div { pantalla: fila de la tabla; }
| celda de la tabla |
Los elementos se comportan como HTML
| elemento
div { pantalla: celda de la tabla; } |
| heredar |
El elemento heredará la visualización de su elemento principal
div { pantalla: heredar; } |
notas
- Los elementos a nivel de bloque crean bloques de contenido distintos verticalmente con saltos de línea antes y después del contenido.El comportamiento del bloque está tradicionalmente determinado por
,
,
,
Espere a que se muestre el elemento HTML.
- Los valores de visualización de CSS que crean el comportamiento de los elementos a nivel de bloque son: bloque, elemento de lista, tabla.
- Los elementos en línea no crean bloques de contenido distintos verticalmente, crean un cuadro de línea.El comportamiento en línea se muestra tradicionalmente mediante elementos HTML como ,,, Esperar.
- Los valores de visualización de CSS para crear un comportamiento de elemento en línea son: en línea, bloque en línea.
- Cuando la propiedad de visualización de CSS se establece en none, la visualización del elemento se desactiva. Todos los elementos secundarios también apagan su pantalla.
Compatibilidad del navegador
La propiedad de visualización CSS tiene soporte básico para los siguientes navegadores:
- Aleación de cromo
- androide
- Firefox (Geco)
- Firefox móvil (Geco)
- Navegador de Internet (IE)
- es decir, móvil
- ópera
- Ópera Móvil
- Safari (WebKit)
- Safari para móvil
ejemplo
Discutiremos la propiedad de visualización a continuación, explorando ejemplos de cómo usar esta propiedad en CSS.
Crear una lista horizontal
Veamos un ejemplo de visualización de CSS que muestra cómo usar la propiedad de visualización de CSS para crear una lista horizontal.
li { display: inline; }
En este ejemplo de visualización de CSS, vamos a
- Las etiquetas están configuradas para mostrarse en línea, lo que significa que los elementos de la lista se mostrarán como una lista horizontal.
|