calc() para cálculos dinámicos
Combine unidades y realice operaciones aritméticas en CSS mediante la función calc() para obtener valores dinámicos.
calc() para cálculos dinámicos es una lección gratuita de CSS Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de CSS Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de CSS Academy incluye 4 lecciones en total.
¿Qué es calc()?
calc() permite realizar operaciones aritméticas directamente en los valores de las propiedades CSS. Puede combinar distintas unidades (px, %, rem, vw) en un solo cálculo.
Sintaxis básica de calc()
Admite suma (+), resta (-), multiplicación (*) y división (/). Es necesario incluir espacios alrededor de los operadores + y -.
<div class="sidebar">Sidebar (100% - 240px)</div>Combinación de unidades
La gran ventaja de calc() es que permite combinar unidades incompatibles que, de otro modo, no se podrían mezclar:
<div class="hero">Hero</div>
<div class="column">Column</div>calc() con variables CSS
Combine calc() con propiedades personalizadas de CSS para crear tokens de diseño dinámicos:
<div class="main">Main content</div>calc() anidado
calc() puede anidarse, aunque rara vez es necesario, ya que cada contexto ya evalúa las operaciones matemáticas:
<div class="element">Element</div>calc() para tipografía fluida
Utilice calc() para crear una interpolación lineal entre dos tamaños:
<h1>Fluid Heading</h1>División en calc()
La división requiere que el divisor sea un número sin unidades:
<div class="thirds">Third width</div>calc() con Grid y Flexbox
Resulta útil dentro de las definiciones de tracks y de flex-basis:
<div class="grid"><div>A</div><div>B</div></div>calc() frente a otras funciones
Cuándo utilizar cada una:
calc(): operaciones aritméticas arbitrarias, especialmente al combinar unidadesmin()/max(): elegir la opción menor o mayorclamp(): limitar un valor fluido entre un mínimo y un máximo
Compatibilidad con navegadores
calc() es compatible con todos los navegadores modernos y con IE11. Es una de las funciones CSS con mayor compatibilidad. Puede utilizarla sin alternativas en cualquier proyecto moderno.
Patrones comunes de calc()
Patrones prácticos que utilizará repetidamente:
<div class="full-height">Full height minus header</div>
<div class="half-minus-gap">Half minus gap</div>
<div class="row"><div class="thirds-with-gaps">Third</div></div>Comprobación rápida
¿Qué expresión calc() produce el resultado correcto para «el 30 % del elemento padre menos 20 px»?
Resumen
calc() permite realizar operaciones aritméticas en CSS con unidades combinadas. Hace posibles diseños dinámicos, como «el viewport completo menos un encabezado fijo», y la interpolación fluida de la tipografía. Es necesario incluir espacios alrededor de los operadores + y -. Combínela con variables CSS para realizar operaciones potentes con tokens de diseño. Utilícela junto con min/max/clamp para controlar completamente los tamaños fluidos.
Preguntas frecuentes
¿La lección «calc() para cálculos dinámicos» es gratis?
Sí — el texto completo de «calc() para cálculos dinámicos» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de CSS Academy, actualiza a CoddyKit PRO. El curso de CSS Academy incluye 4 lecciones en total.
¿Qué aprenderé en «calc() para cálculos dinámicos»?
Combine unidades y realice operaciones aritméticas en CSS mediante la función calc() para obtener valores dinámicos. Practicas CSS Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar CSS Academy?
No se requiere experiencia previa. CSS Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «calc() para cálculos dinámicos»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de CSS Academy?
Sí. Cada lección de CSS Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- calc() para cálculos dinámicos
- min(), max() y clamp() para valores fluidos
- repeat() y minmax() en Grid
- color-mix() y sintaxis de color relativa