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

1、第三章 使用CSS樣式表（下）第5節(jié)、CSS定位屬性7、定位屬性使用定位屬性可以控制元素的位置，包括相對定位和絕對定位兩種方式。相對定位是指允許元素在相對于文檔布局的原始位置上進(jìn)行偏移，而絕對定位是指允許元素與原始的文檔布局分離且任意定位。（1 1）定位方式）定位方式 position： 使用定位方式屬性可以控制瀏覽器應(yīng)如何定位HTML元素。語法，position : static（默認(rèn)無設(shè)置） | absolute（絕對定位） | fixed（固定元素不滾動） | relative（相對定位）（2）元素位置）元素位置top、right、bottom、left：元素位置屬性與定位方式共同設(shè)置元

2、素的具體位置。語法，top : auto | px丨% （3）層疊順序）層疊順序 z-index：使用層疊順序可以設(shè)置層的先后順序和覆蓋關(guān)系，該屬性實際是設(shè)置元素沿z軸的位置。默認(rèn)情況下，z-index值為1，擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面?！救≈礱uto表示遵從其父對象的定位；取數(shù)字值是必須是無單位的整數(shù)值，可以取負(fù)值?！空Z法，z-index : auto | 數(shù)字學(xué)完就練之7-1（請將源代碼復(fù)制到頁面中，開始練習(xí)）：人生人生人生人生人生人生人生（4）浮動屬性）浮動屬性 float：float屬性定義元素在哪個方向浮動。在 CSS 中，任何元素都可以浮動。浮動元素會

3、生成一個塊級框，且不論它本身是何種元素?！救≈祅one是默認(rèn)值，表示對象不浮動；left表示元素向左浮動；right表示元素向右浮動?！空Z法，float : none | left | right（5）清除浮動屬性）清除浮動屬性 clear：清除屬性用于指定一個元素是否允許有其他元素漂浮在它的周圍。【取值none表示允許兩邊都可以有浮動對象，是默認(rèn)值； left表不不允許左邊有浮動對象； right表不不允許右邊有浮動對象； both表示不允許有浮動對象?！空Z法，clear : none | left | right | both（6）溢出屬性）溢出屬性 overflow：使用overflow

4、屬性可以設(shè)置當(dāng)元素內(nèi)的內(nèi)容超出所能容納的范圍時的顯示方式?！救≈祐isible（默認(rèn)）表示元素的大小和內(nèi)容都會自動顯示出來； auto表示只在內(nèi)容超出元素的范圍時才顯示滾動條； hidden表示會隱藏超出元素范圍的內(nèi)容；scroll表示總是顯示滾動條。】語法，overflow : visible 丨 auto | hidden | scroll 學(xué)完就練之7-2（請將源代碼復(fù)制到頁面中，開始練習(xí)）：人人人人人人人人人人人人人人人人人人人人人人人人司機人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人 人人人人

5、人人人人人人人人人人人人人人人人人人人人人人人2人人人人人人人人人人人人人人人人人人人人人人人人人人人人人 人人人人人人人人人人人人人人人人人人人人人人人人人 人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人 人人人人人人人人人人人人人人人人人人人人人人人人人人人3人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人 人人人人人人人人人人人人人人人人人人人人人人人人人人人2人人人人人人人人人人人人人人人人人人人人人人人人人人

6、人人人人人人人人人人人人人人人人人人人人人人人人人人人人 人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人司機人人人人人人人人人人人人下一班人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人

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

8、裁切。】語法，clip : auto | rect(y1 x2 y2 x1)（8）可見屬性）可見屬性 visibility：該屬性規(guī)定元素是否可見，即使不可見的元素也會占據(jù)頁面上的空間。【取值visible表示元素是可見的，默認(rèn)值。 hidden表示元素是不可見的?！空Z法：visibility: visible 丨 hidden （9）框類型屬性）框類型屬性 display：display屬性規(guī)定元素應(yīng)該生成的框的類型，每一個網(wǎng)頁元素都有一個默認(rèn)的display屬性值。如div的默認(rèn)display屬性值為“block”，稱為“塊級”元素；而span的默認(rèn)display屬性值為“inline”，

9、稱為“行內(nèi)”元素?！救≈祅one表示此元素不被顯示；與visibility屬性的hidden值不同，none不為被隱藏的對象保留其物理空間；block表示此元素將顯示為塊級元素，此元素前后會帶有換行符；inline表示此元素會被顯示為內(nèi)聯(lián)元素，元素前后沒有換行符?！空Z法，display: none丨block | inline 默認(rèn)塊級元素的顯示方式是換行排列改變它們的display屬性后，塊級元素被轉(zhuǎn)換成了行內(nèi)元素，因此顯示方式變?yōu)椴粨Q行排列。默認(rèn)行內(nèi)元素的顯示方式是不換行排列改變它們的display屬性后，行內(nèi)元素被轉(zhuǎn)換成了塊級元素，因此顯示方式變?yōu)閾Q行排列。無論是行內(nèi)元素還是塊級元素，當(dāng)

10、它們的display屬性被設(shè)置為none后，都會被隱藏且不會被保留寬度和高度空間。注：visible:hidden屬性會使對象不可見，但該對象在網(wǎng)頁所占的空間沒有改變（看不見但摸得到），等于留出了一塊空白區(qū)域，而display:none屬性會使這個對象徹底消失（看不見也摸不到）。 頁面中預(yù)覽效果學(xué)完就練之7-3（請將源代碼復(fù)制到頁面中，開始練習(xí)）琞昌忑夻盅塵雪翡弆歪哥架旮蚠六、定位屬性總結(jié)序號屬性名含義舉例1position定位方式 position:absolute;2top、right、bottom、left元素位置top:200px;right:200px;3z-index層疊順序 z-

11、index:999;4float浮動屬性 float:left; 5clear清除浮動clear:both;6overflow溢出屬性 overflow:hidden;7clip可視區(qū)域 clip:rect(0px 50px 50px 0px);8visibility可見屬性 visibility: hidden 9display框類型屬性 display:block;華麗的分割線任務(wù) 10任務(wù)名稱：CSS定位屬性1圓角矩形任務(wù)要求：建立一個文件夾，用于放置網(wǎng)頁和素材文件，使用學(xué)習(xí)過的CSS技術(shù)設(shè)計出一個如效果圖中顯示的網(wǎng)頁。文件夾命名為：“任務(wù)10 *的CSS定位屬性圓角矩形”）任務(wù)參考圖：

12、見下一頁幻燈片第第1排縮進(jìn)排縮進(jìn)5px；元素寬度為；元素寬度為390px；高度為；高度為1px；無邊框，有背景色；無邊框，有背景色；第第2排縮進(jìn)排縮進(jìn)3px；元素寬度為；元素寬度為390px；高度為；高度為1px；邊框?qū)挾葹?；邊框?qū)挾葹?px；第第3排縮進(jìn)排縮進(jìn)2px；元素寬度為；元素寬度為394px；高度為；高度為1px；邊框?qū)挾葹?；邊框?qū)挾葹?px；第第4排縮進(jìn)排縮進(jìn)1px；元素寬度為；元素寬度為396px；高度為；高度為2px；邊框?qū)挾葹?；邊框?qū)挾葹?px；第第5排縮進(jìn)排縮進(jìn)0px；元素寬度為；元素寬度為398px；高度可自定義；邊框?qū)挾葹椋桓叨瓤勺远x；邊框?qū)挾葹?px；網(wǎng)頁完成效果圖

13、注：效果圖中圓角矩形的寬、高注：效果圖中圓角矩形的寬、高尺寸大概為尺寸大概為400px*200px，背景，背景色為色為F00、FCC。華麗的分割線任務(wù) 11任務(wù)名稱：CSS定位屬性2生院記憶任務(wù)要求：建立一個文件夾，用于放置網(wǎng)頁和素材文件，使用學(xué)習(xí)過的CSS技術(shù)設(shè)計出一個如效果圖中顯示的網(wǎng)頁。文件夾命名為：“任務(wù)11 *的CSS定位屬性生院記憶”）任務(wù)參考圖：見下一頁幻燈片第第1排縮進(jìn)排縮進(jìn)5px；元素寬度；元素寬度140px；高度；高度1px；有背景色，無背景圖片；有背景色，無背景圖片；第第2排縮進(jìn)排縮進(jìn)3px；元素寬度；元素寬度140px；高度；高度1px；邊框?qū)挾龋贿吙驅(qū)挾?px；背景圖片位置為；背景圖片位置為left,top；第第3排縮進(jìn)排縮進(jìn)2px；元素寬度；元素寬度144px；高度；高度1px；邊框?qū)挾?；邊框?qū)挾?px；背景圖片位置為；背景圖片位置為left,-1px;第第4排縮進(jìn)排縮進(jìn)1px；元素寬度；元素寬度146px；高度；高度2px；邊框?qū)挾龋贿吙驅(qū)挾?px；背景圖片位置為；背景圖片位置為left,-2px;第第5排縮進(jìn)排縮進(jìn)0px；元素寬度；元素寬度148px；高度；高度97px；邊框?qū)挾?；邊框?qū)挾?px；背景圖片位置為；背景圖片位置為left,-4px;第第6-9排可參考上述排可參考上述1-4排的數(shù)據(jù)反順