- 行布局
- 列布局
- 圣杯布局
- 双飞翼布局
基础布局：
- 基础的行布局
- 行布局自适应
- 行布局自适应限制最大宽
- 行布局垂直水平居中
经典的行布局：
- 行布局固定宽
- 行布局某部位自适应
- 行布局导航随屏幕滚动
导航
banner
内容
底部
导航始终在页面顶部，不随滚动条动而动。在导航的css中加position:fixed.但是banner一部分的位置会被覆盖，banner的css加padding-top:50px;(50px就是导航的高度)
经典布局：
圣杯布局：三列布局，中间宽度自适应，两边定宽。
中间栏要在浏览器中优先展示渲染。
允许任意列的高度最高。高度可以任意高，而不会影响到其他列。
用最简单的css,最少的HACK语句。保持良好的兼容性。
min-width:70px.当浏览器缩小到70px的时候就不会缩小了。
行布局：
margin: 0 auto;上下为0，左右居中
width:100%;页面自适应
垂直水平都居中：
{
width: 100px;
height: 100px;
background: red;
position: absolute;
left: 50%;
top: 50%;
margin-left: -50%width;
margin-top: -50%width;
}圣杯布局：
通过缩放页面就可以发现，随着页面的宽度的变化，这三栏布局是中间盒子优先渲染，两边的盒子框子固定不变，即使页面宽度变小，也不影响我们的浏览。注意：当你缩放页面的时候，宽度不能小于700PX，为了安全起见，最好还是给body加一个最小宽度!
第一步：给出HTML结构：
<header><h4>Header内容区</h4></header>
<div class="container">
<div class="middle"><h4>中间弹性区</h4></div>
<div class="left"><h4>左边栏</h4></div>
<div class="right"><h4>右边栏</h4></div>
</div>
<footer><h4>Footer内容区</h4></footer>写结构的时候要注意，父元素的的三栏务必先写中间盒子。因为中间盒子是要被优先渲染嘛~并且设置其自适应，也就是width:100%。
第二步：给出每个盒子的样式
header{width: 100%;height: 40px;background-color: darkseagreen;}
.container{ height:200px;overflow:hidden;}
.middle{width: 100%;height: 200px; background-color: deeppink;float:left;}
.left{ width: 200px;height: 200px;background-color: blue;float:left;}
.right{width: 200px;height: 200px;background-color: darkorchid;float:left;}
footer{width: 100%; height: 30px;background-color: darkslategray;}
第三步：看此时的效果图
大家可以看到，三栏并没有在父元素的一行显示，就是因为中间盒子我们给了百分之百的宽度。所有左右两个盒子才会被挤下来。
那么如何让它们呈现出一行三列的效果呢？那就要让左边的盒子要到中间盒子的最左边，右边的盒子到中间盒子的最右边。换个想法，如果中间盒子不是100%的宽度，那么按照文档流，左边的盒子一定会在中间盒子的后面显示，接着显示右边的盒子。但是现在中间盒子是满屏了的，所以左右两个盒子被挤到下一行显示。我们要做到的是让左右两个盒子都上去。此时，CSS的负边距(negative margin)该上阵了。
第四步：利用负边距布局
1.让左边的盒子上去
需要设置其左边距为负的中间盒子的宽度，也就是.left {margin-left:-100%;}。这样左盒子才可以往最左边移动。
2.让右边的盒子上去
需要设置其左边距为负的自己的宽度，也就是.right {margin-left：-200px;}。这样右盒子才可以在一行的最右边显示出自己。
第五步：看此时的效果图
我们现在的确是硬性的实现了固比固布局。但是要记住，中间盒子是自适应的宽度，所以中间盒子里的内容会被左右盒子给压住一部分。
比如现在我给中间盒子加很多的内容，大家看看效果图：
第六步：让中间自适应的盒子安全显示
首先:利用父级元素设置左右内边距的值，把父级的三个子盒子往中间挤。
代码如下：.container{ padding: 0 200px;} 这里的200px是左右盒子的宽度。
利用父级的内边距将盒子往中间挤
我们可以看到，左右两边的内边距是有了，但是中间盒子上的内容还是被压着。
其次:给左右两个盒子加一个定位，加了定位之后左右两个盒子就可以设置left和right值。
代码如下：.left{ position: relative; left: -200px;}.right{position: relative;right: -210px;
第七步：看最终效果图
双飞翼布局
圣杯布局和双飞翼布局解决问题的方案在前一半是相同的，也就是三栏全部float浮动，但左右两栏加上负margin让其跟中间栏div并排，以形成三栏布局。不同在于解决 “中间栏div内容不被遮挡”问题的思路不一样。
他的HTML结构发生了变化：
双飞翼布局比圣杯布局多使用了1个div，少用大致4个css属性（圣杯布局container的 padding-left和padding-right这2个属性，加上左右两个div用相对布局position: relative及对应的right和left共4个属性，；而双飞翼布局子div里用margin-left和margin-right共2个属性，比圣杯布局思路更直接和简洁一点。简单说起来就是：双飞翼布局比圣杯布局多创建了一个div，但不用相对布局了。
详情请看：