第一章 自動(dòng)居中——列布局
1-1 相關(guān)知識(shí)點(diǎn)講解
1. W3C標(biāo)準(zhǔn)
2. CSS中的定位機(jī)制
（1）標(biāo)準(zhǔn)文檔流
注：塊級(jí)元素和行級(jí)元素都是盒子模型
1-2 盒子模型
1-3 自動(dòng)居中——列布局的實(shí)現(xiàn)
1.三個(gè)技能點(diǎn)
2.margin屬性實(shí)現(xiàn)居中
第2章 橫向兩列布局
2-1 浮動(dòng)布局簡(jiǎn)介及float屬性
1.浮動(dòng)布局
2.float屬性
2-2 常用清除浮動(dòng)的常用方法
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">版權(quán)部分</div>
</div>
</body>
</html>
第3章 絕對(duì)定位布局
3-1 簡(jiǎn)介
1.絕對(duì)定位布局簡(jiǎn)介
2.position屬性
3-2 相對(duì)定位
3-3 絕對(duì)定位
1.未設(shè)置偏移量
2.設(shè)置偏移量
3.使用絕對(duì)定位實(shí)現(xiàn)橫向兩列布局
