CSS网页布局

一、一列固定宽度
一列式布局是一种固定宽度的布局样式。

< div  id ="layout" > 1列式固定宽度 </ div >

#layout {
    background-color : #cccccc ;
    border : 2px solid #333333 ;
    width : 300px ;
    height : 300px ;
}

默认状态下，即在未设定div宽度的情况下，div将占据整行空间。当设置了width:300px;之后，当前的div宽度将被界定于所设置的参数值范围，这样变形成了一列式的具有固定宽度的布局，这也是最简单的布局形式。

二、一列宽度自适应
自适应布局能够根据浏览器窗口的大小，自动改变其宽度或高度值。良好的自适应布局网站，对不同分辨率的显示器都能够提供很好的显示效果。
默认情况下的div将占据整行空间，既是宽度为100%的自适应布局。

#layout {
   background-color : #cccccc ;
   border : 2px solid #333333 ;
   width : 80% ;
   height : 300px ;
}

自适应的优势是，当扩大或缩小浏览器窗口大小时，其宽度还将维持着与浏览器当前宽度比例的80%范围。
另：一列固定宽度居中

#layout {
   background-color : #cccccc ;
   border : 2px solid #333333 ;
   width : 300px ;
   height : 300px ;
   margin : 0px auto ;
}

margin属性用于控制对象的上、右、下、左4个方向的外边距。当margin使用两个参数时，第一个参数表示上下边距，第二个参数表示左右边距。auto值是让浏览器自动判断边距。

三、二列固定宽度
以一列固定宽度为基础，实现二列固定宽度。

< div  id ="left" > 左列 </ div >
< div  id ="right" > 右列 </ div >

#left {
   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的控制来实现的。

四、二列宽度自适应
在二列布局情况下，左右栏宽度能够做到自动适应。

#left {
   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属性进行百分比式的转换，实现宽度自适应的特征。

五、两列右列宽度自适应
在实际应用中，很多时候需要左栏固定宽度，右栏根据浏览器窗口的大小自动适应。

#left {
   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 ="layout" >
   < div  id ="left" > 左列 </ div >
   < div  id ="right" > 右列 </ div >
</ div >

#layout {
   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 ="left" > 左列 </ div >
< div  id ="center" > 中列 </ div >
< div  id ="right" > 右列 </ div >

body {
   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代码：

html,body {
   margin : 0px ;
   height : 100% ;
}
#left {
   background-color : #cccccc ;
   width : 300px ;
   height : 100px ;
   float : left ;
}

代码中设置了html与body的height:100%;，这就是高度自适应问题的关键所在。一个对象的高度能否使用百分比显示，取决于对象的父级对象。默认状态下，浏览器并没有给body一个高度属性。代码中除了给出body的定义外，还给html对象也应用了相同的样式定义，这样做的好处是，使IE和Firefox浏览器都能够实现高度自适应。

【引用】《CSS网站布局实录》——李超

转载于:https://www.cnblogs.com/jiaozhe1987/articles/1098533.html