Una parte esencial del diseño web es saber cómo organizar los elementos en una página. CSS proporciona varias formas de controlar la disposición de los elementos, permitiendo que adaptes tu diseño a diferentes pantallas y dispositivos. En este capítulo, exploraremos las técnicas de diseño más importantes, como el uso de display, position y float.

La propiedad display

La propiedad display controla cómo se muestran los elementos en la página. Esta propiedad tiene varios valores importantes que determinan cómo interactúan los elementos entre sí.

display: block

Los elementos de bloque ocupan todo el ancho disponible de su contenedor y empiezan en una nueva línea. Algunos ejemplos de elementos de bloque por defecto son <div>, <p>, y <h1>.

css

display: inline

Los elementos en línea no inician una nueva línea y solo ocupan el espacio necesario. Ejemplos comunes de elementos en línea son <span> y <a>.

css

display: inline-block

Este valor combina aspectos de los elementos de bloque e inline. Los elementos inline-block no inician una nueva línea, pero puedes definir su ancho y alto.

css

display: none

Cuando un elemento tiene display: none, no aparece en la página y no ocupa ningún espacio.

css

Se muestran Ejemplos visuales que muestran la diferencia entre display: block, inline, inline-block

Propiedad position

La propiedad position se utiliza para definir cómo un elemento está posicionado en la página. Los valores más comunes son static, relative, absolute, y fixed.

position: static

Este es el valor por defecto. Los elementos con position: static siguen el flujo normal del documento y no son afectados por las propiedades top, right, bottom, o left.

css

position: relative

Con position: relative, puedes mover un elemento en relación con su posición original. Las propiedades top, right, bottom, y left controlan cuánto se desplaza el elemento desde su ubicación original.

css

position: absolute

Los elementos con position: absolute se eliminan del flujo normal del documento y se posicionan en relación con su contenedor más cercano que no tenga position: static.

css

Aquí se muestra una Comparación visual entre position static, relative y absolute y otros

position: fixed

Los elementos con position: fixed se fijan en una posición específica en la pantalla, incluso cuando el usuario hace scroll. Los valores top, right, bottom, y left determinan su posición en la ventana.

css

La propiedad float

La propiedad float permite alinear elementos a la izquierda o a la derecha, haciendo que otros elementos fluyan a su alrededor. Es comúnmente usada para crear diseños de columnas o para alinear imágenes.

css

Sin embargo, el uso de float tiene algunos inconvenientes, como la necesidad de limpiar o "clearfix" el contenedor para evitar problemas de colapso de los elementos.

Limpiar los floats

Cuando usas float, es necesario usar la propiedad clear para evitar que otros elementos floten alrededor del contenedor.

css

Flexbox: Un enfoque moderno para el diseño

La propiedad display: flex es una técnica moderna y flexible para crear diseños en CSS. Flexbox facilita la alineación y distribución de espacio entre los elementos dentro de un contenedor.

display: flex

Cuando aplicas display: flex a un contenedor, los elementos dentro se organizan automáticamente en una sola fila o columna, dependiendo de la dirección del contenedor.

css

Alineación y distribución con Flexbox

Flexbox ofrece propiedades como justify-content y align-items para controlar la alineación de los elementos.

• justify-content: Controla la alineación horizontal de los elementos.
• align-items: Controla la alineación vertical de los elementos.

css

Conclusión

En este capítulo, hemos explorado las técnicas más importantes para diseñar la disposición de los elementos en una página web usando CSS. Entendiendo el uso de display, position, float, y técnicas más modernas como Flexbox, tendrás más control sobre cómo se estructuran los elementos.