注冊/登錄,歡迎光臨!
加入收藏設為首頁網站地圖
您當前的位置:辛勤IT網 >> 網頁設計 >> DIV+CSS >> CSS+DIV常見的三種元素定位方式
熱門:word | excel | powerpoint

CSS+DIV常見的三種元素定位方式

2019/4/30 21:34:31 所屬分類:網頁設計 - DIV+CSS
內容提要:CSS+DIV常見的三種元素定位方式,css中元素的定位,復雜的網頁布局都是通過各種網頁元素靈活定位實現的,網頁中的各種元素定位都有自己的特點。下面介紹一下css中常用的三種定位方法。這里說的定位不是table排版的,而是通過DIV+CSS的方法對頁面中的塊元素的定位。

  css中元素的定位

  復雜的網頁布局都是通過各種網頁元素靈活定位實現的,網頁中的各種元素定位都有自己的特點。下面介紹一下css中常用的三種定位方法。這里說的定位不是table排版的,而是通過DIV+CSS的方法對頁面中的塊元素的定位。

  float定位

  float定位是css排版非常重要的手段,新手一定要多多練習熟練掌握。float定位屬性值有三種left、right和默認值none。設置了元素向左(left)或者向右(right)浮動時,元素會向父元素的坐車或者右側靠近。可以靈活運用浮動實現復雜的排版效果比如說“文字環繞”和“八仙過海”。另外可以使用clear:both屬性消除上面對下面的排版影響。下圖是一段簡單的CSS+DIV代碼,A是B、C和D的父元素,B元素使用了左float定位,C元素使用了有float定位,D元素使用了clear:both清除浮動影響。

  position定位

  position定位于float一樣,也是css排版中經常用到的,從字面上理解就是指定塊元素的位置,它是相對于父元素的位置和相對其他自身應該在的位置。position有static、absolute、inherit、relative和fixed五個值。static是默認值,它表示元素保持在原來的位置上,沒有任何移動效果。absolute:它表示元素生成絕對定位,可以設置top、right、bottom、left四個值來調整元素的位置。relative:它表示生成相對定位的元素,相對于其正常位置進行定位。fixed:它表示生成絕對定位的元素,相對于瀏覽器窗口進行定位,也可以設置top、right、bottom、left四個值來調整元素的位置。inherit:規定從父元素繼承 position 屬性的值。需要注意的是IE瀏覽器不支持position定位的inherit屬性。下圖是一段簡單的absolute定位代碼。

  z-index空間位置

  z-index屬性用于調整定位是重疊快的上下位置,你可以想象為x-y軸,垂直于頁面為z軸,z-index值越大他的位置就越往上。z-index值為整數,可以是負數,元素設置了position出現重疊時,為了保證排班效果,需要設置它們的z-index屬性值。默認的z-index屬性值是0,兩個元素z-index都一樣將保持原來的空間位置不變。

網頁設計 | DIV+CSS
最近更新
推薦信息
關于我們 | 聯系方式 | 對話本站 | 版權聲明 | 所有信息
福建体彩31选7走势图开奖7