CSS分栏布局的方法:绝对定位和浮动
CSS分栏布局的方法:绝对定位和浮动
出处：网页教学网
作者：佚名
日期：2009-03-09
在CSS中，实现分栏布局有两种方法。第一种方法是使用四种CSS定位选项（absolute
、static、relative和fixed）中的绝对定位（absolute
positioning），它可以将文档中的某个元素从其原本位置上移除，并重新定位在期望的任何地点之上。第二种则是使用CSS中的浮动（float）
概念。
绝对定位或浮动都能够用来实现分栏效果。二者可以独立使用，也可以结合在一起，相辅相成。
1、绝对定位
绝对定位的优势在于，我们可以丝毫不差地精确控制任何元素的位置—这里面没有什么需要猜测或者运气的成分。由于应用了绝对定位的元素被不留痕迹地从常规文档流中完全移除，所以它也不会为其他元素带来任何的影响。
那么让我们试一试用绝对定位如何实现下面的布局。
这是一个三栏的布局，并且是居中显示的。其中，A栏是主体内容栏，B栏和C栏都是侧边栏。首先，我们不可能直接用绝对定位将A、B、C三栏定位到居中
的位置，因为每个人显示器的分辨率是不同的，在1024X768分辨率的显示器上定位的居中效果，在别的分辨率的显示器上看到的效果肯定不会是居中显示
的，那么，该如何解决这个问题呢？
幸好，在绝对定位模型中有个极为有用的特性，那就是：若某个绝对定位元素的容器也被定位过，那么该元素指定的top和left值将不会基于文档的根元
素html（也就是浏览器窗口的左上角）计算，而是会基于其容器的左上角计算这个偏移量。换句话说，也就是：被定位过的容器将扮演其中所有元素绝对定位起
始点的角色。
所以，利用这个特性，我们给A、B、C栏的外部加上一个容器D，如下图：
然后，我们让容器D居中，并给它加上一个属性：position:relative，这样，再用绝对定位定位A、B、C的top和left值，A、B、C的位置就会基于容器D的左上角的位置来计算了，这样就可以实现我们期望的三栏居中的效果了。
但是，我们常用的布局并没有这么简单，除了三栏之外，我们还需要一个页头和一个页脚，如下图：
这时候，再用绝对定位布局就行不通了，因为绝对定位的元素会从文档流中完全移除，这时，页脚会紧挨着页头，显示在页头的下方。
如果我们一定要采用绝对定位的话，那么必须预先知道这三栏中每一栏的高度，然后再根据其中最高的一栏定位页脚。若是任意一栏中的文本长度无�
相关文档：
CSS实现局部打印
关键字: css实现局部打印
在实现打印预览的时候，可以采用JS来完成这一功能，但这样会让所有在页面上的部分都答应出来，包括像“打印预览”这样的按钮也会打印，这样的情况，可以采用CSS来完成局部答应的功能。
& ......
预读内容对于部分网速慢，或者加载内容过多的页面，是非常有效的提高友好程度的方法。防止出现由于样式表，和关键图片加载滞后，导致的页面布局错乱，以及关键图片不能马上展示。
也可以防止由于页面信息加载不全，导致js出错。
经过一番尝试，此方法可以兼容IE及其他浏览器。
在IE下 用 new Image().src
的形式进行 ......
这里提供css滤镜代码，
html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }
使用方法：这段代码可以变网页为黑白，将代码加到网站页面CSS最顶端就可以实现素装。
如果网站没有使用CSS，可以在网页/模板的HTML代码<head>和</head> 之间插入：
<style>
html{filter:progid: ......
/* 禁止换行 */
.nowrap{word-break:keep-all;white-space:nowrap;}
/* 强制换行 */
.break{word-break:break-all;}
css强制不换行
div{white-space:nowrap;}
css自动换行
div{ word-wrap: break-word; word-break: normal; }
css强制英文单词断行
div{word-break:break-all;}
大家都知道连续的英文或数字会把DIV ......
什么情况下会出现换行：
当元素设置了固定高度，并且文本长度大于标签元素的宽度时，文本会自动换行。
css强制换行使用样式：white-space:nowrap;该样式从效果上是没有浏览器差异，使用该样式后所有文字在ie和firefox下都在一行内显示。但是在IE下使用该属性值后标签元素宽度会被撑大，从而可能导致原来页面布局被破坏。
......
