新手草根站長(zhǎng)做站往往都是使用現(xiàn)成的模版，因此也有了很大的局限性，既不能表達(dá)自己想象的布局效果，有沒(méi)有模版的原創(chuàng)性。想要實(shí)現(xiàn)優(yōu)美站點(diǎn)布局，還是要掌握幾個(gè)CSS定位屬性才行。

CSS定位屬性：

◆bottom、left、right和top

◆position

◆clip

◆float

◆clear

◆overflow

◆z-index

該類(lèi)屬性設(shè)置元素在父級(jí)元素中的位置。在設(shè)置這類(lèi)元素時(shí)，如果設(shè)置長(zhǎng)度數(shù)值，均以px作為單位，在通過(guò)style對(duì)象讀取

屬性時(shí)，返回帶單位的字符串。

1.bottom，left，right和top

作用:設(shè)置元素距離參照元素的底邊、左邊、右邊、頂邊的距離。

取值:屬性值可以為數(shù)值或百分比。數(shù)值表示與參照元素之間的距離，單位為像素px;百分比表示參考父元素寬度的百分比。

默認(rèn)值為0。

2.position

作用:決定元素在文檔中的定位方式。

取值:可取值包括absolute，relative和static。

absolute表示絕對(duì)定位方式。當(dāng)一個(gè)元素A采用絕對(duì)定位方式時(shí)，則A下的子元素將以A的左上角頂點(diǎn)作為坐標(biāo)原點(diǎn)進(jìn)行定位

。而對(duì)于元素A，瀏覽器將在元素A所屬的子節(jié)點(diǎn)樹(shù)中尋找上一個(gè)采用absolute定位方式或者relative定位方式的元素A-P，以A-P

的左上角頂點(diǎn)作為參照點(diǎn)確定元素A的位置，如果找不到，則以文檔左上角頂點(diǎn)作為參照點(diǎn)。

relative方式指元素相對(duì)于其相鄰非絕對(duì)定位元素的位置進(jìn)行定位。當(dāng)將元素A的position屬性設(shè)置為relative時(shí)，A下的子

元素將以A的左上角頂點(diǎn)位置作為參照進(jìn)行定位。對(duì)于A的位置，瀏覽器將尋找與元素A最近的前一個(gè)(并不一定是在其子節(jié)點(diǎn)樹(shù)中

)position屬性不是absolute或者relative的元素，以該元素作為參照確定當(dāng)前元素A的位置，如果找不到，則以文檔左上角頂點(diǎn)

作為參照點(diǎn)。在相對(duì)定位時(shí)，A元素的left屬性指相對(duì)于參照元素左邊的距離，而top指相對(duì)于參照元素底邊的距離。

static方式為默認(rèn)方式，表示元素在文檔中的位置由網(wǎng)頁(yè)根據(jù)各元素的先后順序自然排列，此時(shí)，元素各位置參數(shù)，如left

和top均無(wú)效。

3.clip

作用:為層設(shè)置一個(gè)矩形可視區(qū)域，頁(yè)面中只顯示位于可視區(qū)域內(nèi)的內(nèi)容，可視區(qū)域外的內(nèi)容透明，其效果相當(dāng)于將可視區(qū)

域之外的部分切除。該屬性只有在position的值設(shè)置為absolute時(shí)才能正常使用。

取值:屬性值可以為auto(自動(dòng))或者rect(數(shù)值)。其中，數(shù)值為一組4個(gè)帶單位數(shù)值，各數(shù)值以空格隔開(kāi)。4個(gè)數(shù)值依次表示

可視區(qū)域的頂邊、右邊、底邊、左邊距層左上角的距離，即可視區(qū)域的頂邊、底邊距層元素的頂邊的距離，可視區(qū)域的右邊、左

邊距層元素左邊的距離。

4.float

作用:設(shè)置元素浮動(dòng)在相鄰元素周?chē)?，例如使圖像浮動(dòng)的文字周?chē)a(chǎn)生文字環(huán)繞效果。

