display
Indica cómo se representa un elemento en la página (o si se oculta). Podemos cambiar la propiedad de un elemento, de tal forma que un tipo de elemento como <span> se pudiese comportar como si fuera otro (<div> por ejemplo):
- none: El elemento no se dibujará, lo oculta y no ocupa espacio.
- block: El elemento será de tipo bloque(como <div> o <p> por ejemplo), ocupa el ancho completo disponible y siempre salta a una nueva línea.
- inline: Lo contrario que lo anterior. El elemento se alineará con el resto del texto o contenido eliminándose los salto de línea al principio y final. Ignora las propiedades width y height.
- inline-block: Es una mezcla de los dos anteriores, Permite que un elemento de bloque se comporte como si fuera un elemento en línea(no salta de línea) pero conservando algunas propiedades de bloque como la posibilidad de definir su anchura/altura.
- flex: . En el contenedor, los elementos hijos automáticamente se convierten en ítems flexibles y se ponen uno a continuación del otro, por defecto en horizontal. Lo veremos en el punto de posicionamiento de elementos con flex.
- grid: para definir rejillas CSS con su filas y columnas. Lo veremos en el punto de Posicionamiento de elementos con grid
- list-item: El elemento se comportará como si fuera un elemento tipo <li> (elemento de una lista). Se comporta como block.
- table: El elemento se comportará como si fuera un elemento <table>, como si tuviera la etiqueta table.
- table-row: El elemento se comportará como si fuera un elemento <tr>, como si tuviera la etiqueta tr.
- table-cell: El elemento se comportará como si fuera un elemento <td>, como si tuviera la etiqueta td.
- Y muchos otros....
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Ejemplo selectores</title>
<link rel="stylesheet" href="visibilidad.css" />
</head>
<body>
<h1>Ejemplos de la propiedad 'display'</h1>
<div id="display-none-box">¡Soy display: none! No deberías verme.</div>
<p>El elemento de arriba tiene display: none y no ocupa espacio.</p>
---
<div class="box block">Bloque 1</div>
<div class="box block">Bloque 2</div>
<p>Los elementos block ocupan todo el ancho y saltan de línea.</p>
---
<span class="box inline">Inline 1</span>
<span class="box inline">Inline 2</span>
<p>Los elementos inline sólo ocupan el ancho de su contenido y están en la misma línea.</p>
---
<div class="box inline-block">Inline-Block 1</div>
<div class="box inline-block">Inline-Block 2</div>
<p>Los elementos inline-block están en la misma línea, pero se les puede dar ancho y alto.</p>
---
<div class="box list-item">Ítem de Lista 1</div>
<div class="box list-item">Ítem de Lista 2</div>
<p>list-item se comporta como block, pero añade una viñeta.</p>
---
<div id="my-table">
<div class="row">Celda A1</div>
<div class="row">Celda B1</div>
</div>
<p>Aquí simulamos una tabla usando divs con display: table y display: table-row.</p>
</body>
</html>