重慶網(wǎng)絡(luò)公司：CSS網(wǎng)站布局的幾個定位屬性
想要實現(xiàn)優(yōu)美站點布局，還是要掌握幾個CSS定位屬性才行，那天蠶來說說CSS網(wǎng)站布局的幾個定位屬性。
CSS定位屬性：
◆bottom、left、right和top
◆position
◆clip
◆float
◆clear
◆overflow
◆z-index
該類屬性設(shè)置元素在父級元素中的位置。在設(shè)置這類元素時，如果設(shè)置長度數(shù)值，均以px作為單位，在通過style對象讀取屬性時，返回帶單位的字符串。
1.bottom，left，right和top
作用:設(shè)置元素距離參照元素的底邊、左邊、右邊、頂邊的距離。
取值:屬性值可以為數(shù)值或百分比。數(shù)值表示與參照元素之間的距離，單位為像素px;百分比表示參考父元素寬度的百分比。默認(rèn)值為0。
2.position
作用:決定元素在文檔中的定位方式。
取值:可取值包括absolute，relative和static。
absolute表示絕對定位方式。當(dāng)一個元素A采用絕對定位方式時，則A下的子元素將以A的左上角頂點作為坐標(biāo)原點進(jìn)行定位。而對于元素A，瀏覽器將在元素A所屬的子節(jié)點樹中尋找上一個采用absolute定位方式或者relative定位方式的元素A-P，以A-P的左上角頂點作為參照點確定元素A的位置，如果找不到，則以文檔左上角頂點作為參照點。
relative方式指元素相對重慶網(wǎng)站建設(shè)于其相鄰非絕對定位元素的位置進(jìn)行定位。當(dāng)將元素A的position屬性設(shè)置為relative時，A下的子元素將以A的左上角頂點位置作為參照進(jìn)行定位。對于A的位置，瀏覽器將尋找與元素A最近的前一個(并不一定是在其子節(jié)點樹中)position屬性不是absolute或者relative的元素，以該元素作為參照確定當(dāng)前元素A的位置，如果找不到，則以文檔左上角頂點作為參照點。在相對定位時，A元素的left屬性指相對于參照元素左邊的距離，而top指相對于參照元素底邊的距離。
static方式為默認(rèn)方式，表示元素在文檔中的位置由網(wǎng)頁根據(jù)各元素的先后順序自然排列，此時，元素各位置參數(shù)，如left和top均無效。
3.clip
作用:為層設(shè)置一個矩形可視區(qū)域，頁面中只顯示位于可視區(qū)域內(nèi)的內(nèi)容，可視區(qū)域外的內(nèi)容透明，其效果相當(dāng)于將可視區(qū)域之外的部分切除。該屬性只有在position的值設(shè)置為absolute時才能正常使用。
取值:屬性值可以為auto(自動)或者rect(數(shù)值)。其中，數(shù)值為一組4個帶單位數(shù)值，各數(shù)值以空格隔開。4個數(shù)值依次表示可視區(qū)域的頂邊、右邊、底邊、左邊距層左上角的距離，即可視區(qū)域的頂邊、底邊距層元素的頂邊的距離，可視區(qū)域的右邊、左邊距層元素左邊的距離。
4.float
作用:設(shè)置元素浮動在相鄰元素周圍，例如使圖像浮動的文字周圍，產(chǎn)生文字環(huán)繞效果。
取值:可取值包括left，right和none，left表示將元素浮動在其他元素左側(cè);right表示浮動在右側(cè);none表示不浮動。none為默認(rèn)值。此屬性大家可以參考www.i5768.com站點，其首頁運用了很多float屬性，如下圖所示，我已經(jīng)將其版面布局的div塊用紅線勾出，其浮動方式很明了，其中包含了左右浮動和嵌套浮動方式。
5.clear
作用:設(shè)置是否不允許其他元素浮動在元素左邊、右邊或者兩邊。
取值:可取值包括}eft(表示不允許左邊有浮動元素)、right(表示不允許右邊有浮動元素)、both(表示兩邊均不允許有浮動元素)、none(表示兩邊都允許有浮動元素)。默認(rèn)值為none，
該屬性可以與float屬性一起使用，決定元素之間的位置關(guān)系，當(dāng)將float屬性應(yīng)用到要浮動的元素時，將clear屬性應(yīng)用到被環(huán)繞的元素，使兩者之間產(chǎn)生各種浮動與被環(huán)繞關(guān)系。當(dāng)clear屬性與float屬性沖突時，以clear屬性為準(zhǔn)。例如，設(shè)置img元素float屬性為left，而設(shè)置p元素clear屬性為}eft，不允許左邊浮動，則img元素不會浮動在p元素左側(cè)。
因為clear屬性默認(rèn)為none，表示允許左右兩邊浮動其他元素，所以如果只是希望設(shè)置元素浮動在其他元素旁邊，可以只設(shè)置float屬性。
6.overflow
作用:當(dāng)元素內(nèi)容大小超出指定值時，該屬性決定如何進(jìn)行處理。
取值:可取值包括visible，hidden，scroll和auto，visible表示元素自動擴(kuò)大以全部顯示元素內(nèi)容。hidden表示不擴(kuò)大，而將超出的部分隱藏起來。scroll表示顯示滾動條.而元素節(jié)圍不變。auto表示由瀏覽器自動進(jìn)行處理。
7.z-index
作用:設(shè)置多個元素之間的層次順序與覆蓋關(guān)系，決定各元素在與文檔垂直的方向上的層次順序，即各層的重盛順序。該屬性必須是在position屬性為absolute時有效。
默認(rèn)情況下，HTML文檔中各個元素按照在文檔中出現(xiàn)的先后順序依次排列在文檔中，它們位于同一平面上。當(dāng)設(shè)置元素的z-index屬性后，可以使一個元素位于另一元素之上，結(jié)合position屬性及l(fā)eft，top等位置屬性，可以使多個元素重盛。
重慶網(wǎng)絡(luò)公司
渝公網(wǎng)安備 50010302000872號