布局
让设计在页面中水平居中
创建两列和三列的基于浮动的布局
创建固定宽度、流式和弹性布局
创建高度相等的列
css框架&系统
一.计划布局
在编写之前想好如何构建结构
先把页面划分成大的结构性区域（如页眉 内容区域 页脚），然后在内容区域本身，开始建立网格结构。最后，在各内容区域找不同的布局结构（如：是否分成两列三列四列）。
在每块内容里面的结构，查看是否有相同的模式，便于样式的标记
二.设置基本结构
1.简单的demo，包含页眉、内容区域和页脚
<body>
<div class="wrapper">
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
</div>
</body>2.使用外边距让设计居中
.wrapper{
width: 920px;
/*使设计居中*/
margin: 0 auto;
/*文本内容是左对齐*/
text-align: left;
}三.浮动布局
概念：在基于浮动的布局中，只需设置希望定位的元素的宽度，然后将他们左右浮动
1.两列浮动布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
/*因为这些元素是浮动的，他们不再在文档流中占据空间，会导致页脚上升*/
/*为了避免这种情况，对他们的父元素（这里是div）用溢出方法，来清理浮动*/
.content{
overflow: hidden;
}
.content .primary{
width: 650px;
padding-right: 20px;
float: right;
display: inline;
background: greenyellow;
}
.content .secondary{
width: 230px;
float: left;
/*用于防止IE双外边距浮动产生的bug*/
display: inline;
background: rosybrown;
}
</style>
</head>
<body>
<div class="content">
<div class="primary">primaryprimaryprimaryprimaryprimaryprimaryprimaryprimary</div>
<div class="secondary">secondarysecondarysecondarysecondary</div>
</div>
</body>
</html>
2.三列浮动布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
/*因为这些元素是浮动的，他们不再在文档流中占据空间，会导致页脚上升*/
/*为了避免这种情况，对他们的父元素（这里是div）用溢出方法，来清理浮动*/
.content{
overflow: hidden;
}
.content .primary{
width: 670px;
float: right;
display: inline;
background: greenyellow;
}
.content .secondary{
width: 230px;
float: left;
/*用于防止IE双外边距浮动产生的bug*/
display: inline;
background: rosybrown;
}
.content .primary .primary{
width: 400px;
float: left;
display: inline;
}
.content .primary .secondary{
width: 230px;
padding-right: 20px;
float: right;
display: inline;
}
</style>
</head>
<body>
<div class="content">
<div class="primary">
<div class="primary">primaryprimaryprimaryprimaryprimaryprimaryprimaryprimary</div>
<div class="secondary">secondarysecondarysecondarysecondary</div>
</div>
<div class="secondary">123456789</div>
</div>
</body>
</html>效果：
四.固定宽度、流式和弹性布局
1.以像素px为单位的布局类型为宽度的布局，固定宽度的布局常见。
固定宽度的布局也有缺点，窗口的尺寸大小改变他的布局是不变的。解决这个可以使用流式布局或弹性布局
2.流式布局（尺寸是%百分数）
缺点：在窗口较小时，行变得非常窄难以阅读，因此添加以像素或em为单位的min-width，防止布局变得太窄（若min-width设置太大，流式设计也会遇到和固定宽度布局相同的限制）
使用：
流式技术将前面的固定宽度的三列布局转换成流式三列布局。①窗口宽度设置为窗口总宽度的百分数%，（可以使用工具精准测量Liquid Fold），②以容器宽度的百分数形式设置主内容区域和次要内容区域的宽度。③然后需要设置主内容区域中列的宽度
注：为了确保文本行的长度适合阅读，最好添加以em为单位的max-width，对于较小的窗口尺寸要添加min-width
3.弹性布局
是相对于字号（而不是浏览器宽度）来设置元素的宽度。以em为单位来设置宽度，可以确保在字号增加时整个布局随之扩大。
缺点：①不能充分利用可用空间（与固定宽度类似）②增大的同时可能使水平滚动条出现，所以防止出现这种问题，需要在该容器div中添加max-width:100%
.wrapper{
width: 92em;
max-width: 95%;
margin: 0 auto;
text-align: left;
}
.content ,primary{
width: 72.82%;
float: right;
display: inline;
}
.content .secondary{
width: 25%;
float: left;
display: inline;
}
.content .primary .primary{
width: 59.7%;
float: left;
display: inline;
}
.content .primary .secondary{
width: 34.33%;
padding-right: 2em;
float: right;
display: inline;
}四.faux列
创建一个伪列，方法数在一个占据布局最大高度的元素（如div）上应用重复的背景图像
固定宽度（较容易）
对于固定宽度的两列布局，只需在容器元素上应用一个垂直重复的背景图像，其宽度和导航区域相同
对于固定宽度的三列布局，这次的重复的背景图像需要横跨整个容器
流式布局（较复杂）（技巧：按百分比对背景图像进行定位）
五.高度相等的列
六.css3列（也可以创建高度相等的文本列）
七.css框架&系统
YUI 、Grids、Blueprint（使用column和column span）、960
补充：
1.布局一些问题：
拥有布局的元素不会收缩
布局元素对浮动进行自动清理
相对定位的元素没布局
在拥有布局的元素之间外边距不叠加
在没有布局的块级链接上，单击区域只覆盖文本
在滚动时，列表项上的背景图像间歇性的显示和消失
2.hack和过滤器
3.常见bug及修复方法
①.双外边距浮动bug
display：inline 即可处理，因为元素是浮动的，display：inline不会影响样式
②.3像素文本偏移bug