此文章僅為轉(zhuǎn)發(fā)，非原創(chuàng)，原文http://www.cnblogs.com/zhuanggege/p/5778309.html

請(qǐng)支持原創(chuàng)

display?用來(lái)設(shè)置元素的顯示方式

display : block | none | inline | inline-block

inline：指定對(duì)象為內(nèi)聯(lián)元素

block：指定對(duì)象為塊元素

inline-block：指定對(duì)象為內(nèi)聯(lián)塊元素

none：隱藏對(duì)象?

float?控制元素是否浮動(dòng)顯示

float : none | left | right?

none：設(shè)置對(duì)象不浮動(dòng)

left：設(shè)置對(duì)象浮在左邊

right：設(shè)置對(duì)象浮在右邊

浮動(dòng)的目的：

就是要打破文檔流的默認(rèn)顯示規(guī)則。如果要讓元素按照我們的布局要求進(jìn)行顯示。這時(shí)就要利用float屬性

任何申明為 float 的元素自動(dòng)被設(shè)置為一個(gè)“塊級(jí)元素”

在標(biāo)準(zhǔn)瀏覽器中浮動(dòng)元素脫離了文檔流 ，所以浮動(dòng)元素后的元素會(huì)占據(jù)浮動(dòng)元素本來(lái)應(yīng)該所處的位置

如果水平方向上沒(méi)有足夠的空間容納浮動(dòng)元素，則轉(zhuǎn)向下一行

文字內(nèi)容會(huì)圍繞在浮動(dòng)元素周?chē)?/li>

浮動(dòng)元素只能浮動(dòng)至左側(cè)或者右側(cè)

clear?清除浮動(dòng)

clear : none | left | right | both

none：默認(rèn)值。允許兩邊都可以有浮動(dòng)對(duì)象

left：不允許左邊有浮動(dòng)對(duì)象

right：不允許右邊有浮動(dòng)對(duì)象

both：不允許有浮動(dòng)對(duì)象

position?對(duì)象的定位方式

position : static | absolute | fixed | relative?

static：默認(rèn)值。無(wú)定位，對(duì)象遵循常規(guī)流。此時(shí)4個(gè)定位偏移屬性不會(huì)被應(yīng)用

relative：相對(duì)定位，對(duì)象遵循常規(guī)流，并且參照自身在常規(guī)流中的位置通過(guò)top，right，bottom，left這4個(gè)定位偏移屬性進(jìn)行偏移時(shí)不會(huì)影響常規(guī)流中的任何元素

absolute：絕對(duì)定位，對(duì)象脫離常規(guī)流，此時(shí)偏移屬性參照的是離自身最近的定位祖先元素，如果沒(méi)有定位的祖先元素，則一直回溯到body元素。盒子的偏移位置不影響常規(guī)流中的任何元素，其margin不與其他任何margin折疊

fixed：固定定位，與absolute一致，但偏移定位是以窗口為參考。當(dāng)出現(xiàn)滾動(dòng)條時(shí)，對(duì)象不會(huì)隨著滾動(dòng)

absolute 說(shuō)明：

脫離文檔流

通過(guò) top,bottom,left,right 定位

如果父元素 position 為 static 時(shí)，將以body坐標(biāo)原點(diǎn)進(jìn)行定位

如果父元素 position 為 relative 時(shí)，將以父元素進(jìn)行定位

例：div { position: absolute; left:100px; top:100px;}

relative 說(shuō)明：

相對(duì)定位（相對(duì)自己原來(lái)的位置而言）

不脫離文檔流

參考自身靜態(tài)位置通過(guò) top,bottom,left,right 定位

例：div { position: relative; left:100px; top:100px;}

fixed 說(shuō)明：

固定定位實(shí)際上只是絕對(duì)定位的特殊形式，固定定位的元素是相對(duì)于瀏覽器窗口而固定，而不是相對(duì)于其包含元素，即使頁(yè)面滾動(dòng)了，它們?nèi)匀粫?huì)處在瀏覽器窗口中跟原來(lái)完全一 樣的地方

例：div { position: fixed; right:0; bottom:0;}

z-index?對(duì)象的層疊順序

z-index : auto | number?

當(dāng)元素發(fā)生重疊時(shí)，可以通過(guò) z-index 屬性，設(shè)置其層疊的先后順序

較大 number 值的對(duì)象會(huì)覆蓋在較小 number 值的對(duì)象之上

轉(zhuǎn)載于:https://www.cnblogs.com/q905120456/p/5809963.html

超強(qiáng)干貨來(lái)襲 云風(fēng)專(zhuān)訪：近40年碼齡，通宵達(dá)旦的技術(shù)人生

總結(jié)

以上是生活随笔為你收集整理的转发- css（display，float，position）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。