Anchos fluidos con porcentajes
Utilice anchos basados en porcentajes para crear diseños que se adapten al tamaño de su contenedor.
Anchos fluidos con porcentajes es una lección gratuita de CSS Academy en CoddyKit. Esta es la lección 2 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.
¿Por qué usar anchos fluidos?
Los diseños de ancho fijo (en píxeles) fallan en pantallas más estrechas que ese ancho. Los anchos fluidos que utilizan porcentajes permiten que los diseños se escalen proporcionalmente a cualquier tamaño de contenedor o de ventana gráfica.
Conceptos básicos del ancho porcentual
Un ancho porcentual es relativo al ancho del contenedor principal. Un elemento secundario con width: 50% siempre tendrá la mitad del ancho de su elemento principal.
<div style="width:300px;border:1px dashed #999;padding:4px;">
<div class="half-width" style="background:#4f8cff22;border:1px solid #4f8cff;">width: 50%</div>
<div class="third-width" style="background:#ffb84d22;border:1px solid #ffb84d;">width: 33.333%</div>
</div>Porcentajes y dimensionamiento de cajas
Con box-sizing: border-box, los anchos porcentuales incluyen el relleno y el borde. Esto facilita las columnas porcentuales: 50% representa realmente la mitad, independientemente del relleno.
<div style="width:300px;border:1px dashed #999;">
<div class="col-half" style="background:#4f8cff22;border:1px solid #4f8cff;">50% including padding/border</div>
</div>Diseño fluido de dos columnas
Un diseño fluido sencillo basado en float (heredado):
<div style="width:100%;overflow:auto;">
<div class="col" style="background:#4f8cff22;border:1px solid #4f8cff;">Column A</div>
<div class="col" style="background:#ffb84d22;border:1px solid #ffb84d;">Column B</div>
</div>Columnas fluidas con Flexbox
Usar Flexbox para crear diseños de columnas fluidas es más limpio:
<div class="flex-row">
<div class="col-main" style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Main (flex: 2)</div>
<div class="col-side" style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Side (flex: 1)</div>
</div>Relleno porcentual
El relleno porcentual siempre es relativo al ancho del elemento principal (no a su altura), incluso en el relleno superior e inferior. Esto permite aplicar técnicas para mantener la relación de aspecto:
<div class="video-wrapper" style="background:linear-gradient(135deg,#4f8cff,#7ee787);"></div>Relación de aspecto moderna
La propiedad aspect-ratio sustituye a la técnica del relleno para mantener las relaciones de aspecto:
<div class="video-wrapper" style="background:linear-gradient(135deg,#4f8cff,#7ee787);"></div>max-width con diseño fluido
Combinar anchos porcentuales con max-width evita que las líneas sean demasiado anchas en pantallas grandes:
<article class="article" style="background:#4f8cff11;border:1px solid #4f8cff;padding:8px;">Article column — 90% wide, capped at 800px, centered</article>Problema con la altura porcentual
La altura porcentual requiere que el elemento principal tenga una altura definida. Si el elemento principal tiene height: auto, las alturas porcentuales de sus elementos secundarios también se calcularán como auto.
Palabras clave de dimensionamiento intrínseco
El CSS moderno añade más opciones de dimensionamiento fluido:
min-content: el tamaño mínimo que se ajusta al contenidomax-content: el tamaño que permite ajustar todo el contenido en una líneafit-content: un tamaño entre min-content y max-content
<span class="tag" style="background:#4f8cff22;border:1px solid #4f8cff;display:inline-block;">Tag</span>Patrón de cuadrícula fluida
Una cuadrícula fluida habitual con inline-block (heredado) o CSS moderno:
<div class="grid">
<div style="background:#4f8cff22;border:1px solid #4f8cff;min-height:60px;">A</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;min-height:60px;">B</div>
<div style="background:#7ee78722;border:1px solid #34c759;min-height:60px;">C</div>
</div>Comprobación rápida
Un elemento padre tiene un ancho de 600px. Un elemento hijo tiene width: 60% y padding: 20px (box-sizing: border-box). ¿Cuál es el ancho del contenido del elemento hijo?
Resumen
Los anchos porcentuales crean diseños fluidos que se ajustan al contenedor padre. Combínelos con max-width para evitar que el contenido sea demasiado ancho. Use aspect-ratio para los medios adaptables. Flexbox y Grid gestionan las columnas fluidas de forma más elegante que los floats porcentuales.
Aprende CSS con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 40
- Lecciones
- 159
Preguntas frecuentes
¿La lección «Anchos fluidos con porcentajes» es gratis?
Sí — el texto completo de «Anchos fluidos con porcentajes» 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 «Anchos fluidos con porcentajes»?
Utilice anchos basados en porcentajes para crear diseños que se adapten al tamaño de su contenedor. 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 2 de 4.
¿Cuánto tiempo toma la lección «Anchos fluidos con porcentajes»?
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
- Enfoque Mobile-First frente a Desktop-First
- Anchos fluidos con porcentajes
- Patrones Min-Width y Max-Width
- Imágenes adaptables y el elemento Picture