一、页面布局
1. 框架布局，3种方法
1) 相对定位position:relative
直接用div或其它设置为block(块)的标签，加position: relative属性和宽（或不加）
2) 绝对定位position:absolute
Left、top、right、bottom
相对于父标签的绝对定位，可定位如：头、尾部logo布局，文字、版权等信息，弹出居中层等
3) 浮动定位float
float:left;、float:right;
用于需要固定宽的左右布局，如网站主体部分
用于li、p等标签横向列表的段落文字
2. 框架边距
1) 外边距法margin
与外部其它div需要有距离时用margin
主要用户上下布局margin-bottom、margin-top控制间距
2) 绝对定位法position:absolute
左右上下间距：position:absolute定位时，直接设置 Left、top、right、bottom
3. 框架内部边距
1) 标签边距法padding
当对内需要有边距时，比如div内的文字相对于div背景图偏移位置时用
a、strong等字标签的padding经常用于左右边距:padding:0 10px;
2) 行高法height和line-height
单行文字可用height和line-height设置为相同值使文字上下居中
4. clear:both;
利用清除浮动来把外层的div撑开，所以有时候，我们在将内部div都设置成浮动之后，就会发现，外层div的背景没有显示，原因就是外层的div没有撑开，太小，所以能看到的背景仅限于一条线
因多加的<div class="clear"></div>标签会引起IE和FF高度变化，通过如下方法解决：
clear {
clear: both;
height:1px;
margin-top:-1px;
overflow:hidden;
}
<style type="text/css">
#main {background-color: #3399CC;width: 600px;padding: 20px;}
#sidebar {background-color: #FF6600; float: left;width:130px;}
#container {float: right;width: 420px;background-color: #FFFF33;}
.clear {clear: both;height:1px;margin-top:-1px;overflow:hidden;}
</style>
<div id="main">
<div id="sidebar">第一段内容 第一段内容 第一段内容</div>
<div id="container">第二段内容 第二段内容 第二段内容</div>
<div class="clear"></div>
</div>
<p>第三段内容</p>
二、页面修饰
字号、颜色、字体
背景
