Este documento explica conceptos clave de CSS como box-sizing, flexbox y float. Box-sizing controla el tamaño de elementos de forma precisa. Flexbox permite posicionar elementos de manera flexible y responsiva. Float posiciona elementos a la izquierda o derecha del contenido. También describe un laboratorio práctico sobre flexbox y box model que involucra crear un contenedor flexible con divs y aplicar propiedades de flexbox.

1. CSS Flexbox

2. Box-sizing
propiedad para controlar el tamaño de los elementos de
manera más precisa y evitar problemas con una
expansión inesperada

3. Box-sizing
.selector {
box-sizing: border-box;
}

4. max-width y min-width
tamaño máximo y mínimo de un elemento

5. Flexbox
Mostrar los elementos en el lugar que queremos
Flexbox es la solución más moderna para el
posicionamiento
Diseños de contenedores flexibles y responsivos.

6. Flexbox
Alinear y distribuir elementos en un contenedor de
manera fácil y flexible

7. Flexbox
.selector {
display: flex;
}

8. Float
Posicionamiento y diseño
Posicionar un elemento a la izquierda o la derecha del
contenido circundante.
Los elementos flotan alrededor de él.

9. Lab_03 CSS Flexbox & Box Model
Directorio: lab_03_nombre_apellido
Entrada: index.html
Estructura de carpetas: css, img
Comprimido: zip o rar
Asunto del mail: lab_03_nombre_apellido

10. Lab_03 CSS Flexbox & Box Model
• Crea una nueva página HTML
• Crea un div con la clase "container"
• Dentro del div "container", agrega 3 divs con la clase "box"
• Apllica CSS a la página que establezca el display como "flex" para el div
"container".
• Utiliza las propiedades de flexbox justify-content, align-items, flex-direction y
flex-wrap para controlar la disposición y el alineamiento de los divs "box".
• Agrega estilos CSS adicionales para establecer el ancho, alto, margen, borde y
relleno para cada uno de los divs "box".
• Experimenta con diferentes valores para el ancho, alto, margen, borde y relleno
para ver cómo afectan el tamaño y la apariencia de los divs "box".
• Agrega la propiedad box-sizing: border-box a los estilos CSS para que el ancho
y alto incluyan tanto el contenido como el borde y el relleno.
• Crea un párrafo explicando que comprendiste sobre flexbox y box model

11. Lab_04 refactoring
• Modificar codigos de la clase 09
• Refactorizar
• DRY: evitar las repeticiones modificando las clases en
html y en css