1. CSS
Layout

2. Display property
• Block
• Inline
• Inline-Block
Combined style – like inline element, but we can set width, height.
• Others (list-item, table,inline-table,table-row,table-cell, none)

3. Display property
• block
Has width( or take all parent width), height (or stretch by
content), always start at new line.
• Inline
Go one by one, width always stretch by content, height = line-
height property

4. Display property
• Inline-block
Has width(or stretch by content), height (or height = line-height
property), go one by one.

5. BOX Model

6. Box-sizing
• content-box
(Default value) width, height – for content only.
• Padding-box
Width, height including padding
• Border-box
Width, height including padding and border

7. Margin
margin: 20px;
margin: 5px 10px 15px 20px;
margin: 5px 10px 15px;
margin: 10px auto;
Collapsing vertical
margin

8. Relative Margins / Paddings
.parent
{
border: 1px solid red;
width: 300px;
}
.child
{
margin:20%;
border: 1px solid green;
}
All margins will be 60px = 20% from parent’s width

9. Float
http://jsfiddle.net/ywRW6/5/
<div class="block">
Hello CODE!
<div class="float">
float element
</div>
Can you see this?
It's floated!
</div>
.float {
float: left;
background: #CCC;
width: 200px; height: 200px;
margin-right: 25px;
padding: 10px;
}
img {float: right;}

10. Float
.clearfix {clear: both;}
.clearfix { overflow: auto; }

11. Position
• static (default)
• relative
.box2 {
position: relative;
top: -5px;
left: 10px;
}
• fixed
.fixed {
position: fixed;
bottom: 0; right: 0;
width: 200px;
}

12. Position
• Absolute
.relative {
position: relative;
width: 600px;
height: 400px;
}
.absolute {
position: absolute;
top: 120px;
right: 0;
width: 300px;
height: 200px;
}

13. Overflow
• visible
• hidden
• scroll
• auto
• text-overflow: ellipsis;

14. Z-index
<div class="block one">
Parent 5
<div class="block two">
Child 500
</div>
</div>
<div class="block three">
Absolute 10
</div>
Stacking Context:
1)position != static ; z-index != auto
2)opacity <1
3)transform or perspective (CSS3)

15. Negative Z-index
.parent
{
position: relative;
}
.child
{
position: absolute;
z-index: -1;
}

16. Table
table { display: table }
caption { display: table-caption }
thead { display: table-header-group }
tbody { display: table-row-group }
tfoot { display: table-footer-group }
tr { display: table-row }
td, th { display: table-cell }
<style>
.header {height:60px; background-color:#717dc9; padding:20px; text-align:center}
.left_col {width:120px; height:460px; background-color:#dddddd; padding:15px; vertical-align:top}
.center_col {background-color:#ffffff; padding:15px; vertical-align:top}
.right_col {width:120px; background-color:#dddddd; padding:15px; vertical-align:top}
.footer {padding:10px 0 10px 20px; background-color:#717dc9; font-size:13px}
</style>
<table cellpadding="0" cellspacing="0" width="100%" align="center">
<tr><td colspan="3" class="header">My site</td></tr>
<tr><td class="left_col">Left Menu</td><td class="center_col">Content streched to screen width</td>
<td class="right_col">Right block</td></tr>
<tr><td colspan="3" class="footer">&copy; All rights reserved</td></tr>
</table>

17. Table

18. HomeTask