POSICIONAMIENTO:

1. POSICIONAMIENTO: Por principio un DIV, aunque su contenido sea muy pequeño ocupa todo el ancho de su padre generalmente el body, ya que son elementos de bloque. Recordar que todo elemento de bloque lleva consigo un salto de línea. block: elemento que forma un bloque separado. inline: elemento que permanece "en línea" con el resto del contenido.

2. Forma un bloque y se posiciona a sí mismo verticalmente  con un nuevo salto de línea sobre y bajo él. • Toma toda la anchura disponible basándose en la anchura de su elemento padre (contenedor). • Su altura cambia en relación a su contenido. • Puede contener otros elementos inliney/o block. • Se le puede asignar una anchura (width) y una altura (height) fija utilizando css.

3. Se posiciona a sí mismo horizontalmente en línea con el resto del contenido de su elemento padre (contenedor). • Toma la anchura y altura mínima en relación a su contenido. • SOLO puede contener otros elementos inline. • NO se puede imponer una anchura y una altura fija a través de css. Podemos alterar el tipo por defecto de un elementohtml usando las reglas css: display:block y display:inline Cambiando las propiedades de un elemento de block a inlineo de inline a block.

4. Ejemplos displayinline, block: • Un párrafo, el elemento html tipo block en su estado por defecto: (se le ha puesto un borde al párrafo para que se vea claramente la altura y la anchura). • Ejemplo de un párrafo con anchura y altura fija usando css: • Veamos un párrafo convertido a elemento inline usando display:inline; • Un link (elmentoinline )  • Un link con anchura y altura fija (para demostrar que no funciona) • Convirtamos un link en elemento block usando display:block;

5. Haciendo cálculos : La anchura (width) de una caja hace referencia a la anchura del contenido. Para que todo nos encaje es necesario hacer los típicos cálculos de suma de todos sus componentes: La anchura total= widht+pading+border+margin Partamos del siguiente div: Div { Width: 720px; Padding 20px; Border 0; Margin: 10px; } Obteniendo cálculos: Div{ Width: 720px;---------------> 720 Padding 20px;------(20*2)-> 40 (izquierdo y derecho) Border 0; Margin: 10px;------(10*2)-> 20 (izquierdo y derecho) } TOTAL 780px Para la altura (height) ocurre lo mismo: height+padding-top+padding-bottom+border-top-width+border-bottom-width+margin-top+margin-bottom IE es célebre por su cálculo erróneo del modelo de cajas.

6. Prefijos de los navegadores para CSS. Existen etiquetas que no están implementadas convenientemente en los distintos navegadores, caso por ejemplo de algunas HTML 5, se utilizan los prefijos, veamos los más importantes: Apple Corporation-webkit- La mas conocida y utilizada por lo desarrolladores, nos sirve para los navegadores Google Chrome, Safari y otros.Mozilla Foundation-moz-Mozilla Firefox y otros.Opera Software-o-,-xv- Es para OperaOpera Mobile Aliance-wap-Opera Mini, Opera Mobile y otros.Microsoft Corporation-ms-Microsoft, no ta conocido aun pero cada día esta siendo mas implementado por los desarrolladores, lamentablemente solo es para la versión de Internet Explorer 9 (y los siguientes).

7. Truco para que los navegadores ignoren los distintas sumas de valores de los DIVS box-sizing Le indicamos que tome como tamaño 720 pxy no los 780 reales, resultado de las medicas explicadas arrriba, con prefijos para compatibilidad Google y Mozilla. Div { Width: 720px; Padding20px; Border 0; Margin: 10px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } Explicación box-sizing :http://emiliocobos.net/la-propiedad-box-sizing/

9. El posicionamiento normal static: Reducimos a nuestras cajas el ancho en un 20%: 3 cajas * 20=60

10. Posición STATIC: Cuando no se especifican valores, se presupone position:static #caja1{position:static; width:200px;height:200px; border:3px solid #ff0000} #caja1{ width:200px;height:200px; border:3px solid #ff0000}

11. Posición Relativa: El flujo se desplaza. Se desplaza en relación a su posición original, manteniéndose esta última. Posición original

12. Posición Relativa: El flujo se desplaza. Indica el desplazamiento desde el lugar normal desde donde hubiera podido estar. La posición original del documento queda protegida. Seguirán el flujo del documento, relative, hace que los valores se comporten de la misma manera que cuando static. Posicon original Position:relative Márgen izquierdo 200 px

13. Posición ABSOLUTA Se posiciona a una distancia en relación con su padre y siempre y cuando no sea Static. EL elemento sale fuera del flujo. El resto de elementos se comportan como si no estuvieran allí. Útil para cuando queremos una capa siempre allí, caso por ejemplo para poner una montaña de fondo con una caja para un texto.

14. EFECTO DOMINÓ: Se rompe el flujo, y los elementos ocupan la posición original.

15. Con y sin absolute el resultado será el mismo.

16. Position absolute Márgen izquierdo 120 Ejemplo de como desplazar el cuadro interior 120 px.

17. Float en simples palabras es una propiedad de CSS que nos permite “hacer flotar” un elemento a una posición relativa rompiendo el esquema normal de la pagina. Nos permitirá con facilidad crear paginas con 2 o más columnas, entre muchas otras cosas. Esta propiedad tiene 3 valores importantes: Left: Flota el elemento a la Izquierda. Right: Flota el elemento a la Derecha None: Que el elemento no Flota. Float y clear

18. Partamos del siguiente código: El resultado: El primer div flota a la izquierda, y los otros le acompañan

19. Si el float:left lo cambiamos por el float:right El primer div aparece por la derecha y le acompañan los demás. Qué pasaría sin quitamos el float? Y si no caben en su contenedor ? Desbordan a la siguiente fila libre !

20. Clear Sirve para “romper” el esquema que estaba formando float, es decir un salto de línea. Puede tener los siguientes valores: Si a nuestro terecer div le cambiamos el id por box2 :

21. En resúmencon float y left podemos crear nuestros layouts, estructuras o esqueletos de páginas.

22. Hasta ahora estamos hablando fundamentalmente de layout´s Layout líquido o fluido aquel que tiene el ancho de capas variable (usando porcentajes) para que se adapte a las medidas de la pantalla, de forma igual a un líquido se adapta al contenedor donde se encuentra.