網(wǎng)頁設計第17次課CSS定位屬性

第三章使用CSS樣式表（下）第5節(jié)、CSS定位屬性7、定位屬性

使用定位屬性可以控制元素的位置，包括相對定位和絕對定位兩種方式。相對定位是指允許元素在相對于文檔布局的原始位置上進行偏移，而絕對定位是指允許元素與原始的文檔布局分離且任意定位。（1）定位方式position：使用定位方式屬性可以控制瀏覽器應如何定位HTML元素。語法，position:

static（默認無設置）|absolute（絕對定位）|fixed（固定元素不滾動）|relative（相對定位）（2）元素位置top、right、bottom、left：

元素位置屬性與定位方式共同設置元素的具體位置。語法，top:

auto|px丨% ……當position=static時，元素出現(xiàn)在正常的流中，即按出場順序依次排列并占有空間。當position=absolute時，元素脫離了文本流，參照瀏覽器（或最近的激活定位的父級）的左上角生成絕對定位的位置。（即在文檔中已經(jīng)不占據(jù)位置，原來位置被后面元素遞補占有）。此時對象不具有邊距，但仍有補白和邊框。當position=relative時，對象不可層疊，但將依據(jù)left，right，top，bottom等屬性在正常文檔流中偏移位置。（即在文檔中仍占據(jù)原來的位置）。如果父級（無限）沒有設定position屬性，那么當前元素的定位將以瀏覽器左上角為原始點進行定位；如果父級（無限）設定position屬性，那么當前元素的定位則以父級（最近的）的左上角為原始點進行定位。當position=fixed時，總是根據(jù)瀏覽器的窗口來進行元素的定位，且不會隨著滾動條的滾動而改變。本屬性IE6不支持。（3）層疊順序z-index：

使用層疊順序可以設置層的先后順序和覆蓋關系，該屬性實際是設置元素沿z軸的位置。默認情況下，z-index值為1，擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面?！救≈礱uto表示遵從其父對象的定位；取數(shù)字值是必須是無單位的整數(shù)值，可以取負值?！空Z法，z-index:

auto|數(shù)字當重新設置元素的z-index值后，元素的層疊順序發(fā)生改變。學完就練之7-1（請將源代碼復制到頁面中，開始練習）：<!--設置頁面中的文字格式為黑體100像素，使用定位技術，先按照紅橙黃綠青藍紫順序使7行文字遞進重疊到一起，形成“多彩的人生”效果。最后讓綠色的文字居于最上層，效果如圖。--><p>人生</p><p>人生</p><p>人生</p><p>人生</p><p>人生</p><p>人生</p><p>人生</p>（4）浮動屬性float：

float屬性定義元素在哪個方向浮動。在CSS中，任何元素都可以浮動。浮動元素會生成一個塊級框，且不論它本身是何種元素?！救≈祅one是默認值，表示對象不浮動；left表示元素向左浮動；right表示元素向右浮動?！空Z法，float:

none|left|right浮動元素會脫離文檔流，它在文檔流空出的位置由后續(xù)的(非浮動)元素填充上去。（5）清除浮動屬性clear：

清除屬性用于指定一個元素是否允許有其他元素漂浮在它的周圍?！救≈祅one表示允許兩邊都可以有浮動對象，是默認值；left表不不允許左邊有浮動對象；right表不不允許右邊有浮動對象；both表示不允許有浮動對象?！空Z法，clear:

none|left|right|both（6）溢出屬性overflow：

使用overflow屬性可以設置當元素內(nèi)的內(nèi)容超出所能容納的范圍時的顯示方式?！救≈祐isible（默認）表示元素的大小和內(nèi)容都會自動顯示出來；auto表示只在內(nèi)容超出元素的范圍時才顯示滾動條；hidden表示會隱藏超出元素范圍的內(nèi)容；scroll表示總是顯示滾動條?！空Z法，overflow:

visible丨auto|hidden|scroll當元素里內(nèi)的內(nèi)容超出所能容納的范圍時會自動溢出。學完就練之7-2（請將源代碼復制到頁面中，開始練習）：<!--設置所有div向左浮動；前5個div的大小為100×160像素，背景色為黃色，有1像素實線黑色邊框，底部外邊距100像素。其中包含數(shù)字3的div設置溢出屬性為隱藏；第6個div的大小為500×160像素，背景色為黃色，有1像素實線黑色邊框，最后其他設置全部完成后清除其浮動。--><div>人人人人人人人人人人人人人人人人人人人人人人人人司機人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人</div><div>人人人人人人人人人人人人人人人人人人人人人人人人人人人2人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人</div><divclass="div5">人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人</div><div>人人人人人人人人人人人人人人人人人人人人人人人人人人人3人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人</div><div>人人人人人人人人人人人人人人人人人人人人人人人人人人人2人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人</div><div>人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人司機人人人人人人人人人人人人下一班人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人</div>（7）可視區(qū)域屬性clip：

