CSS Estructura.

Presentación del tema: "CSS Estructura."— Transcripción de la presentación:

1 CSS Estructura

2 Estructura CSS CSS3 permite posicionar los div en la página, float
   <style type="text/css"> div { float: left; padding: 5px; margin-right: 5px; margin-bottom: 5px; border: 1px solid #666; } </style>

3 Estructura CSS CSS3 permite posicionar los div en la página, float y clear Con float el div “flota” a una posición relativa.   

4 Estructura CSS CSS3 permite posicionar los div en la página, float y clear Con clear rompe el esquema del float.   

5 Estructura CSS Uso de float y un div clear que rompe el esquema del float.   

6 Estructura CSS CSS3 permite posicionar los div en la página, mediante position, absoluta, relativa o fija. Con posición absoluta el div sale del flujo del contenido.   

7 Estructura CSS Con posición fija el div no cambia de posición en el escalado del navegador o el scroll en la página.   

8 Estructura CSS Las cajas flexibles, se consigue con un nuevo valor de la propiedad display, (display: flex;) de la caja padre. La orientación se define con flex-direction y puede ser horizontal o vertical, según sea fila o columna. Los elementos flexibles tienen diferentes formas de alinearse y distribuirse justify-content y align-items. Cada uno de los elementos puede ordenarse o los diferentes modos crecer o Reducirse para ocupar el espacio.    No todos los navegadores la soportan y es candidata

9 Estructura CSS La nueva propiedad de cajas flexibles, es la forma más sencilla de controlar el aspecto de las cajas div.    No todos los navegadores la soportan y es candidata

10 Recursos CSS MDN Usando las cajas flexibles CSS
CSS-TRICKS A Complete Guide to Flexbox   

11 CSS Fin del tema

12 Ejercicio Realiza la estructura de una página que contenga todos los elementos que se indican en el siguiente esquema: