Ejercicio de programación con CSS: Modelo de caja

Código
Práctica
0h 20m

Ejercicios CSS Modelo Caja. Aprende a manejar el modelo de caja en CSS mediante ejercicios prácticos y ejemplos detallados.

Dado el siguiente HTML: 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Modelo de Caja en CSS</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="box">Contenido de la caja</div>
</body>
</html>

Se pide escribir código CSS para la clase box que cumpla los siguientes requisitos:

  1. El ancho (width) de la caja debe ser de 200px y el alto (height) de 100px.
  2. El relleno (padding) de la caja debe ser de 20px en todos los lados.
  3. La caja debe tener un borde sólido (border) de 5px de grosor y de color azul.
  4. Debe haber un margen (margin) de 30px en la parte superior e inferior de la caja y el margen izquierdo y derecho debe ser automático para centrar la caja horizontalmente.
  5. Si el contenido llega a desbordar la caja, debe aparecer una barra de desplazamiento.

Notas:

  • Utiliza la propiedad box-sizing para asegurarte de que las dimensiones de la caja se calculan de la forma que deseas.
  • Utiliza la propiedad overflow para controlar lo que sucede cuando el contenido desborda la caja.
Empezar ejercicio de programación

Todos los ejercicios de programación de CSS

Evalúa tus conocimientos con ejercicios de programación en CSS de tipo Test, Puzzle, Código y Proyecto con VSCode.

Propiedades de posicionamiento

CSS
Puzzle

Sombras en texto y cajas

CSS
Test

Sintaxis básica

CSS
Test

Estilos de fuente

CSS
Test

Animaciones y transiciones

CSS
Test

Proyecto CSS Landing page simple

CSS
Proyecto

Propiedades de texto

CSS
Puzzle

Metodologías BEM, SMACSS, OOCSS

CSS
Puzzle

Herencia y cascada

CSS
Test

Reto fondos background CSS

CSS
Código

Reto sintaxis CSS

CSS
Código

Flexbox en diseños modernos

CSS
Puzzle

Reto grid de columnas en CSS

CSS
Código

Selectores avanzados

CSS
Puzzle

Reto formulario estilizado

CSS
Código

Proyecto CSS crear una navbar

CSS
Proyecto

Reto selectores básicos CSS

CSS
Código

Reto Flexbox Card

CSS
Código

Propiedad 'display'

CSS
Test

Variables en CSS

CSS
Puzzle

Grid en diseños de cuadrícula

CSS
Test

Reto tema claro/oscuro con variables

CSS
Código

Reto modelo caja CSS

CSS
Código

Reto implementación de fuentes web

CSS
Código

Diseño responsive con media queries

CSS
Test

Reto unidades de medida

CSS
Código

Sintaxis avanzada

CSS
Puzzle

Elementos 'float' y 'clear'

CSS
Test

Pseudo-clases y pseudo-elementos

CSS
Puzzle

Reto componente responsive

CSS
Código

Proyecto CSS Dashboard Responsive

CSS
Proyecto

Reto Flexbox Hero

CSS
Código

Propiedades de fondo

CSS
Puzzle

Introducción a CSS

CSS
Test

Reto propiedades texto

CSS
Código

Modelo de caja

CSS
Test

Selectores básicos

CSS
Test

Reto especificidad y cascada

CSS
Código

Tutorial para resolver este ejercicio de programación

CSS

CSS

Modelo de caja

Modelo caja

Otros tutoriales de programación con CSS

Introducción A Css

CSS

Introducción Y Entorno

Entorno Para Desarrollar Css

CSS

Introducción Y Entorno

Sintaxis

CSS

Sintaxis De Selectores Y Propiedades

Selectores Básicos

CSS

Sintaxis De Selectores Y Propiedades

Herencia Y Cascada

CSS

Sintaxis De Selectores Y Propiedades

Pseudo-clases Y Pseudo-elementos

CSS

Sintaxis De Selectores Y Propiedades

Colores En Css

CSS

Sintaxis De Selectores Y Propiedades

Unidades De Medida

CSS

Sintaxis De Selectores Y Propiedades

Especificidad

CSS

Sintaxis De Selectores Y Propiedades

Estilos De Fuente

CSS

Estilización De Texto Y Fondo

Propiedades De Texto

CSS

Estilización De Texto Y Fondo

Sombras En Texto Y Cajas

CSS

Estilización De Texto Y Fondo

Propiedades De Fondo

CSS

Estilización De Texto Y Fondo

Fuentes Web

CSS

Estilización De Texto Y Fondo

Efectos De Texto: Gradientes, Recortes

CSS

Estilización De Texto Y Fondo

Tipografía Avanzada

CSS

Estilización De Texto Y Fondo

Propiedades De Posicionamiento

CSS

Modelo Caja

Propiedad 'Display'

CSS

Modelo Caja

Elementos 'Float' Y 'Clear'

CSS

Modelo Caja

Rellenos Y Márgenes

CSS

Modelo Caja

Bordes Y Contornos

CSS

Modelo Caja

Absolute, Fixed, Sticky Y Z-index

CSS

Posicionamiento

Flexbox Para Crear Layouts Y Estructuras

CSS

Flexbox

Css Grid Para Crear Layouts Y Estructuras

CSS

Flexbox

Propiedades Del Contenedor Flex

CSS

Flexbox

Propiedades De Los Items Flex

CSS

Flexbox

Columnas Y Filas En Grid

CSS

Css Grid

Espaciado Y Alineación

CSS

Css Grid

Tipografía Responsive

CSS

Diseño Responsive

Fundamentos Del Diseño Responsive

CSS

Diseño Responsive

Imágenes Responsive

CSS

Diseño Responsive

Funciones Matemáticas

CSS

Variables Y Funciones Css

Transformaciones 2d

CSS

Transformación, Transición, Animación

Transformaciones 3d

CSS

Transformación, Transición, Animación

Animaciones

CSS

Transformación, Transición, Animación

Transiciones

CSS

Transformación, Transición, Animación

Css Para Formularios

CSS

Css Avanzado

Accesibilidad Web Con Css

CSS

Css Avanzado

Container Queries

CSS

Css Avanzado

Selectores Avanzados

CSS

Css Avanzado

Animaciones Y Transiciones

CSS

Técnicas Modernas Y Metodologías

Variables En Css

CSS

Técnicas Modernas Y Metodologías

Diseño Responsive Con Media Queries

CSS

Técnicas Modernas Y Metodologías

Metodologías De Escritura En Css

CSS

Técnicas Modernas Y Metodologías