#2 - CSS Layouts Overview


Published on

- HTML5 structure
- Layout
-- Block vs Inline
-- Floats
-Absolute positioning
CSS regions
Box model
CSS Reset

1 Comment
1 Like
No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

#2 - CSS Layouts Overview

  1. 1. Tecniche di animazione digitale I
  2. 2. Michele BertoliFounder / Lead Software Engineer at Igloo igloolab.com michele.bertoli@accademiasantagiulia.it
  3. 3. Basic 2 November 28, 2012
  4. 4. Agenda HTML5 structure 5 Layout 10 Block vs Inline Floats Absolute positioning Flexbox CSS regions Box model 35 CSS Reset 40 4 Basic / Agenda
  5. 5. HTML5 structure
  6. 6. A typical page structure • Header • Main content • Sidebar(s) • Navigation • Footer 6 Basic / HTML5 structure
  7. 7. HTML 4.01 7 Basic / HTML5 structure
  8. 8. HTML 5 8Basic / HTML5 structure
  9. 9. Samples • http://2010dev.wordpress.com • http://twentyelevendemo.wordpress.com/ 9 Basic / HTML5 structure
  10. 10. Layout
  11. 11. Block vs Inline Block: Takes up the full width available, with a new line before and after (e.g. <p>) http://jsfiddle.net/MicheleBertoli/cScJa/ Inline: Takes up only as much width as it needs, and does not force new lines (e.g.<span>) http://jsfiddle.net/MicheleBertoli/cScJa/1/ 11 Basic / Layout
  12. 12. Floats A float is a box that is shifted to the left or right on the current line. The most interesting characteristic of a float (or “floated” or “floating” box) is that content may flow along its side (or be prohibited from doing so by the “clear” property). Content flows down the right side of a leftfloated box and down the left side of a rightfloated box. www.w3.org/TR/CSS21/visuren.html#floats 12 Basic / Layout
  13. 13. Samples float:left; http://jsfiddle.net/MicheleBertoli/edamS/ http://jsfiddle.net/MicheleBertoli/edamS/1/ float:right; http://jsfiddle.net/MicheleBertoli/edamS/2/ http://jsfiddle.net/MicheleBertoli/edamS/3/ 13 Basic / Layout
  14. 14. The clear property This property indicates which sides of an elements box(es) may not be adjacent to an earlier floating box. 14 Basic / Layout
  15. 15. Samples clear:left; clear:right; clear:both; http://jsfiddle.net/MicheleBertoli/edamS/4/ 15 Basic / Layout
  16. 16. Collapsing Collapsing is when a parent element that contains any number of floated elements doesn’t expand to completely surround those elements in the way it would if the elements were not floated. http://jsfiddle.net/MicheleBertoli/edamS/5/ http://jsfiddle.net/MicheleBertoli/edamS/6/ 16 Basic / Layout
  17. 17. Absolute positioning position:relative; A relative positioned element is positioned relative to its normal position. http://jsfiddle.net/MicheleBertoli/pq4A5/ 17 Basic / Layout
  18. 18. Absolute positioning position:absolute; An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is <html>. http://jsfiddle.net/MicheleBertoli/pq4A5/1/ http://jsfiddle.net/MicheleBertoli/pq4A5/2/ 18 Basic / Layout
  19. 19. Absolute positioning position:fixed; An element with fixed position is positioned relative to the browser window. http://jsfiddle.net/MicheleBertoli/pq4A5/3/ http://jsfiddle.net/MicheleBertoli/pq4A5/4/ 19 Basic / Layout
  20. 20. Coffee Break
  21. 21. Flexbox The CSS3 Flexible Box, or flexbox, is a layout mode providing for the arrangement of elements on a page such that the elements behave predictably when the page layout must accommodate different screen sizes and different display devices. 21 Basic / Layout
  22. 22. Flexbox 22 Basic / Layout
  23. 23. Vocabulary Flex container The parent element in which flex items are contained. A flex container is defined using the flex or inline-flex values of the display property. Flex item Each child of a flex container becomes a flex item. Text directly contained in a flex container is wrapped in an anonymous flex item. 23 Basic / Layout
  24. 24. Vocabulary Axes Every flexible box layout follows two axes. The main axis is the axis along which the flex items follow each other. The cross axis is the axis perpendicular to the main axis. Directions The main start/main end and cross start/cross end sides pairs of the flex container describe the origin and terminus of the flow of flex items. They follow the main axis and cross axis of the flex container in the vector established by the writing-mode (left-to- right, right-to-left, etc.). 24 Basic / Layout
  25. 25. Vocabulary Lines Flex items can be laid out on either a single line or on several lines according to the flex-wrap property, which controls the direction of the cross axis and the direction in which new lines are stacked. Dimensions The flex items agnostic equivalents of height and width are main size and cross size, which respectively follow the main axis and cross axis of the flex container. 25 Basic / Layout
  26. 26. CSS vendor prefixes Trident -ms- — All experimental properties are prefixed with "- ms-", e.g. -ms-interpolation-mode instead of interpolation-mode. Gecko -moz- — All experimental selectors, properties and values are prefixed with "-moz-", e.g. ::-moz-selection instead of ::selection. WebKit -webkit- — All experimental selectors, properties and values are prefixed with "-webkit-", e.g. -webkit-boxshadow instead of box-shadow. 26 Basic / Layout
  27. 27. Properties #parent { display: -webkit-box; display: -moz-box; display: box; } .child { -webkit-box-flex: 1; -moz-box-flex: 1; box-flex: 1; } http://jsfiddle.net/MicheleBertoli/EWYFJ/ http://jsfiddle.net/MicheleBertoli/EWYFJ/1/ 27 Basic / Layout
  28. 28. Properties #parent { display: -webkit-box; display: -moz-box; display: box; -webkit-box-direction: reverse; -moz-box-direction: reverse; box-direction: reverse; } http://jsfiddle.net/MicheleBertoli/EWYFJ/2/ 28 Basic / Layout
  29. 29. Browser support http://caniuse.com/#feat=flexbox 29 Basic / Layout
  30. 30. Flexie.js Cross-browser support for the Flexible Box Model. http://flexiejs.com http://flexiejs.com/playground/?random 30 Basic / Layout
  31. 31. Samples http://bennettfeely.com/flexplorer/ 31 Basic / Layout
  32. 32. CSS regions The CSS regions module allows content to flow across multiple areas called regions. 32 Basic / Layout
  33. 33. Browser support http://caniuse.com/#search=css-regions 33 Basic / Layout
  34. 34. Samples http://umaar.github.com/css-region-demo/ 34 Basic / Layout
  35. 35. Box model
  36. 36. Introduction 36 Basic / Box model
  37. 37. Introduction Margin properties specify the width of the margin area of a box. In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin. 37 Basic / Box model
  38. 38. Introduction The padding properties specify the width of the padding area of a box. The border properties specify the width, color, and style of the border area of a box. 38 Basic / Box model
  39. 39. Introduction Width = width + padding-left + padding-right + border-left + border-right Height = height + padding-top + paddingbottom + border-top + border-bottom 39 Basic / Box model
  40. 40. CSS Reset
  41. 41. Introduction The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. 41 Basic / CSS Reset
  42. 42. Introduction Eric Meyer’s “Reset CSS” 2.0 http://meyerweb.com/eric/tools/css/reset/ HTML5 Doctor CSS Reset http://html5doctor.com/html-5-reset-stylesheet/ Yahoo! (YUI 3) Reset CSS http://developer.yahoo.com/yui/reset/ Normalize.css 1.0 http://necolas.github.com/normalize.css/ 42 Basic / CSS Reset
  43. 43. Universal Selector ‘*’ Reset *{ margin: 0; padding: 0; } 43 Basic / CSS Reset
  44. 44. Thank you