Scribd
Upload
3 views

Module 6

Module 6 covers the CSS box model, detailing how every HTML element is represented as a box with content, padding, border, and margin. It explains various properties for styling borders and margins, as well as positioning elements using different CSS position values. Additionally, it discusses the float and clear properties for layout control and includes practice exercises for better understanding.

Uploaded by

3169maymun
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

Module 6

Module 6 covers the CSS box model, detailing how every HTML element is represented as a box with content, padding, border, and margin. It explains various properties for styling borders and margins, as well as positioning elements using different CSS position values. Additionally, it discusses the float and clear properties for layout control and includes practice exercises for better understanding.

Uploaded by

3169maymun
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 55

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

You might also like