Introduction to box model in CSS. Content, Padding, Border and Margin.

1. CSS
box model
Clic para ver el código

2. Lab
Repaso del lab-02
Live coding

3. Lab_02
En una carpeta con el nombre:
lab_02_nombre_apellido
Zipear y mandar por mail

4. Especificaciones lab_02
HTML:
Crear un formulario con los siguientes campos: nombre completo, correo electrónico, contraseña y
botón de enviar.
Usar etiquetas adecuadas para cada campo, como input y label.
Asegurarse de incluir los atributos type y name para cada campo de entrada.
CSS:
Desde Google fonts utilizar una fuente legible para todo el formulario.
Añadir un ancho de borde de 2 píxeles y un color de borde gris claro a todos los campos de entrada.
Redondear los bordes de todos los campos de entrada en un radio de 4 píxeles.
Agregar un margen de 20 píxeles alrededor de todo el formulario.
Centrar el formulario en la página.
Establecer el tamaño de fuente de los títulos de los campos en 16 píxeles y negrita.
Establecer el tamaño de fuente de los campos de entrada en 14 píxeles.

5. Ruta relativa vs absoluta
• Absoluta (no importa donde estoy)
• https://www.example.com/
• Relativa (importa donde estoy)
• style.css
• Navegando por carpetas
• Moverse entre niveles

6. • Mismo nivel
• Style.css
• Favicon.css
• Info.html
• Superior
• ../about.html
• ../gal/clasico.jpg
• Interior
• img/logo.jpg
• style/main.css

7. ejemplos
• <img src=“pics/compu.jpg” alt=“”>
• <a href=“../index.html”></a>
• <link rel=“stylesheet” href=“style/main.css”>

8. Dividir el contenido
• <span></span> es un divisor en línea
• <div></div> es un divisor en bloque

9. Modelo de caja (box model)

10. Modelo de caja (box model)

11. Margen automático para centrar
Mantenlo simple…
El margen automático es una técnica común para centrar elementos
horizontales
¿Cómo?
Un margen izquierdo y otro derecho en valor auto

12. Margen automático
selector {
margin: 2px auto;
}

13. Modelo de caja
selector {
display: inline-block;
border: 5px solid green;
padding: 5px 20px 5px 20px;
margin: 2px auto;
width: 20px;
height: 30px;
}