致力于高端網站建設服務的專業公司
網站建設熱線:010-51000596

網站資訊

首頁 > 網站資訊 > 網頁設計 > 網站設計中如何使用CSS布局定位

網站設計中如何使用CSS布局定位

      網站設計中如何使用CSS布局定位?本文為大家介紹CSS布局定位屬性,熟練的使用可以輕松實現優美站點布局,感興趣的朋友可以參考下,希望對大家有所幫助。
 
      CSS定位屬性: 
 
      ◆bottom、left、right和top 
 
      ◆clip 
 
      ◆clear 
 
      ◆float 
 
      ◆overflow 
 
      ◆position 
 
      ◆z-index 
 
      該類屬性設置元素在父級元素中的位置。在設置這類元素時,如果設置長度數值,均以px作為單位,在通過style對象讀取屬性時,返回帶單位的字符串。 
 
      1.邊偏移(bottom,left,right和top) 
 
      作用:設置元素距離參照元素的底邊、左邊、右邊、頂邊的距離。 
 
      取值:屬性值可以為數值或百分比。數值表示與參照元素之間的距離,單位為像素px;百分比表示參考父元素寬度的百分比。默認值為0。 
 
      top:定義元素相對于其父元素上邊線的距離。 
 
      2.clip 
 
      作用:為層設置一個矩形可視區域,頁面中只顯示位于可視區域內的內容,可視區域外的內容透明,其效果相當于將可視區域之外的部分切除。該屬性只有在position的值設置為absolute時才能正常使用。 
 
      取值:屬性值可以為auto(自動)或者rect(數值)。其中,數值為一組4個帶單位數值,各數值以空格隔開。4個數值依次表示可視區域的頂邊、右邊、底 邊、左邊距層左上角的距離,即可視區域的頂邊、底邊距層元素的頂邊的距離,可視區域的右邊、左邊距層元素左邊的距離。 
 
       3.clear 
 
       作用:設置是否不允許其他元素浮動在元素左邊、右邊或者兩邊。 
 
      取值:可取值包括}eft(表示不允許左邊有浮動元素)、right(表示不允許右邊有浮動元素)、both(表示兩邊均不允許有浮動元素)、none(表示兩邊都允許有浮動元素)。默認值為none, 
 
      該屬性可以與float屬性一起使用,決定元素之間的位置關系,當將float屬性應用到要浮動的元素時,將clear屬性應用到被環繞的元素,使兩者之間 產生各種浮動與被環繞關系。當clear屬性與float屬性沖突時,以clear屬性為準。例如,設置img元素float屬性為left,而設置p元 素clear屬性為}eft,不允許左邊浮動,則img元素不會浮動在p元素左側。 
 
      因為clear屬性默認為none,表示允許左右兩邊浮動其他元素,所以如果只是希望設置元素浮動在其他元素旁邊,可以只設置float屬性。 
 
      4.float 
 
       作用:設置元素浮動在相鄰元素周圍,例如使圖像浮動的文字周圍,產生文字環繞效果。 
 
       取值:可取值包括left,right和none,left表示將元素浮動在其他元素左側;right表示浮動在右側;none表示不浮動。none為默認 值。此屬性大家可以參考www.i5768.com站點,其首頁運用了很多float屬性,如下圖所示,我已經將其版面布局的div塊用紅線勾出,其浮動 方式很明了,其中包含了左右浮動和嵌套浮動方式。 
 
      5.overflow 
 
      作用:當元素內容大小超出指定值時,該屬性決定如何進行處理。 
 
      取值:可取值包括visible,hidden,scroll和auto,visible表示元素自動擴大以全部顯示元素內容。hidden表示不擴大,而將超出的部分隱藏起來。scroll表示顯示滾動條.而元素節圍不變。auto表示由瀏覽器自動進行處理。 

       6.定位模式(position) 
 
      作用:決定元素在文檔中的定位方式。 
 
      取值:可取值包括absolute,relative和static。 
 
       absolute 表示絕對定位方式。當一個元素A采用絕對定位方式時,則A下的子元素將以A的左上角頂點作為坐標原點進行定位。而對于元素A,瀏覽器將在元素A所屬的子節 點樹中尋找上一個采用absolute定位方式或者relative定位方式的元素A-P,以A-P的左上角頂點作為參照點確定元素A的位置,如果找不 到,則以文檔左上角頂點作為參照點。 
 
       relative方式指元素相對于其相鄰非絕對定位元素的位置進行定位。當將元素A的 position屬性設置為relative時,A下的子元素將以A的左上角頂點位置作為參照進行定位。對于A的位置,瀏覽器將尋找與元素A最近的前一個 (并不一定是在其子節點樹中)position屬性不是absolute或者relative的元素,以該元素作為參照確定當前元素A的位置,如果找不 到,則以文檔左上角頂點作為參照點。在相對定位時,A元素的left屬性指相對于參照元素左邊的距離,而top指相對于參照元素底邊的距離。 
 
      static方式為默認方式,表示元素在文檔中的位置由網頁根據各元素的先后順序自然排列,此時,元素各位置參數,如left和top均無效。 
 
      fixed元素將從頁面元素中獨立出來,但其位置是相對于屏幕本身,而不是文檔的本身。 
 
      7.(層疊模式)z-index 
 
      作用:設置多個元素之間的層次順序與覆蓋關系,決定各元素在與文檔垂直的方向上的層次順序,即各層的重盛順序。該屬性必須是在position屬性為absolute時有效。 
 
      默認情況下,HTML文檔中各個元素按照在文檔中出現的先后順序依次排列在文檔中,它們位于同一平面上。當設置元素的z-index屬性后,可以使一個元素位于另一元素之上,結合position屬性及left,top等位置屬性,可以使多個元素重盛。 
 
      取值:屬性值可以是auto或無單位整數值。auto根據各層定義的先后順序來決定各層的層次關系,后面定義的層將覆蓋前面定義的層;整數值為每一層指定一數值,數值越大則層越位于上方。 
 
   本文鏈接:北京網站建設http://www.009059.icu/news/2013-09/1194.html,轉載請保留此鏈接,謝謝合作!
 
 
冠通棋牌作弊器