第一章 自動居中——列布局
1-1 相關知識點講解
1. W3C標準
2. CSS中的定位機制
（1）標準文檔流
注：塊級元素和行級元素都是盒子模型
1-2 盒子模型
1-3 自動居中——列布局的實現
1.三個技能點
2.margin屬性實現居中
第2章 橫向兩列布局
2-1 浮動布局簡介及float屬性
1.浮動布局
2.float屬性
2-2 常用清除浮動的常用方法
2-3 橫向兩列布局
例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{margin: 0;padding: 0;}
#wrap{background: #00C;margin:0 auto;width:960px;}
#header{background: #FF3300;width:100%;}
#mainbody{background: #FC0;width:100%;overflow: hidden;}
.left{width:800px;height:200px;background: #000;float: left;}
.right{width: 140px;height: 500px;background: #690;float: right;}
#footer{background: #639;width:100%;}
</style>
</head>
<body>
<div id="wrap">
<div id="header">頭部</div>
<div id="mainbody">
<div class="left"></div>
<div class="right"></div>
</div>
<div id="footer">版權部分</div>
</div>
</body>
</html>
第3章 絕對定位布局
3-1 簡介
1.絕對定位布局簡介
2.position屬性
3-2 相對定位
3-3 絕對定位
1.未設置偏移量
2.設置偏移量
3.使用絕對定位實現橫向兩列布局
