El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Propiedad Display de CSS

Siguiente ►
►

La propiedad display en CSS es una de las más fundamentales y poderosas para controlar el flujo y la disposición de los elementos en una página web. Esta propiedad determina cómo se comporta un elemento en el documento, afectando su caja y la de sus hijos.

Conceptos Clave

  1. Tipos de Display:

    • block
    • inline
    • inline-block
    • none
    • flex
    • grid
    • table
    • Otros valores menos comunes como list-item, run-in, etc.

  2. Elementos de Bloque vs. Elementos en Línea:

    • Elementos de Bloque: Ocupan todo el ancho disponible, comenzando en una nueva línea.
    • Elementos en Línea: Ocupan solo el ancho necesario y no comienzan en una nueva línea.

Tipos de Display

  1. block

Un elemento con display: block ocupa todo el ancho disponible y comienza en una nueva línea.

<div style="display: block; background-color: lightblue;">
  Este es un elemento de bloque.
</div>

  1. inline

Un elemento con display: inline ocupa solo el ancho necesario y no comienza en una nueva línea.

<span style="display: inline; background-color: lightgreen;">
  Este es un elemento en línea.
</span>

  1. inline-block

Un elemento con display: inline-block se comporta como un elemento en línea, pero puede tener un ancho y alto definidos.

<div style="display: inline-block; width: 100px; height: 50px; background-color: lightcoral;">
  Este es un elemento en línea-bloque.
</div>

  1. none

Un elemento con display: none no se muestra en la página y no ocupa espacio.

<div style="display: none;">
  Este elemento no se mostrará.
</div>

  1. flex

Un elemento con display: flex se convierte en un contenedor flexible, permitiendo el uso de Flexbox para la disposición de sus hijos.

<div style="display: flex; background-color: lightyellow;">
  <div>Elemento 1</div>
  <div>Elemento 2</div>
</div>

  1. grid

Un elemento con display: grid se convierte en un contenedor de cuadrícula, permitiendo el uso de CSS Grid para la disposición de sus hijos.

<div style="display: grid; grid-template-columns: repeat(2, 1fr); background-color: lightgray;">
  <div>Elemento 1</div>
  <div>Elemento 2</div>
</div>

  1. table

Un elemento con display: table se comporta como una tabla HTML.

<div style="display: table; background-color: lightpink;">
  <div style="display: table-row;">
    <div style="display: table-cell;">Celda 1</div>
    <div style="display: table-cell;">Celda 2</div>
  </div>
</div>

Ejemplos Prácticos

Ejemplo 1: Cambiando de block a inline

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ejemplo de Display</title>
  <style>
    .block-element {
      display: block;
      background-color: lightblue;
      margin-bottom: 10px;
    }
    .inline-element {
      display: inline;
      background-color: lightgreen;
    }
  </style>
</head>
<body>
  <div class="block-element">Elemento de Bloque 1</div>
  <div class="block-element">Elemento de Bloque 2</div>
  <span class="inline-element">Elemento en Línea 1</span>
  <span class="inline-element">Elemento en Línea 2</span>
</body>
</html>

Ejemplo 2: Usando inline-block para crear un menú horizontal

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Menú Horizontal</title>
  <style>
    .menu {
      background-color: lightgray;
      padding: 10px;
    }
    .menu-item {
      display: inline-block;
      margin-right: 10px;
      padding: 10px;
      background-color: lightcoral;
    }
  </style>
</head>
<body>
  <div class="menu">
    <div class="menu-item">Inicio</div>
    <div class="menu-item">Acerca de</div>
    <div class="menu-item">Servicios</div>
    <div class="menu-item">Contacto</div>
  </div>
</body>
</html>

Ejercicio Práctico

Ejercicio 1: Crear una Galería de Imágenes

Instrucciones: Crea una galería de imágenes utilizando display: inline-block para que las imágenes se dispongan en una fila y se ajusten automáticamente al tamaño de la pantalla.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Galería de Imágenes</title>
  <style>
    .gallery {
      text-align: center;
    }
    .gallery-item {
      display: inline-block;
      margin: 10px;
    }
    .gallery-item img {
      width: 200px;
      height: auto;
    }
  </style>
</head>
<body>
  <div class="gallery">
    <div class="gallery-item"><img src="imagen1.jpg" alt="Imagen 1"></div>
    <div class="gallery-item"><img src="imagen2.jpg" alt="Imagen 2"></div>
    <div class="gallery-item"><img src="imagen3.jpg" alt="Imagen 3"></div>
  </div>
</body>
</html>

Solución: Asegúrate de que las imágenes se dispongan en una fila y se ajusten automáticamente al tamaño de la pantalla utilizando display: inline-block.

Conclusión

La propiedad display es esencial para controlar cómo se muestran y comportan los elementos en una página web. Desde la creación de diseños básicos hasta la implementación de complejos sistemas de diseño como Flexbox y Grid, display es una herramienta fundamental en el arsenal de cualquier desarrollador web. Con una comprensión sólida de esta propiedad, puedes crear diseños más eficientes y efectivos.

◄ Anterior
◄
Siguiente ►
►

Maestría en CSS: De Principiante a Avanzado

Módulo 1: Introducción a CSS

Módulo 2: Estilización de Texto y Fuentes

Módulo 3: Modelo de Caja y Diseño

Módulo 4: Posicionamiento y Flotación

Módulo 5: Flexbox

Módulo 6: CSS Grid

Módulo 7: Técnicas Avanzadas de CSS

Módulo 8: Diseño Responsivo

Módulo 9: Preprocesadores y Frameworks

Módulo 10: Mejores Prácticas y Optimización

Módulo 11: Proyecto: Construyendo un Sitio Web Responsivo

El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados