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

Ancho y Alto

Siguiente ►
►

En esta lección, aprenderemos cómo controlar las dimensiones de los elementos en CSS utilizando las propiedades width (ancho) y height (alto). Estas propiedades son fundamentales para definir el tamaño de los elementos en una página web y son esenciales para el diseño y la disposición de los componentes.

Propiedades width y height

Sintaxis

element {
  width: valor;
  height: valor;
}

Valores Comunes

  • Auto: El navegador calcula el ancho o alto del elemento automáticamente.
  • Porcentajes: Se basa en el contenedor padre del elemento.
  • Píxeles (px): Unidades absolutas.
  • Em: Relativo al tamaño de la fuente del elemento.
  • Rem: Relativo al tamaño de la fuente de la raíz (html).

Ejemplo Básico

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ancho y Alto en CSS</title>
  <style>
    .caja {
      width: 200px;
      height: 100px;
      background-color: lightblue;
    }
  </style>
</head>
<body>
  <div class="caja"></div>
</body>
</html>

En este ejemplo, el div con la clase caja tendrá un ancho de 200 píxeles y una altura de 100 píxeles.

Unidades de Medida

Unidades Absolutas

  • px: Píxeles
  • cm: Centímetros
  • mm: Milímetros
  • in: Pulgadas

Unidades Relativas

  • %: Porcentaje relativo al contenedor padre.
  • em: Relativo al tamaño de la fuente del elemento.
  • rem: Relativo al tamaño de la fuente de la raíz (html).
  • vw: Porcentaje del ancho de la ventana gráfica.
  • vh: Porcentaje de la altura de la ventana gráfica.

Ejemplo con Unidades Relativas

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Unidades Relativas en CSS</title>
  <style>
    .contenedor {
      width: 50%;
      height: 50vh;
      background-color: lightcoral;
    }
  </style>
</head>
<body>
  <div class="contenedor"></div>
</body>
</html>

En este ejemplo, el div con la clase contenedor tendrá un ancho del 50% del contenedor padre y una altura del 50% de la altura de la ventana gráfica.

Ejercicio Práctico

Ejercicio 1: Ajustar Dimensiones

Crea un div con las siguientes especificaciones:

  • Ancho: 300px
  • Alto: 150px
  • Fondo: verde claro
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ejercicio de Ancho y Alto</title>
  <style>
    .caja-ejercicio {
      width: 300px;
      height: 150px;
      background-color: lightgreen;
    }
  </style>
</head>
<body>
  <div class="caja-ejercicio"></div>
</body>
</html>

Ejercicio 2: Dimensiones Responsivas

Crea un div que tenga un ancho del 80% del contenedor padre y una altura del 30% de la ventana gráfica.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ejercicio de Dimensiones Responsivas</title>
  <style>
    .caja-responsiva {
      width: 80%;
      height: 30vh;
      background-color: lightseagreen;
    }
  </style>
</head>
<body>
  <div class="caja-responsiva"></div>
</body>
</html>

Errores Comunes y Consejos

Errores Comunes

  1. No especificar unidades: Asegúrate de especificar las unidades (px, %, em, etc.) al definir width y height.
  2. Confusión entre unidades absolutas y relativas: Comprende cuándo usar unidades absolutas (px) y cuándo usar unidades relativas (%).

Consejos

  • Usa porcentajes para diseños fluidos: Utilizar porcentajes permite que los elementos se adapten mejor a diferentes tamaños de pantalla.
  • Combina unidades: A veces es útil combinar unidades relativas y absolutas para lograr el diseño deseado.

Conclusión

En esta lección, hemos aprendido cómo utilizar las propiedades width y height para controlar las dimensiones de los elementos en CSS. Hemos explorado diferentes unidades de medida y cómo aplicarlas en ejemplos prácticos. Con esta base, estarás mejor preparado para diseñar y ajustar los elementos en tus proyectos web.

En la próxima lección, profundizaremos en el tamaño de caja y cómo afecta a las dimensiones de los elementos. ¡Sigue adelante!

◄ 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