2. Objectives
Assess the CSS box model
Set element width and borders
Set margins and padding
Align elements with float
Control page flow with clear
HTML5 and CSS3 – Illustrated, 2nd Edition 2
3. Objectives (continued)
Implement fixed positioning
Implement relative positioning
Control stacking order
Implement absolute positioning
HTML5 and CSS3 – Illustrated, 2nd Edition 3
4. Assess the CSS Box Model
Box model: used by CSS to represent
characteristics of every web page
element
Treats element as rectangular box
border: border surrounding element
margin: space from border to
neighboring/parent element
padding: space between border and
element content
HTML5 and CSS3 – Illustrated, 2nd Edition 4
5. Assess the CSS Box Model
(continued)
The CSS box model
HTML5 and CSS3 – Illustrated, 2nd Edition 5
6. Assess the CSS Box Model
(continued)
Box model properties
HTML5 and CSS3 – Illustrated, 2nd Edition 6
7. Assess the CSS Box Model
(continued)
CSS units of measure
Relative units: ems, percent, rems
Absolute units: pixels
Commonly used CSS units of
measure
HTML5 and CSS3 – Illustrated, 2nd Edition 7
8. Assess the CSS Box Model
(continued)
Size of padding, margin, and
border increase the amount of space
occupied by an element
Dimensions of these properties not
included in specified width / height
• Specified width and height refer only to the
content of an element
• To calculate add the total space, add the
width value to the padding, margin, and
border values
HTML5 and CSS3 – Illustrated, 2nd Edition 8
9. Assess the CSS Box Model
(continued)
Calculating web page space occupied
by an element
HTML5 and CSS3 – Illustrated, 2nd Edition 9
10. Assess the CSS Box Model
(continued)
Collapse: When bottom margin of one
element is adjacent to top margin of
another, the margins combine to the
size of the larger of the two
Affects element size planning
Separate property for each side of
padding and margin, e.g.
padding-top: 2px;
margin-right: 1em;
HTML5 and CSS3 – Illustrated, 2nd Edition 10
11. Set Element Width
and Borders
Margin, padding, and border are
shorthand properties
Assign values to multiple CSS properties
Assign values to all four sides of an
element
Assign these values using a single
declaration
Can set width, style, or color of any or
all sides of an element
HTML5 and CSS3 – Illustrated, 2nd Edition 11
12. Set Element Width
and Borders (continued)
Specific properties for the box model
Reset rule: resets one or more
common properties to a common
baseline, e.g.
border: 0
HTML5 and CSS3 – Illustrated, 2nd Edition 12
13. Set Element Width
and Borders (continued)
Code with width and border
declarations
HTML5 and CSS3 – Illustrated, 2nd Edition 13
14. Set Element Width
and Borders (continued)
width and border declarations
rendered in a browser and developer
tools opened to show box model
HTML5 and CSS3 – Illustrated, 2nd Edition 14
15. Set Margins and Padding
Use the shorthand property to assign
multiple values
Separate each value with a space
Meaning of different number of values
Assign auto to left and right margins
to center the element horizontally
HTML5 and CSS3 – Illustrated, 2nd Edition 15
16. Set Margins and Padding
(continued)
Example of padding using three
values and margin using two values
Example of margin set to auto
HTML5 and CSS3 – Illustrated, 2nd Edition 16
17. Align Elements with float
Page flow: the order of elements in the
HTML document
User agents render HTML top to bottom
Easy to create layouts with elements
stacked vertically
Use float, clear, and width
properties to create columns of text
and graphics parallel to each other
Use width property to assign width to
each of the columns
HTML5 and CSS3 – Illustrated, 2nd Edition 17
18. Align Elements with float
(continued)
Example of float applied to element
Use float to create multicolumn
layoutsHTML5 and CSS3 – Illustrated, 2nd Edition 18
19. Align Elements with float
(continued)
Code with float and result in browser
HTML5 and CSS3 – Illustrated, 2nd Edition 19
20. Control Page Flow
with clear
float gives basic control over layout
clear gives more precise control
Prevents floated elements from being
displayed to the left, right, or on the side
of another element
clear property values
HTML5 and CSS3 – Illustrated, 2nd Edition 20
21. Control Page Flow with clear
(continued)
Example of clear property
HTML5 and CSS3 – Illustrated, 2nd Edition 21
22. Control Page Flow with clear
(continued)
Code including clear property and
how it is rendered in a browser
HTML5 and CSS3 – Illustrated, 2nd Edition 22
23. Implement Fixed
Positioning
fixed positioning keeps an element
in the same location, even when the
page is scrolled
Use the position property with the
value of fixed
Then specify
Horizontal position using left or right
Vertical positing using top or bottom
HTML5 and CSS3 – Illustrated, 2nd Edition 23
27. Implement Relative
Positioning
Relative positioning: adjusting default
position of an element
Preserves space allotted to element in
default page flow
Set position property to relative
Style exact location using the properties
•left and right for horizontal positioning
•top and bottom for vertical positioning
HTML5 and CSS3 – Illustrated, 2nd Edition 27
31. Control stacking order
Stacking elements: positioning
elements so that they can overlap
Additional possibilities for layouts
Applies only to positioned element
Elements placed in new layer
Requires careful planning
Stacking order controlled by values
assigned to z-index property
HTML5 and CSS3 – Illustrated, 2nd Edition 31
34. Implement Absolute
Positioning
Absolute positioning: takes element
out of page flow entirely
Allows other elements to flow into space
element would have occupied
Set position property to absolute
Style exact location using left, right,
top, and bottom properties
Location is calculated relative to closest
ancestor element that has position
applied to it
HTML5 and CSS3 – Illustrated, 2nd Edition 34
37. Summary
Box model: used by CSS to represent
characteristics of elements
Treats element as rectangular box
Defines border, margin and padding
Margins of adjacent elements can
collapse into one margin
Specify border width, style,
and/or color of any or all sides
HTML5 and CSS3 – Illustrated, 2nd Edition 37
38. Summary (continued)
Use multiple values to assign margin
and padding values to different sides
Use float to change the default
page flow
Use clear to create a more precise
layout
Use float, clear and width to
create multicolumn layouts
HTML5 and CSS3 – Illustrated, 2nd Edition 38
39. Summary (continued)
Fixed positioning: keeps an element in
the same position, even when the
page is scrolled
Relative positioning: adjusting location
of element relative to its page flow
location using position property
Space preserved
HTML5 and CSS3 – Illustrated, 2nd Edition 39
40. Summary (continued)
Use z-index to create a stacking
order for elements
Stacked elements are placed in new
layers
Absolute positioning: takes elements
out of page flow entirely
Other elements reflow into empty space
HTML5 and CSS3 – Illustrated, 2nd Edition 40