Quiz del módulo 2

Este quiz combina conexión de estilos, especificidad y cálculo de cajas. Considera una tarjeta con width: 300px, padding horizontal de 20 px y borde horizontal de 1 px. En el modelo por defecto, su ancho visible es 342 px. El margen queda fuera de esa suma.

Ejemplo resuelto

Si ambas reglas normales pertenecen al mismo origen y capa de la cascada y cambian la misma propiedad del párrafo, .aviso gana frente a p por mayor especificidad. El cálculo es 300 + 20 + 20 + 1 + 1 = 342.

1. Identifica qué archivo carga la hoja externa.

2. Compara la especificidad de tipo, clase e identificador sin usar valores arbitrarios.

3. Suma contenido, dos paddings y dos bordes.

4. Separa el margen del ancho visible.

Error frecuente y corrección

Sumar solo un padding y un borde produce 321 px. Cada lado tiene su propio valor; escribe la operación completa antes de corregir CSS.

Pruébalo

Responde: ¿qué selector gana entre p y .nota? ¿Cuánto mide una caja con ancho 180 px, padding de 10 px por lado y borde de 3 px por lado? ¿Qué capa crea separación externa?

Comprueba tu resultado

Con las mismas condiciones de origen, importancia y capa, gana .nota, el ancho es 206 px y la capa es margin. Si se usa box-sizing: border-box, el ancho declarado pasa a incluir padding y borde, por lo que el cálculo cambia.