Module 6:
CSS (3/3)
(box, layout)
Johnny Zhang
CSS Box Model
o In CSS, the term “box model” is used when talking about design and
layout.
o The CSS box model is essentially a box that wraps around every
HTML element.
• Each element is represented by a rectangular box
• There are certain spaces that can be references with CSS
• Content: the content of the box, where text and images Margin
appear
• Padding is between content and
the border
• Border: A border that goes around the padding and content.
• Margin: Clears and area outside the boarder.
border:
• border-top, border-right, border-bottom, border-left
• attributes: color, width, style
• E.g., border-top-color, border-top-width, border-top-style
• style value: solid, dashed, dotted, double, inset, outset..
top
right
left
bottom
Practice 1
top: 3px; right: 9px; bottom: 3px; left: 5px
Syntax: (border-top: width style color;)
Border syntax
• 4 values (top, right, bottom, left)（Clockwise）
• E.g., border-color: red, yellow, red, green;
• E.g., border-style: solid, dashed, dashed, dotted;
• 2 values (top=bottom & left=right)
• E.g., border-color: red, blue;
• 1 value (top=bottom=left=right)
• E.g., border-color: red;
• E.g., border-style: solid;
• 1 value (style=color=width)
• E.g., border: 2px solid red;
Margin Property
• The CSS margin properties are used to create space
around elements, outside of any defined borders.
• CSS has properties for specifying the margin for
each side of an element:
top
• margin-top
left right
• margin-right
• margin-bottom bottom
• margin-left
Center an Element (Block and Inline)
o A block-level element always starts on a new line, and the
browsers automatically add some space (a margin) before and
after the element.
o A block-level element always takes up the full width available
(stretches out to the left and right as far as it can).
• Two commonly used block elements are: <p> and <div>.
• The <p> element defines a paragraph in an HTML document.
• The <div> element defines a division or a section in an HTML
document.
Solution? • margin-left: value; ?
Any problems?
Challenge Questions
1. p{
width: 250px;
background: gray;
}
2. How to center the content (Welcome to
JavaScript) horizontally?
3. How to center the element vertically?
1. Practice 2
Solution
• How to center elements horizontally?
• How to center elements vertically?
• height=line-height
Practice 3
Calculating the box size
• The calculated width of a box is:
• width + padding-left + padding-right + border-left + border-right
• The calculated height of a box is:
• height + padding-top + padding-bottom + border-top + border-
bottom
Example
Width= 10+1+20+250+20+1+10
Height= 10+1+20+18+20+1+10
Box: default value (body)
Box: default value (p)
Reset Default Value:
body,ul,ol,dl.li.p,h1,h2,h3,h4,h5,h6,form{
margin:0;
padding:0;
}
Margin Collapsing
The top and bottom margins of blocks are
sometimes combined (collapsed) into a
single margin whose size is the largest of Margin-bottom
Margin-bottom
the individual margins (or just one of them, if Margin-top
they are equal), a behavior known as margin
collapsing.
Practice 4
margin-bottom:
20px
margin-top:
10px
How many pixels?
CSS Layout: Position
• The position property specifies the type of
positioning method used for an element (static,
relative, fixed, absolute or sticky).
• There are five different position values:
v static
v relative
v fixed
v absolute
v sticky
position: static;
Static: An element with position: static; is
not positioned in any special way; it is
always positioned according to the normal
flow of the page:
position: relative;
• An element with position: relative; is positioned relative to its normal
position.
• Setting the top, right, bottom, and left properties of a relatively-
positioned element will cause it to be adjusted away from its normal
position. Other content will not be adjusted to fit into any gap left by
the element.
• E.g.,
{
position: relative;
top: 20px;
}
Practice 5
position: absolute
• An element with position: absolute; is positioned relative to the
nearest positioned ancestor (Not Static).
• If an absolute positioned element has no positioned ancestors, it
uses the document body, and moves along with page scrolling.
Practice 6
Explain: Why?
position: fixed
• An element with position: fixed; is positioned relative to the
viewport, which means it always stays in the same place even
if the page is scrolled. The top, right, bottom, and left
properties are used to position the element.
• A fixed element does not leave a gap in the page where it
would normally have been located.
50px
650px
CSS Layout - float and clear
• The CSS float property specifies how an element
should float.
• The float is used for positioning and formatting content.
• The CSS clear property specifies what elements can
float beside the cleared element and on which side.
• The clear property specifies what should happen with the
element that is next to floating element.
float
The float property can have one of the following values:
vleft - The element floats to the left of its container
vright - The element floats to the right of its container
vnone - The element does not float (will be displayed just where it occurs in the
text). This is default
vinherit - The element inherits the float value of its parent
Practice 7
Example: image
clear:
The clear property allows you to say that no element
should touch the left or righthand sides of a box.
Values:
• left
• right
• both
• none
Explain Why?
Challenge:
Demo
5 5 5 5
Width=600+(5+5+5+5)*3
Layout -1
