• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
#2 - CSS Layouts Overview

#2 - CSS Layouts Overview



- HTML5 structure

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



Total Views
Views on SlideShare
Embed Views



1 Embed 1

https://twitter.com 1



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.


11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    #2 - CSS Layouts Overview #2 - CSS Layouts Overview Presentation Transcript

    • Tecniche di animazione digitale I
    • Michele BertoliFounder / Lead Software Engineer at Igloo igloolab.com michele.bertoli@accademiasantagiulia.it
    • Basic 2 November 28, 2012
    • Agenda HTML5 structure 5 Layout 10 Block vs Inline Floats Absolute positioning Flexbox CSS regions Box model 35 CSS Reset 40 4 Basic / Agenda
    • HTML5 structure
    • A typical page structure • Header • Main content • Sidebar(s) • Navigation • Footer 6 Basic / HTML5 structure
    • HTML 4.01 7 Basic / HTML5 structure
    • HTML 5 8Basic / HTML5 structure
    • Samples • http://2010dev.wordpress.com • http://twentyelevendemo.wordpress.com/ 9 Basic / HTML5 structure
    • Layout
    • 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
    • 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
    • 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
    • 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
    • Samples clear:left; clear:right; clear:both; http://jsfiddle.net/MicheleBertoli/edamS/4/ 15 Basic / Layout
    • 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
    • Absolute positioning position:relative; A relative positioned element is positioned relative to its normal position. http://jsfiddle.net/MicheleBertoli/pq4A5/ 17 Basic / Layout
    • 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
    • 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
    • Coffee Break
    • 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
    • Flexbox 22 Basic / Layout
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • Browser support http://caniuse.com/#feat=flexbox 29 Basic / Layout
    • Flexie.js Cross-browser support for the Flexible Box Model. http://flexiejs.com http://flexiejs.com/playground/?random 30 Basic / Layout
    • Samples http://bennettfeely.com/flexplorer/ 31 Basic / Layout
    • CSS regions The CSS regions module allows content to flow across multiple areas called regions. 32 Basic / Layout
    • Browser support http://caniuse.com/#search=css-regions 33 Basic / Layout
    • Samples http://umaar.github.com/css-region-demo/ 34 Basic / Layout
    • Box model
    • Introduction 36 Basic / Box model
    • 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
    • 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
    • Introduction Width = width + padding-left + padding-right + border-left + border-right Height = height + padding-top + paddingbottom + border-top + border-bottom 39 Basic / Box model
    • CSS Reset
    • 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
    • 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
    • Universal Selector ‘*’ Reset *{ margin: 0; padding: 0; } 43 Basic / CSS Reset
    • Thank you