## 前言
你知道的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)));
~~~
- 前端入門
- 前端入職須知
- 前端自我定位
- pc與手機頁面差別
- 前端書單
- 前端種子計劃
- 前端技術棧
- ps
- ps入門階段
- html
- html入門
- html代碼規范
- meta
- table
- iframe
- a標簽詳解
- image
- html代碼審查工具
- h5專題
- h5入門
- h5新增屬性
- canvas畫布教程
- audio/video
- Geolocation
- Websockets
- Web storage
- Communication
- Web Workers
- requestAnimationFrame
- css
- css入門必學
- css代碼規范
- 項目字體規范
- css基本位置布局
- css常見樣式命名規則
- css代碼優化建議
- css常用樣式名
- css選擇器攻略
- css盒子模型的理解
- css屬性繼承與默認值
- css代碼審查工具
- css中常見的知識盲區
- css3新特性淺談
- css新特性了解
- border-radius
- background
- transform
- animation
- white-space
- css常用技術
- 文本兩端對齊
- css之浮動解決方案
- css優化建議
- 文本超出省略
- img-sprites
- rem布局教程
- 水平居中&垂直居中
- 固寬&變寬布局
- 寬高固定比例的盒模型
- 樣式預處理語言
- less教程
- sass教程
- postcss教程
- js
- javascript入門
- js代碼規范
- js基礎拓展
- js代碼審查工具
- js性能優化
- js基本語句
- 基本運算
- 基本語句語法
- js對象
- es6入門
- obj
- Array
- Date
- String
- Boolean
- Number
- Json
- RegExp
- Math
- function
- jquery入門
- jq核心思想
- jq基本語法
- jq插件庫匯總
- js常用技術
- break&continue區別
- js對日期轉換
- js控制運動-move.js
- 原生js-cookie語法
- ajax請求后回調
- 表單數據序列化
- zepto
- zepto入門
- 百度touchjs
- js編程
- 插件庫
- 功能性插件
- pdfjs
- wdatepicker
- qrcoder
- barcode插件
- photoviewer
- hammer.js
- echarts
- 交互組件
- layerjs
- java
- java入門
- java基本語句
- springMVC
- javaweb
- vm模板引擎
- freemarker
- maven教程
- mySql教程
- flex教程
- flex入門
- git教程
- git入門
- git分支
- git-tag管理
- git注意事項
- git-torise入門
- ide-git插件使用
- web
- web兼容
- web兼容思想
- pc端兼容適配文檔
- pc端兼容bug匯總
- ie兼容bug匯總
- 手機兼容bug匯總
- web安全
- jeecms
- web存儲
- app/h5組件
- 安卓教程
- ios教程
- 前端教程
- rubikx的教程
- 其他
- artTemplate
- tmod使用
- 跨域問題
- markdown教程
- 常用工具
- postman-api調試
- web常識
- 瀏覽器ua統計
- ui框架
- easyui
- bootstrap
- 入門推薦
- weui
- sui-pc
- sui-mobile
- layerUi