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.

Presentación del tema: "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."— Transcripción de la presentación:

1 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 inline y/o block. Se le puede asignar una anchura (width) y una altura (height) fija utilizando css.

3 Podemos alterar el tipo por defecto de un elemento html usando las reglas css : display:block y display:inline Cambiando las propiedades de un elemento de block a inline o de inline a block. 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.

4 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 (elmento inline ) Un link con anchura y altura fija (para demostrar que no funciona) Convirtamos un link en elemento block usando display:block; Ejemplos display inline, block:

5 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 La anchura total= widht+pading+border+margin Partamos del siguiente div: 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: 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 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 Opera Opera 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). 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:

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

8

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

10 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 El flujo se desplaza. Se desplaza en relación a su posición original, manteniéndose esta última. Posición original

12 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. Position:relative Márgen izquierdo 200 px P o s i c o n o ri g i n a l

13 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 Ejemplo de como desplazar el cuadro interior 120 px. Position absolute Márgen izquierdo 120

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.

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 Si a nuestro terecer div le cambiamos el id por box2 :

21 En resúmen con 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.