CSS 6 - Box Model

3,804 views
3,695 views

Published on

Curso de Estándares Web - Día #7

* Explicación del Box Model
* Sintaxis
* Margin, Padding, Border, Width, Height
* IE5 Bug

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,804
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
83
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

CSS 6 - Box Model

  1. 1. CSS The Box Model Harold Maduro
  2. 2. xHTML Cada elemento HTML, genera una caja rectangular llamada “element box”.
  3. 3. xHTML 1.0 Tipos de elementos o “element box” • Block Elements • Inline Elements
  4. 4. xHTML 1.0 Block Element • Como por ejemplo: P, H1, H2, DIV • Genera nuevas líneas antes y después de su recuadro en el “normal flow” del documento • Se acomodan verticalmente, uno debajo del anterior • Un block element puede tener como hijos y descendientes a otros block elements y a inline elements
  5. 5. xHTML 1.0 Inline element • Como STRONG, EM, SPAN • No generan nuevas líneas antes y después de su contenido • Son descendientes de un block element • Un inline element sólo puede tener como hijos y descendientes a otros inline elements • No es posible que un inline element tenga como hijo o descendiente a un block element
  6. 6. Block Element Cada elemento en el documento, es considerado como una caja rectangular (de un ancho y alto específico) que guarda un contenido (content area); el cual está rodeado de padding, borders y margins.
  7. 7. Block Element Anatomía • Contenido (el texto) • Margins • Paddings • Border • Ancho (width) • Alto (height)
  8. 8. Block Element Los margins siempre son transparentes. Los bordes pueden ser de distintos colores, formas y tamaños. El background del elemento ocupa toda la parte posterior del contenido y del padding, hasta topar con el border.
  9. 9. <p> Content Area </p>
  10. 10. Interactive CSS Box Model Demo http://redmelon.net/tstme/box_model/ Douglas Livingstone
  11. 11. Width El ancho del elemento p { width: auto; } p { width: 500px; } p { width: 50%; } p { width: 20em; } p { width inherit; }
  12. 12. Height El alto del elemento p { height: auto; } p { height: 500px; } p { height: 20em; } p { height inherit; }
  13. 13. Width & Height Son ignorados si se le aplican a un inline element.
  14. 14. Margins Los margins están afuera del border.
  15. 15. Margins Es el espacio vacío entre dos elementos.
  16. 16. Margins Margin
  17. 17. Margins Se puede especificar cada lado por separado p{ margin-top: 20px; margin-left: 25px; margin-right: 66px; margin-bottom: 100px; }
  18. 18. Margins Se puede utilizar la sintaxis resumida p { margin: 10px 20px 30px 40px; } Clockwise: arriba, derecha, abajo, izquierda
  19. 19. Margins Se puede utilizar la sintaxis resumida p { margin: 10px 20px 30px 40px; } Clockwise: top, right, bottom, left
  20. 20. Margins Se puede utilizar la sintaxis resumida TRouBLe Clockwise: top, right, bottom, left
  21. 21. Margins Se pueden mezclar diferentes unidades de medida p { margin: 10px 20in 30% 40em; }
  22. 22. Margins Se puede especificar que todos los lados tengan el mismo margin p { margin: 20px; }
  23. 23. Margins Margin Collapse Los margins de arriba y abajo tienen una propiedad diferente a los laterales; llamada “margin collapse”. Cuando hay dos elementos posicionados uno arriba del otro; el espacio entre ellos es el tamaño del margin más grande; no el tamaño de los dos márgenes sumados.
  24. 24. Margins Margin Collapse Si le especifican a los P un margin top de 10px y un margin bottom de 10px; el espacio entre dos P será de 10px, no de 20px.
  25. 25. Margins Margin Collapse Si le especifican a los DIV un margin bottom de 20px y otro con un margin top de 15px; el espacio entre dos DIV será de 20px, no de 35px, ni 25px.
  26. 26. Margins Margin Collapse margin-bottom: 20px margin-top: 20px margin-top: 15px margin-top: 15px
  27. 27. Borders Inserta un (¡gasp!) borde alrededor del objeto.
  28. 28. Borders Border Content Area
  29. 29. Borders Son una o dos líneas que rodean el contenido del elemento.
  30. 30. Borders Bordes que rodean a todo el elemento p{ border-style: dashed; border-color: #f00; border-width: 10px; }
  31. 31. Borders Styles Son distintos tipos o estilos de borde p{ border-style: dashed; border-color: #f00; border-width: 10px; }
  32. 32. Borders Styles Son distintos tipos o estilos de borde Valores Disponibles none dotted dashed solid double groove ridge inset outset
  33. 33. Borders Color Se especifica el color del borde. p{ border-style: dashed; border-color: #f00; border-width: 10px; }
  34. 34. Borders Color Se puede especificar un border color, pero el borde hereda el color del elemento, en el caso de no ser especificado. p { border-style: dashed; color: red; } p { border-style: dashed; border-color: #f00; }
  35. 35. Borders Width El ancho del borde p{ border-style: dashed; border-color: #f00; border-width: 10px; }
  36. 36. Borders Width El ancho del borde p { border-width: thick; } p { border-width: 2px;}
  37. 37. Borders Width Valores thin medium thick ( tamaño en unidad de medida ) inherit
  38. 38. Borders p{ border-width: 2px; border-color: #f00; border-style: solid; }
  39. 39. Borders Se puede detallar el lado que queremos modificar p{ border-left-with: 1px; border-left-style: dotted; border-left-color: #333; }
  40. 40. Borders p{ border-left-with: 1px; Se puede detallar border-left-style: dotted; bordes diferentes border-left-color: #333; para cada lado border-top-with: 3px; border-top-style: solid; border-top-color: #f00; border-bottom-with: 10px; border-bottom-style: double; border-bottom-color: yellow; border-right-with: 5px; border-right-style: groove; border-right-color: #000; }
  41. 41. Borders Versión Resumida (Short hand version) p{ border-left: 1px solid #00f; }
  42. 42. Borders Versión Resumida Se pueden especificar los cuatro lados por separado p{ border-top: 1px solid #000; border-right: 2px groove #fff; border-bottom: 3px dashed #333; border-left: 4px solid #00f; }
  43. 43. Borders Versión resumida igual para todos los lados p { border: 1px solid #00f; }
  44. 44. Padding Es el espacio entre el contenido y el borde Comparte el mismo color o imagen de fondo (background) que se le aplica al contenido del elemento.
  45. 45. Padding Border Padding Content Area
  46. 46. Padding Se puede especificar cada lado por separado p{ padding-top: 20px; padding-left: 25px; padding-right: 66px; padding-bottom: 100px; }
  47. 47. Padding Se puede utilizar la sintaxis resumida p { padding: 10px 20px 30px 40px; } Clockwise: arriba, derecha, abajo, izquierda
  48. 48. Padding Se puede especificar que todos los lados tengan el mismo padding p { padding: 20px; }
  49. 49. El Box Model Completo
  50. 50. Bugs
  51. 51. Internet Explorer 5.0 Internet Explorer 5.0 interpreta incorrectamente el box model. Para IE 5, el width incluye el tamaño total del contenido (width), paddings y borders. Resultado: cajas más chicas en IE 5. IE 5 también permitía aplicarle width y height a elementos inline.
  52. 52. Internet Explorer 5.0 Para solucionarlo, podemos utilizar: * El box model hack * Especificar un set de stylesheets diferente para IE 5 con el conditional * Podemos dejar de especificar paddings y borders para elementos que tienen declarado un width específico.
  53. 53. Box Model Hack Para IE 5 http://www.tantek.com/CSS/Examples/boxmodelhack.html Tantek Çelik
  54. 54. Bibliografía CSS: The Definitive Guide Eric Meyer Amazon: http://tinyurl.com/5hs7jf
  55. 55. W3C Spec CSS 2 Box Model http://www.w3.org/TR/CSS21/box.html W3C

×