Modelo de Caja y Diseño

## Objetivos de Aprendizaje - Entender el modelo de caja CSS - Dominar las propiedades de margin, padding y border - Controlar el box-sizing - Trabajar con propiedades de display ## El Modelo de Caja Cada elemento HTML es una caja con cuatro partes: 1. Content - el área de contenido real 2. Padding - espacio dentro del borde 3. Border - el borde del elemento 4. Margin - espacio fuera del borde ```text ┌─────────────────────────────────────┐ │ MARGIN │ │ ┌───────────────────────────────┐ │ │ │ BORDER │ │ │ │ ┌───────────────────────────┐ │ │ │ │ │ PADDING │ │ │ │ │ │ ┌───────────────────────┐ │ │ │ │ │ │ │ CONTENT │ │ │ │ │ │ │ └───────────────────────┘ │ │ │ │ │ └───────────────────────────┘ │ │ │ └───────────────────────────────┘ │ └─────────────────────────────────────┘ ``` ## Content ```css .box { width: 300px; height: 200px; } ``` ## Padding ```css .box { /* Todos los lados */ padding: 20px; /* Arriba/abajo, izquierda/derecha */ padding: 10px 20px; /* Arriba, derecha, abajo, izquierda */ padding: 10px 15px 20px 25px; /* Lados individuales */ padding-top: 10px; padding-right: 15px; padding-bottom: 20px; padding-left: 25px; } ``` ## Border ### Ancho de Borde ```css .box { border-width: 2px; border-width: thin medium thick 10px; } ``` ### Estilo de Borde ```css .box { border-style: solid; border-style: dashed; border-style: dotted; border-style: double; border-style: groove; border-style: ridge; border-style: inset; border-style: outset; } ``` ### Color de Borde ```css .box { border-color: red; border-color: #ff0000; border-color: rgb(255, 0, 0); } ``` ### Abreviación de Borde ```css .box { border: 2px solid #333; border: 1px dashed red; } ``` ### Bordes Individuales ```css .box { border-top: 2px solid black; border-bottom: 1px dashed gray; } ``` ### Border Radius ```css .box { border-radius: 5px; border-radius: 10px 5px; border-radius: 50%; border-radius: 50px 10px 20px 5px; } ``` ## Margin ```css .box { /* Todos los lados */ margin: 20px; /* Arriba/abajo, izquierda/derecha */ margin: 10px auto; /* Lados individuales */ margin-top: 10px; margin-right: 15px; margin-bottom: 20px; margin-left: 25px; } ``` ### Centrar con Auto ```css .container { width: 80%; margin: 0 auto; } ``` ### Colapso de Margen Los márgenes verticales entre elementos adyacentes colapsan: ```css .paragraph1 { margin-bottom: 20px; } .paragraph2 { margin-top: 30px; } /* El espacio real entre ellos es 30px, no 50px */ ``` ## Box Sizing ### Content Box (Por Defecto) ```css .box { width: 200px; padding: 20px; border: 2px solid black; /* Ancho total: 200 + 40 + 4 = 244px */ box-sizing: content-box; } ``` ### Border Box (Recomendado) ```css .box { width: 200px; padding: 20px; border: 2px solid black; /* Ancho total: 200px (padding y border incluidos) */ box-sizing: border-box; } ``` ### Border Box Global ```css *, *::before, *::after { box-sizing: border-box; } ``` ## Propiedad Display ### Elementos de Bloque ```css div, p, h1, ul, li { display: block; } .block { display: block; width: 100%; /* Por defecto para bloque */ /* Toma el ancho completo, comienza en nueva línea */ } ``` ### Elementos en Línea ```css span, a, strong { display: inline; } ``` ### Inline-Block ```css .button { display: inline-block; width: 200px; /* El ancho funciona en inline-block */ padding: 10px; /* Fluye con el texto pero acepta propiedades del modelo de caja */ } ``` ### None ```css .hidden { display: none; /* El elemento se elimina del diseño */ } .invisible { visibility: hidden; /* El elemento está oculto pero el espacio se preserva */ } ``` ### Display Contents ```css .parent { display: contents; /* El padre se vuelve transparente, los hijos renderizan directamente */ } ``` ## Visibilidad ```css .visible { visibility: visible; /* Por defecto */ } .hidden { visibility: hidden; /* Oculto pero espacio preservado */ } .collapsed { visibility: collapse; /* Para filas de tabla, colapsa el espacio */ } ``` ## Overflow ```css .box { overflow: visible; /* Por defecto, el contenido se sale */ overflow: hidden; /* Oculta el contenido que se desborda */ overflow: scroll; /* Siempre muestra barras de desplazamiento */ overflow: auto; /* Muestra barras solo cuando es necesario */ } ``` ### Overflow-x y Overflow-y ```css .box { overflow-x: auto; /* Desplazamiento horizontal si es necesario */ overflow-y: hidden; /* Ocultar desbordamiento vertical */ } ``` ## Width y Height ### Min y Max ```css .container { width: 80%; min-width: 300px; max-width: 1200px; } .image { max-width: 100%; height: auto; } ``` ### Fit Content ```css .box { width: fit-content; margin: 0 auto; } ``` ## Ejemplo Práctico ```css .card { width: 300px; padding: 20px; border: 1px solid #ddd; border-radius: 8px; margin: 20px auto; box-sizing: border-box; } .card-title { font-size: 1.5em; margin-bottom: 10px; } .card-body { color: #666; line-height: 1.6; } ``` ## Resumen - Modelo de caja: content, padding, border, margin (de afuera hacia adentro) - `box-sizing: border-box` hace el dimensionamiento más intuitivo - `margin: 0 auto` centra elementos de bloque - Los márgenes verticales colapsan entre elementos adyacentes - `display: block` toma el ancho completo; `inline` fluye con el texto; `inline-block` hace ambas cosas - `display: none` elimina del diseño; `visibility: hidden` oculta pero preserva el espacio - `overflow` controla cómo se maneja el contenido que excede su contenedor