The Positioning Model CSS Box Model Remember that CSS views all HTML 5 elements as a rectangular box consisting of A margin around the box A border Padding which is the boundary from the content to the border of the box ID: 599402
Download Presentation The PPT/PDF document "MORE Cascading Style Sheets" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Slide1
MORE Cascading Style Sheets
(The Positioning Model)Slide2
CSS (Box Model)
Remember that CSS views all HTML 5 elements as a rectangular box consisting of
A margin around the box
A border
Padding, which is the boundary from the content to the border of the box
The box’s contentSlide3
CSS (Box Model)Slide4
CSS Box Model (Description)
margin
– Whitespace (transparent) surrounding the border
border
- A border inside the margin. The border is affected by the background color of the box
padding
– Whitespace inside the border and outside the content
Padding is affected by the background color of the box
content
- The content of the box, where text and images appearSlide5
Box Size
The box size is controlled by two properties
width
Use relative measures to size around the parent window or browser window
Absolute values work too
height
Contents will overflow the box if the height
is setSlide6
CSS Box Model (Margin)
Margin appears outside of the border
Margins have no color They are always transparent
Use margins to create padding next to adjacent elementsSlide7
CSS Box Model
(Margin – Example)
Set all box margins
margin: 10px
;
Set the individual box margins
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;Slide8
Outline
The
outline
property works like the
border
property
It appears outside of the border for emphasis
It has a
style
,
color
, and
width
See BoxIntro.htmSlide9
Padding
The space inside the border and surrounding the box content
Set all at once or the individual sides
padding-top
padding-bottom
padding-left
padding-rightSlide10
Positioning Elements (Introduction)
So far, we have applied styles to format text or to format various box margins
Here, we are talking about how to explicitly position the box itself relative to other boxes
This discussion involves the concept of
flow
Pay particular attention to the use of the
<div>
and
<span>
tagsSlide11
Flow (Introduction 1)
There are two types of flow (positioning)
Block
Elements start on a new line
By default, they are the same width as their container
<div>
,
<p>
Inline
An element starts on the same line as the preceding element
<
img
>
,
<span>
,
<
em
>
, etc..Slide12
Flow (Introduction 2)
It’s possible to control flow using the CSS
position
property
static
fixed
relative
absolute
floatSlide13
Positioning (Static)
Static Positioning (normal flow)
This is the default positioning method
Items are positioned according to the normal page flow
Left to right – top to bottom
The
top
,
bottom
,
left
, and
right
properties are not applied when static positioning is appliedSlide14
Positioning (Fixed 1)
Fixed Positioning
An element is positioned relative to the browser window or parent container
Elements will not move even if the browser contents are scrolled
Fixed elements are no longer part of the
normal document flowSlide15
Positioning (Fixed 2)
Use properties (
top
,
bottom
,
left
,
right
) to specify the coordinate
Elements can overlap
Use the
z-index
property to control overlap
Larger values appear in front – smaller values appear in back
See FixedPositioning.htmSlide16
Positioning (Relative 1)
Relative Positioning
Elements are positioned “relative” to the normal position
Normal document flow is still used
Use properties (
top
,
bottom
,
left
,
right
) to specify the coordinate relative to the normal flow
Negative values move left
Positive values move rightSlide17
Positioning (Relative 2)
A relative positioned element is positioned
relative
to its normal position
Use
left
,
right
,
top
,
left
to alter the position
Note that negative values are possible
left:-20px
will move the box 20 pixels to the left
Relative positioning is typically used for containers such as
<div>Slide18
Positioning (Relative 3)
Elements might overlap
Use the
z-index
property to specify which overlapping item is in front, and which is in back
The property has an integral value
Larger values appear in front of smaller values
See RelativePositioning.htmSlide19
Positioning (Absolute)
Element is positioned relative to
The first parent element that has a position other than
static
Remember that
static
is the default
Or the browser window
Absolute positioned elements are removed from the normal document flow
Absolute positioning is often used with
<div>
containers
See AbsolutePositioning.htmSlide20
Floating Content
We often want text to wrap around an image or other element
This is the purpose of the
float
property
Elements are always floated horizontally
If an element is floated left, elements float from the left side of the browser window or container
The reverse is true when elements are floated from the right
See Floating.htmSlide21
Controlling Display (1)
The
display
property describes how elements will be displayed
block
– elements are displayed as a block with whitespace above and below
inline
– elements are displayed inside the current block on the same line
none
– elements are not displayed and take up no space