css中display、float、position有什么用

這篇文章給大家分享的是有關(guān)css中display、float、position有什么用的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

成都創(chuàng)新互聯(lián)公司長期為1000+客戶提供的網(wǎng)站建設(shè)服務(wù)，團隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為清豐企業(yè)提供專業(yè)的網(wǎng)站建設(shè)、成都做網(wǎng)站，清豐網(wǎng)站改版等技術(shù)服務(wù)。擁有十年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

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

display : block | none | inline | inline-block

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

block：指定對象為塊元素

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

none：隱藏對象

float 控制元素是否浮動顯示

float : none | left | right

none：設(shè)置對象不浮動

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

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

浮動的目的：

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

1.任何申明為 float 的元素自動被設(shè)置為一個“塊級元素”

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

3.如果水平方向上沒有足夠的空間容納浮動元素，則轉(zhuǎn)向下一行

4.文字內(nèi)容會圍繞在浮動元素周圍

5.浮動元素只能浮動至左側(cè)或者右側(cè)

clear 清除浮動

clear : none | left | right | both

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

left：不允許左邊有浮動對象

right：不允許右邊有浮動對象

both：不允許有浮動對象

position 對象的定位方式

position : static | absolute | fixed | relative

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

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

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

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

absolute 說明：

1.脫離文檔流

2.通過 top,bottom,left,right 定位

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

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

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

relative 說明：

1.相對定位（相對自己原來的位置而言）

2.不脫離文檔流

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

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

fixed 說明：

固定定位實際上只是絕對定位的特殊形式，固定定位的元素是相對于瀏覽器窗口而固定，而不是相對于其包含元素，即使頁面滾動了，它們?nèi)匀粫幵跒g覽器窗口中跟原來完全一 樣的地方

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

z-index 對象的層疊順序

z-index : auto | number

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

較大 number 值的對象會覆蓋在較小 number 值的對象之上

感謝各位的閱讀！關(guān)于“css中display、float、position有什么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

本文名稱：css中display、float、position有什么用
文章路徑：http://muchs.cn/article46/jepihg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、動態(tài)網(wǎng)站、品牌網(wǎng)站建設(shè)、App開發(fā)、定制開發(fā)、虛擬主機

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)