标签：
如何去理解一个页面需要仔细分析,页面结构形式再怎么变化,最终都还是基于两列布局结构的演变.
不同布局之间最大的区别是：列宽度是固定宽度还是自适应
布局思路：主要利用浮动和定位方式，借助负边距
宽度值与浮动的关系：
盒模型宽度默认auto，宽度撑满浏览器窗口宽度或其父级宽度，拥有padding和margin值及宽度默认值auto时盒模型的宽度大小始终保持在浏览器窗口或父级所显示的范围内。
盒模型宽度默认auto加上float时，盒模型的宽度由内容撑开。只能添加具体的width值保证盒模型宽度。
两列布局：
//结构代码 <div id="header"></div> <div id="contanier"> <div class="mianBox"></div> <div class="sideBox"></div> </div> <div id="footer"></div>
|
|
header |
contanier |
mainBox |
sideBox |
footer |
|
| 左右固定 |
width/height(px) | width(px) clearFloat(清浮动) |
width(px) float(left) |
width(px) float(right) |
width/height(px) | |
| 左右自适应 |
height(px) | clearFloat(清浮动) | width(%) float(left) |
width(%) float(right) |
height(px) clearBoth(兼容IE) |
|
| 左自适应右固定 (绝对定位方式） |
height(px) | position: relative clearFloat(清浮动) zoom: 1 (IE绝对定位消失) |
float(left) margin-right: 200px; display:inline;(IE双边距bug) |
position: absolute; |
height(px) | 固定区域高于自适应区域时会产生bug,需要借助js判断父级高度 |
| 左自适应右固定 (float借助负margin） |
height(px) | clearFloat(清浮动) zoom: 1 (IE绝对定位消失) |
float(left) margin-right: 200px; display:inline;(IE双边距bug) |
float: left; |
height(px) |
三列布局1：许多三列布局本质上还是两列布局，只是在主要内容区mainBox内继续分为两列左右浮动。
<div class="header">头部信息</div> <div class="container"> <div class="wrap"> <div class="mainBox">主要内容区域</div> <div class="subMainBox">次要内容区域</div> </div> <div class="sideBox">侧边栏</div> </div> <div class="footer">底部信息</div>
三列布局2：为三个独立的列进行布局；
<div class="header">头部信息</div> <div class="container"> <div class="mainBox"> <div class="content">主要内容区域</div> </div> <div class="subMainBox">次要内容区域</div> <div class="sideBox">侧边栏</div> </div> <div class="footer">底部信息</div>
|
|
header |
contanier |
mainBox |
content |
sideMainBox |
sideBox |
footer |
|
| 两列定宽 中间自适应 |
height(px) | width(100%) float(left) |
margin:0 210px 0 310px |
float: left; |
float: left; |
height(px) clearBoth |
||
| 左侧定宽 中间右侧自适应 |
height(px) | width(100%) float(left) |
margin:0 41% 0 310px |
float: left; |
float: left; |
|||
| 三列自适应 | height(px) | width(100%) float(left) |
margin:0 41% 0 21% |
float: left; |
float: left; |
两列或三列等高布局：
上面的布局情况都可以进一步做为两列或三列等高布局：可以利用背景图片，负边距或边框模拟等都可以实现，不过都会存在一定bug,
CSS主要作用为修饰页面，而判断是否等高是一种行为，应该使用js脚本，直接判断两列的高度，取得较大者，都赋值为较大者高度值。
标签：
原文地址：http://www.cnblogs.com/Peng2014/p/4704475.html