使用clip屬性可以限定只顯示裁切出的區(qū)域，裁切出的區(qū)域為矩形（必須將position的值設為absolute，此屬性方可使用）。只要設置兩個點即可，一個是矩形左上角的頂點，由top和left兩項設置完成，另一個是右下角的頂點，由bottom和right兩項設置完成（注，裁切的坐標是指元素自身的尺度，與position定位位置無關）?！救≈礱uto表示對象不裁切，是默認值。rect(數(shù)字）表示它依據(jù)上、右、下、左的順序提供自對象左上角（0,0)坐標計算的四個偏移數(shù)值，其中任一數(shù)值都可用auto替換，即此邊不裁切?！空Z法，clip:auto|rect(y1x2y2x1)（8）可見屬性visibility：

該屬性規(guī)定元素是否可見，即使不可見的元素也會占據(jù)頁面上的空間?！救≈祐isible表示元素是可見的，默認值。hidden表示元素是不可見的?！空Z法：visibility:visible丨h(huán)idden

（9）框類型屬性display：

display屬性規(guī)定元素應該生成的框的類型，每一個網(wǎng)頁元素都有一個默認的display屬性值。如div的默認display屬性值為“block”，稱為“塊級”元素；而span的默認display屬性值為“inline”，稱為“行內(nèi)”元素?！救≈祅one表示此元素不被顯示；與visibility屬性的hidden值不同，none不為被隱藏的對象保留其物理空間；block表示此元素將顯示為塊級元素，此元素前后會帶有換行符；inline表示此元素會被顯示為內(nèi)聯(lián)元素，元素前后沒有換行符?！空Z法，display:

none丨block|inline

默認塊級元素的顯示方式是換行排列改變它們的display屬性后，塊級元素被轉換成了行內(nèi)元素，因此顯示方式變?yōu)椴粨Q行排列。默認行內(nèi)元素的顯示方式是不換行排列改變它們的display屬性后，行內(nèi)元素被轉換成了塊級元素，因此顯示方式變?yōu)閾Q行排列。無論是行內(nèi)元素還是塊級元素，當它們的display屬性被設置為none后，都會被隱藏且不會被保留寬度和高度空間。注：visible:hidden屬性會使對象不可見，但該對象在網(wǎng)頁所占的空間沒有改變（看不見但摸得到），等于留出了一塊空白區(qū)域，而display:none屬性會使這個對象徹底消失（看不見也摸不到）。頁面中預覽效果學完就練之7-3（請將源代碼復制到頁面中，開始練習）<!--設置頁面中的文字格式為紅色黑體150像素，使用position和clip屬性，讓兩行文字只顯示各自的上半部分，且形成連貫的一句話。最后讓第1行span里的文字visibility屬性為隱藏，第2行span里的文字display屬性為none。--><p>琞昌忑<span>夻</span>盅塵雪</p><p>翡弆歪<span>哥</span>架旮蚠</p>六、定位屬性總結序號屬性名含義舉例1position定位方式position:absolute;2top、right、bottom、left元素位置top:200px;right:200px;3z-index層疊順序z-index:999;4float浮動屬性float:left;5clear清除浮動clear:both;6overflow溢出屬性overflow:hidden;7clip可視區(qū)域clip:rect(0px50px50px0px);8visibility可見屬性visibility:hidden9display框類型屬性display:block;華麗的分割線任務10任務名稱：CSS定位屬性1——圓角矩形任務要求：建立一個文件夾，用于放置網(wǎng)頁和素材文件，使用學習過的CSS技術設計出一個如效果圖中顯示的網(wǎng)頁。文件夾命名為：“任務10**的CSS定位屬性—圓角矩形”）任務參考圖：見下一頁幻燈片圓角矩形原理闡釋（假設元素寬度為400px

）：第1排縮進5px；元素寬度為390px；高度為1px；無邊框，有背景色；第2排縮進3px；元素寬度為390px；高度為1px；邊框寬度為2px；第3排縮進2px；元素寬度為394px；高度為1px；邊框寬度為1px；第4排縮進1px；元素寬度為396px；高度為2px；邊框寬度為1px；第5排縮進0px；元素寬度為398px；高度可自定義；邊框寬度為1px；網(wǎng)頁完成效果圖注：效果圖中圓角矩形的寬、高尺寸大概為400px*200px，背景色為F00、FCC。華麗的分割線任務11任務名稱：CSS定位屬性2——生院記憶任務要求：建立一個文件夾，用于放置網(wǎng)頁和素材文件，使用學習過的CSS技術設計出一個如效果圖中顯示的網(wǎng)頁。文件夾命名為：“任務11**的CSS定位屬性—生院記憶”）任務參考圖：見下一頁幻燈片圓角化背景圖片原理闡釋（背景圖片已設置為不重復,假設背景圖片寬度為150px，高度105px）：第1排縮進5px；元素寬度140px；高度1px；有背景色