CSS网页布局
一列式布局是一种固定宽度的布局样式。
background-color:#cccccc;
border:2px solid #333333;
width:300px;
height:300px;
}
默认状态下，即在未设定div宽度的情况下，div将占据整行空间。当设置了width:300px;之后，当前的div宽度将被界定于所设置的参数值范围，这样变形成了一列式的具有固定宽度的布局，这也是最简单的布局形式。
二、一列宽度自适应
自适应布局能够根据浏览器窗口的大小，自动改变其宽度或高度值。良好的自适应布局网站，对不同分辨率的显示器都能够提供很好的显示效果。
默认情况下的div将占据整行空间，既是宽度为100%的自适应布局。
background-color:#cccccc;
border:2px solid #333333;
width:80%;
height:300px;
}
自适应的优势是，当扩大或缩小浏览器窗口大小时，其宽度还将维持着与浏览器当前宽度比例的80%范围。
另：一列固定宽度居中
background-color:#cccccc;
border:2px solid #333333;
width:300px;
height:300px;
margin:0px auto;
}
margin属性用于控制对象的上、右、下、左4个方向的外边距。当margin使用两个参数时，第一个参数表示上下边距，第二个参数表示左右边距。auto值是让浏览器自动判断边距。
三、二列固定宽度
以一列固定宽度为基础，实现二列固定宽度。
<div id="right">右列</div>
background-color:#cccccc;
border:2px solid #333333;
width:300px;
height:300px;
float:left;
}
#right{
background-color:#cccccc;
border:2px solid #333333;
width:300px;
height:300px;
float:left;
}
float属性，用于设置对象是否浮动显示，并设置具体的浮动方式，有none、left、right这三个可用值。大部分div布局基本上都是通过float的控制来实现的。
四、二列宽度自适应
在二列布局情况下，左右栏宽度能够做到自动适应。
background-color:#cccccc;
border:2px solid #333333;
width:20%;
height:300px;
float:left;
}
#right{
background-color:#cccccc;
border:2px solid #333333;
width:70%;
height:300px;
float:left;
}
通过对width属性进行百分比式的转换，实现宽度自适应的特征。
五、两列右列宽度自适应
在实际应用中，很多时候需要左栏固定宽度，右栏根据浏览器窗口的大小自动适应。
background-color:#cccccc;
border:2px solid #333333;
width:100px;
height:300px;
float:left;
}
#right{
background-color:#cccccc;
border:2px solid #333333;
height:300px;
}
只将左栏宽度设为固定值，右栏不设定任何宽度值，并且右栏不浮动。这样就实现了两列右列宽度自适应的效果。
六、两列固定宽度居中
在一列固定宽度居中布局中，我们使用margin:0px auto;的设置，使一个div可以居中显示。而在二列分栏中，需要控制左分栏与右分栏的右边相等，因此使用margin:0px auto;似乎不能达到这样的效果，这时就需要进行div的嵌套设计来完成。
<div id="left">左列</div>
<div id="right">右列</div>
</div>
margin:opx auto;
width:408px;
}
#left{
background-color:#cccccc;
border:2px solid #333333;
width:200px;
height:300px;
float:left;
}
#right{
background-color:#cccccc;
border:2px solid #333333;
width:200px;
height:300px;
float:left;
}
由CSS对象盒式模型，一个对象的真正宽度由它的各项属性相加而成。#left宽度为200px，但左右都有2px的边距，因此其实际宽度为204px。#right对象也是如此，为了让#layout作为容器能够装下它们，宽度则变为#left与#right的实际宽度之和，所以设定为408px。
七、三列浮动中间列宽度自适应
这个布局单纯使用float属性和百分比值并不能够实现，CSS目前还不支持百分比的计算精确到可以考虑左栏和右栏的占位。
我们使用绝对定位技术来解决这个问题。
<div id="center">中列</div>
<div id="right">右列</div>
margin:0px;
padding:0px;
}
#left{
background-color:#cccccc;
border:2px solid #333333;
width:100px;
height:300px;
position:absolute;
top:0px;
left:0px;
}
#center{
background-color:#cccccc;
border:2px solid #333333;
height:300px;
margin-left:104px;
margin-right:104px;
}
#right{
background-color:#cccccc;
border:2px solid #333333;
width:100px;
height:300px;
position:absolute;
top:0px;
right:0px;
}
如果一个对象被设置了position:absolute;，它将从本质上与其他对象分离出来，它的定位模式不会影响其他对象，也不会被其他对象的浮动定位所影响。从某种意义上来讲，使用绝对定位之后，对象就像一个图层一样漂浮在网页之上。
三列宽度自适应布局目前在网络上应用较多的主要在blog设计方面，大型网站设计似乎已经较少使用。
八、高度自适应
高度自适应布局在网络上应用并不多。
高度值同样可以使用百分比进行设置，不同的是，之所以直接使用height:100%;不能达到效果，与浏览器的解析方式有关。先看一段实现高度自适应的CSS代码：
margin:0px;
height:100%;
}
#left{
background-color:#cccccc;
width:300px;
height:100px;
float:left;
}
代码中设置了html与body的height:100%;，这就是高度自适应问题的关键所在。一个对象的高度能否使用百分比显示，取决于对象的父级对象。默认状态下，浏览器并没有给body一个高度属性。代码中除了给出body的定义外，还给html对象也应用了相同的样式定义，这样做的好处是，使IE和Firefox浏览器都能够实现高度自适应。
【引用】《CSS网站布局实录》——李超