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

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

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

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

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

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

6、人人人人人人人人人人人人人人人人人人人人人人人人人人人人 人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人司機(jī)人人人人人人人人人人人人下一班人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人

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

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

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

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

11、index:999;4float浮動(dòng)屬性 float:left; 5clear清除浮動(dòng)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ù)要求：建立一個(gè)文件夾，用于放置網(wǎng)頁(yè)和素材文件，使用學(xué)習(xí)過的CSS技術(shù)設(shè)計(jì)出一個(gè)如效果圖中顯示的網(wǎng)頁(yè)。文件夾命名為：“任務(wù)10 *的CSS定位屬性圓角矩形”）任務(wù)參考圖：

12、見下一頁(yè)幻燈片第第1排縮進(jìn)排縮進(jìn)5px；元素寬度為；元素寬度為390px；高度為；高度為1px；無(wú)邊框，有背景色；無(wú)邊框，有背景色；第第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)頁(yè)完成效果圖

13、注：效果圖中圓角矩形的寬、高注：效果圖中圓角矩形的寬、高尺寸大概為尺寸大概為400px*200px，背景，背景色為色為F00、FCC。華麗的分割線任務(wù) 11任務(wù)名稱：CSS定位屬性2生院記憶任務(wù)要求：建立一個(gè)文件夾，用于放置網(wǎng)頁(yè)和素材文件，使用學(xué)習(xí)過的CSS技術(shù)設(shè)計(jì)出一個(gè)如效果圖中顯示的網(wǎng)頁(yè)。文件夾命名為：“任務(wù)11 *的CSS定位屬性生院記憶”）任務(wù)參考圖：見下一頁(yè)幻燈片第第1排縮進(jìn)排縮進(jìn)5px；元素寬度；元素寬度140px；高度；高度1px；有背景色，無(wú)背景圖片；有背景色，無(wú)背景圖片；第第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ù)反順