取值:可取值包括left，right和none，left表示將元素浮動(dòng)在其他元素左側(cè);right表示浮動(dòng)在右側(cè);none表示不浮動(dòng)。none

為默認(rèn)值。

5.clear

作用:設(shè)置是否不允許其他元素浮動(dòng)在元素左邊、右邊或者兩邊。

取值:可取值包括}eft(表示不允許左邊有浮動(dòng)元素)、right(表示不允許右邊有浮動(dòng)元素)、both(表示兩邊均不允許有浮動(dòng)

元素)、none(表示兩邊都允許有浮動(dòng)元素)。默認(rèn)值為none，

該屬性可以與float屬性一起使用，決定元素之間的位置關(guān)系，當(dāng)將float屬性應(yīng)用到要浮動(dòng)的元素時(shí)，將clear屬性應(yīng)用到

被環(huán)繞的元素，使兩者之間產(chǎn)生各種浮動(dòng)與被環(huán)繞關(guān)系。當(dāng)clear屬性與float屬性沖突時(shí)，以clear屬性為準(zhǔn)。例如，設(shè)置img元

素float屬性為left，而設(shè)置p元素clear屬性為}eft，不允許左邊浮動(dòng)，則img元素不會(huì)浮動(dòng)在p元素左側(cè)。

因?yàn)閏lear屬性默認(rèn)為none，表示允許左右兩邊浮動(dòng)其他元素，所以如果只是希望設(shè)置元素浮動(dòng)在其他元素旁邊，可以只設(shè)

置float屬性。

6.overflow

作用:當(dāng)元素內(nèi)容大小超出指定值時(shí)，該屬性決定如何進(jìn)行處理。

取值:可取值包括visible，hidden，scroll和auto，visible表示元素自動(dòng)擴(kuò)大以全部顯示元素內(nèi)容。hidden表示不擴(kuò)大，

而將超出的部分隱藏起來(lái)。scroll表示顯示滾動(dòng)條.而元素節(jié)圍不變。auto表示由瀏覽器自動(dòng)進(jìn)行處理。

7.z-index

作用:設(shè)置多個(gè)元素之間的層次順序與覆蓋關(guān)系，決定各元素在與文檔垂直的方向上的層次順序，即各層的重盛順序。該屬

性必須是在position屬性為absolute時(shí)有效。

默認(rèn)情況下，HTML文檔中各個(gè)元素按照在文檔中出現(xiàn)的先后順序依次排列在文檔中，它們位于同一平面上。當(dāng)設(shè)置元素的z

-index屬性后，可以使一個(gè)元素位于另一元素之上，結(jié)合position屬性及l(fā)eft，top等位置屬性，可以使多個(gè)元素重盛。

取值:屬性值可以是auto或無(wú)單位整數(shù)值。auto根據(jù)各層定義的先后順序來(lái)決定各層的層次關(guān)系，后面定義的層將覆蓋前面

定義的層;整數(shù)值為每一層指定一數(shù)值，數(shù)值越大則層越位于上方。

上面所說(shuō)的這些屬性都是在網(wǎng)站結(jié)構(gòu)布局上常用的最重要的屬性，了解以后也會(huì)方便大家解讀代碼，方便自己修改，調(diào)整，

實(shí)現(xiàn)自己理想的布局效果!

本文來(lái)自成都品牌網(wǎng)站建設(shè)網(wǎng)站設(shè)計(jì)公司-創(chuàng)新互聯(lián)

本文名稱(chēng)：分享CSS實(shí)用定位屬性輕松實(shí)現(xiàn)優(yōu)美站點(diǎn)布局
文章源于：http://jinyejixie.com/news20/324870.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗(yàn)、ChatGPT、建站公司、網(wǎng)站制作、品牌網(wǎng)站制作、虛擬主機(jī)

廣告

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