## 前言 你知道的css对页面进行的排版知识有哪些，下面进行逐一回顾。 ## 排版方式 ### 一 、标准文档流(position:relative) * 标准文档流是不使用排列和定位的其他规则时，元素的排列方式。 * 排列规则如下： >* 行级元素，从左到右，按照源文档的标签顺序，依次排列，其中元素的的左右间距按照元素的右外间距加上右边元素的左外间距累加。也就是实际的间距是两者的外间距之和。当一行的元素排不下时，显示到下一行。 >* 块级元素，从上到下，每行一个，上下的间距取两者当中间距较大值。 ### 二 、 浮动(float:left|right|none) * 为了使一些具有高宽的元素能够实现水平排列，可以设置一些块级元素的排列方式为浮动，浮动是脱离标准文档流的。 * 注意事项 > * 使用对象为块级元素，行级元素的水平排列不用浮动 >* 浮动分为左浮动，右浮动，none,根据需要选择 >* 需要浮动的元素需要正确的设置宽高，如果元素默认为父元素宽，是看不到浮动效果的。 >* 浮动之后的元素，会使父元素脱离文档流，获取不到正确的高度，要浮动之后清除浮动。清除浮动的方式可以参考我另一篇教程——css之浮动攻略。 ### 三 、 绝对定位（position:absolute;top|left|right|bottom） * 需要元素固定显示在父元素的某个位置，具有特殊意义时，可以采用绝对定位的方法。绝对定位也是脱离标准文档流的。 * 注意事项 > * 绝对定位需要参考点，参考点需要设置position:relative,如果该元素的父元素不是参考点，那么会依次向上追溯直到能找到设置这个值的父元素为止。如果一直找不到，那么以初始化最初的body为页面的参考点。元素的数值如果设定的为百分比的，那么也是以参考点的宽高为依据。position:relative * 绝对定位参考的坐标值。一般情况下需要两个值，一个为水平方向，一个为竖直方向。根据设定的属性来确定是参考是上下左右的那个方向。如果为三个值的时候，是可以同时实现效果，来达到某个位置的特定布局的。position:absolute;left |right|top|bottom ### 四 、 固定位置（position :fixed ;top|bottom|left|right） * 固定位置的不需要参考点，以屏幕为参考点。ie适配问题：就目前的情况而言，大部分浏览器都是支持这个属性的，可以大胆的使用，只有ie6不适配，针对ie6需要使用hack用绝对定位来实现。语法如下： `body{background-image:url(about:blank); background-attachment:fixed;/*必要，防抖动*/}` ~~~ .head{position:fixed;top:0;left:0; _position:absolute;_top:expression(eval(document.documentElement.scrollTop)); /*如果是底部*/ _bottom:expression_r(eval_r(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0))); ~~~