## 前言 你知道的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))); ~~~