Este documento describe los conceptos básicos del box model y posicionamiento en CSS. Explica las propiedades width, height, margin, padding y border que definen el tamaño y espaciado de los elementos. También cubre background, position, display y otras propiedades para controlar la visualización y posicionamiento de elementos. Por último, ofrece ejemplos de layouts comunes y técnicas para centrar contenido en la página.

1. estructura TEMA 4 www.laramarcos.com

2. 4.1 box-model width height margin padding border www.laramarcos.com

3. width height Alto del contenido Elementos de bloque Imágenes Columnas de tabla y grupos Valores Medida auto (valor por defecto) inherit Ancho del contenido Elementos de bloque Imágenes Filas de tabla y grupos Valores Medida auto (valor por defecto) inherit www.laramarcos.com

5. 1 = todos iguales

6. 2 = el 1º para arriba y abajo, el 2º para derecha e izquierda

7. 3 = el 1º para arriba, el 2º para abajo y el 3º para derecha e izquierda

8. 4 = uno para cada uno (agujas del reloj)www.laramarcos.com

9. border shorthand Medida (grosor) Tipo: none (por defecto), hidden, solid, double, dotted, dashed, groove, ridge, inset, outset. Color Para los cuatro bordes (no admite {1, 4}) Si se necesita cambiar alguno en particular: border-top border-bottom border-right border-left www.laramarcos.com

10. Tratamiento del box-model Tamaño final del elemento = width/height + padding + border + margin www.laramarcos.com

11. Tratamiento del box-model Excepto: Si la página no lleva DOCTYPE Si el DOCTYPE es anterior a HTML 4.0 En IE Las páginas codificadas con XHTML 1.0 Y que contienen la declaración de XML www.laramarcos.com

12. 4.2 background color image position repeat www.laramarcos.com

13. Background-color Color de fondo para toda la caja (excepto bordes) Valores Color sólido transparent (por defecto) inherit www.laramarcos.com

14. Background-image Imagen de fondo url (“images/fondo1.png”) Si es más pequeña que la caja: Si se repite, ocupa toda la caja (por defecto) Si no se repite, por debajo se ve el color de fondo Si es más grande: Se muestra la parte que cabe en dicha caja, por defecto empezando por la esquina superior izquierda www.laramarcos.com

15. Background-position Valores (se pueden combinar) Medidas 1 = deslazamiento horizontal (al vertical se le asigna el valor 50% o center) 2 = la 1ª desplazamiento horizontal, la 2ª vertical Palabras clave: left, center, right / top, center, bottom 1 = deslazamiento al que haga referencia (el otro toma el valor 50% o center) 2 = desplazamiento horizontal y vertical (independientemente del orden) www.laramarcos.com

16. Background-repeat Valores repeat (por defecto) repeat-x repeat-y no-repeat inherit www.laramarcos.com

17. 4.3 posicionamiento y visualización POSICIONAMIENTO position static (por defecto) relative absolute fixed + propiedades top, bottom, left y/o right float www.laramarcos.com

18. 4.3 posicionamiento y visualización VISUALIZACIÓN display visibility overflow z-index www.laramarcos.com

19. Position static Recursos: Tamaño (width y height) margin y padding Naturaleza del elemento (de bloque o en línea) www.laramarcos.com

20. Position relative Se indica la posición exacta mediante: top / bottom right / left La referencia es el punto 0,0 de la página El resto de cajas no se inmutan, respetan su hueco Solapamiento www.laramarcos.com

21. Position absolute Se indica la posición exacta mediante: top / bottom right / left La referencia es el punto 0,0 del primer elemento contenedor POSICIONADO El resto de cajas se mueven, ocupan su hueco Solapamiento www.laramarcos.com

22. Position fixed Se indica la posición exacta mediante: top / bottom right / left La referencia es el punto 0,0 del primer elemento contenedor POSICIONADO El resto de cajas se mueven, ocupan su hueco La diferencia, al hacer scroll: la caja SIEMPRE en el mismo sitio de la ventana www.laramarcos.com

23. float Se mueve lo más que pueda hacia la Derecha (right) Izquierda (left ) La referencia es la línea de su posición El resto de cajas se mueven, ocupan su hueco Solapamiento en cuanto a la caja, no a los contenidos www.laramarcos.com

24. clear Para que los contenidos dejen de fluir alrededor de las cajas posicionadas con float right / left both (lo más habitual) Restaura el posicionamiento static Suele ser necesaria para aplicar CSS a los elementos contenedores de elementos float www.laramarcos.com

25. clear www.laramarcos.com

26. DISPLAY Valores inline / block run-in list-item / table /table-row / table-column / table-cell / table-caption, etc. none inherit Desaparece el elemento y sus CONTENIDOS: los demás ocupan su lugar www.laramarcos.com

27. visibility Valores visible (por defecto) hidden collapse inherit Esconde el elemento y sus CONTENIDOS: los demás no se inmutan www.laramarcos.com

28. overflow Comportamiento cuando los contenidos desbordan su caja Valores visible (por defecto) hidden scroll auto inherit www.laramarcos.com

29. Z-index Posición en el eje z de elementos POSICIONADOS Valores Número entero (lo más habitual) 0 = la última capa El número mayor es el que se visualiza en primer lugar www.laramarcos.com

30. 4.4 layout Estructuras habituales Framework: YUI Centrar la página Horizontalmente Verticalmente www.laramarcos.com

32. Fluid/liquid (%)

33. Elastic (em)

34. Híbrida (la más habitual = px + %)www.laramarcos.com

35. yui Layout híbrido probado en los principales navegadores Cambios necesarios DOCTYPE a XHTML 1.0 <meta http-equiv=“Content-Type”> Builder (en tools) www.laramarcos.com

36. Centrar la página Horizontalmente Agrupar todo el contenido en un div margin: 0 auto; Verticalmente Agrupar todo el contenido en un div Darle width y height position: absolute; top: 50%; left: 50%; margin-top: - (height/2) margin-left: - (width/2) www.laramarcos.com