#2 - CSS Layouts Overview

Tecniche di animazione
digitale I

Michele Bertoli
Founder / Lead Software Engineer at Igloo

igloolab.com
michele.bertoli@accademiasantagiulia.it

Agenda
HTML5 structure 5

Layout 10

Block vs Inline

Floats

Absolute positioning

Flexbox

CSS regions

Box model 35

CSS Reset 40

4
Basic / Agenda

A typical page structure

• Header
• Main content

• Sidebar(s)
• Navigation
• Footer

6
Basic / HTML5 structure

HTML 4.01

7

HTML 5

8

Samples

• http://2010dev.wordpress.com
• http://twentyelevendemo.wordpress.com/

9

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

ﬂoat:left;

http://jsfiddle.net/MicheleBertoli/edamS/
http://jsfiddle.net/MicheleBertoli/edamS/1/

ﬂoat:right;


13
Basic / Layout

The 'clear' property

This property indicates which sides of an
element's box(es) may not be adjacent to
an earlier floating box.

14
Basic / Layout

Samples

clear:left;
clear:right;
clear:both;


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.


16
Basic / Layout


position:relative;

A relative positioned element is positioned relative to
its normal position.

http://jsfiddle.net/MicheleBertoli/pq4A5/

17
Basic / Layout


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/

18
Basic / Layout


position:ﬁxed;

An element with fixed position is positioned relative to
the browser window.

19
Basic / Layout

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

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

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

#2 - CSS Layouts Overview

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (13)

Similar a #2 - CSS Layouts Overview

Similar a #2 - CSS Layouts Overview (20)

#2 - CSS Layouts Overview