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. 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
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. Absolute positioning
position:relative;
A relative positioned element is positioned relative to
its normal position.
http://jsfiddle.net/MicheleBertoli/pq4A5/
17
Basic / Layout
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. 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
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
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. 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. 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. 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
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. 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
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