網(wǎng)頁設(shè)計(jì)與制作教程Web前端開發(fā)（第7版）課件：CSS3的盒模型-CSS盒子定位屬性_第1頁
網(wǎng)頁設(shè)計(jì)與制作教程Web前端開發(fā)（第7版）課件：CSS3的盒模型-CSS盒子定位屬性_第2頁
網(wǎng)頁設(shè)計(jì)與制作教程Web前端開發(fā)（第7版）課件：CSS3的盒模型-CSS盒子定位屬性_第3頁
網(wǎng)頁設(shè)計(jì)與制作教程Web前端開發(fā)（第7版）課件：CSS3的盒模型-CSS盒子定位屬性_第4頁
網(wǎng)頁設(shè)計(jì)與制作教程Web前端開發(fā)（第7版）課件：CSS3的盒模型-CSS盒子定位屬性_第5頁
已閱讀5頁，還剩15頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

定位（Positioning）它允許用戶定義元素框相對(duì)于其正常位置應(yīng)該出現(xiàn)的位置或者相對(duì)于父元素、另一個(gè)元素甚至瀏覽器窗口本身的位置。CSS為定位提供了一些屬性，利用這些屬性，可以建立列式布局，將布局的一部分與另一部分重疊。

CSS3的盒模型CSS盒子定位屬性目錄

CSS的盒模型6.1CSS盒模型的組成和大小6.2CSS盒模型的屬性6.3CSS布局屬性6.4CSS盒子定位屬性 6.5CSS3多列屬性6.6CSS基本布局樣式 6.7實(shí)訓(xùn)——制作社區(qū)網(wǎng)網(wǎng)頁6.8練習(xí)6.4CSS盒子定位屬性6.4.1定位位置屬性top、right、bottom、left語法：top:auto|lengthright:auto|lengthbottom:auto|lengthleft:auto|length示例：div{left:20px}6.4CSS盒子定位屬性6.4.2定位方式屬性position設(shè)置元素的定位類型。語法：position:static|absolute|relative|sticky6.4CSS盒子定位屬性1．靜態(tài)定位【例6-18】靜態(tài)定位示例。本例文件6-18.html在瀏覽器中的顯示效果，如圖6-28所示。6.4CSS盒子定位屬性<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>靜態(tài)定位</title><styletype="text/css">body{margin:20px;}#father{background-color:#a0c8ff;border:1pxdashed#000000;padding:10px;}#box1{background-color:#fff0ac;border:1pxdashed#000000;padding:20px;}</style></head><body><h2>這是一個(gè)沒有定位的標(biāo)題</h2><divid="father"><divid="box1">盒子1</div></div></body></html>6.4CSS盒子定位屬性2．相對(duì)定位【例6-19】相對(duì)定位示例。本例文件6-19.html在瀏覽器中的顯示效果，如圖6-29所示。6.4CSS盒子定位屬性<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>相對(duì)定位</title><styletype="text/css">body{margin:20px;/*頁面整體外邊距為20px*/}#father{background-color:#a0c8ff;/*父容器的背景為藍(lán)色*/border:1pxdashed#000000;/*父容器的邊框?yàn)?px黑色實(shí)線*/padding:10px;/*父容器內(nèi)邊距為10px*/}#box1{background-color:#fff0ac;/*盒子背景為黃色*/border:1pxdashed#000000;/*邊框?yàn)?px黑色實(shí)線*/padding:10px;/*盒子的內(nèi)邊距為10px*/margin:10px;/*盒子的外邊距為10px*/position:relative;/*relative相對(duì)定位*/left:30px;/*距離父容器左端30px*/top:30px;/*距離父容器頂端30px*/}h2.left_top{position:relative;/*relative相對(duì)定位*/top:-40px;left:-30px;}</style></head>6.4CSS盒子定位屬性<body><h2>這是一個(gè)沒有定位的標(biāo)題</h2><h2class="left_top">這個(gè)標(biāo)題是根據(jù)其正常位置向左向上移動(dòng)</h2><divid="father"><divid="box1">盒子1</div></div></body></html>6.4CSS盒子定位屬性3．絕對(duì)定位【例6-20】absolute絕對(duì)定位示例，本例文件6-20.html在瀏覽器中的顯示效果，如圖6-30所示。6.4CSS盒子定位屬性<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>absolute絕對(duì)定位</title><styletype="text/css">h3{position:absolute;left:200px;top:50px;}</style></head>6.4CSS盒子定位屬性<body><h3>這是一個(gè)絕對(duì)定位了的標(biāo)題。標(biāo)題放置距離左邊的頁面100px和距離頁面的頂部150px的元素。</h3><p>用絕對(duì)定位，一個(gè)元素可以放在頁面上的任何位置。</p><p></p><p></p><divstyle="border:3pxsolidblue;width:100px;height:100px;">藍(lán)色的div位于正常文檔流中</div><divstyle="border:3pxdottedred;width:100px;height:100px;position:absolute;top:100px;left:50px;">紅色的div脫離了文檔流</div><hr><span>綠色div和粉色div都設(shè)置成絕對(duì)定位div，但粉色div它的父元素是綠色div，所以粉色div計(jì)算相對(duì)位置是根據(jù)綠色div的原點(diǎn)計(jì)算的</span><divstyle="width:200px;height:200px;border:3pxdashedgreen;position:absolute;top:200px;left:200px;"><divstyle="border:3pxdoublepink;width:100px;height:100px;position:absolute;top:30px;left:30px;"></div></div></body></html>6.4CSS盒子定位屬性4．固定定位【例6-21】固定定位示例。為了對(duì)固定定位演示得更加清楚，將“盒子2”固定定位，并且調(diào)整頁面高度使瀏覽器顯示出滾動(dòng)條。本例文件6-21.html在瀏覽器中顯示的效果，如圖6-31所示。6.4CSS盒子定位屬性<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>固定定位</title><styletype="text/css">body{margin:20px;/*頁面整體外邊距為20px*/}#father{background-color:#a0c8ff;/*父容器的背景為藍(lán)色*/border:1pxdashed#000000;/*父容器的邊框?yàn)?px黑色實(shí)線*/padding:25px;/*父容器內(nèi)邊距為25px*/}#box1{background-color:#fff0ac;/*盒子的背景為黃色*/border:1pxdashed#000000;/*盒子的邊框?yàn)?px黑色實(shí)線*/padding:10px;/*盒子的內(nèi)邊距為10px*/position:relative;/*relative相對(duì)定位*/}#box2{background-color:#fff0ac;/*盒子的背景為黃色*/border:1pxdashed#000000;/*盒子的邊框?yàn)?px黑色實(shí)線*/padding:10px;/*盒子的內(nèi)邊距為10px*/position:fixed;/*fixed固定定位*/top:0;/*向上偏移至瀏覽器窗口頂端*/right:0;/*向右偏移至瀏覽器窗口右端*/}6.4CSS盒子定位屬性#box3{background-color:#fff0ac;/*盒子的背景為黃色*/border:1pxdashed#000000;/*盒子的邊框?yàn)?px黑色實(shí)線*/padding:10px;/*盒子的內(nèi)邊距為10px*/position:relative;/*relative相對(duì)定位*/}</style></head><body><divid="father"><divid="box1">盒子1</div><divid="box2">盒子2</div><divid="box3">盒子3</div></div></body></html>6.4CSS盒子定位屬性5.粘性定位【例6-22】sticky定位示例，本例文件6-22.html在瀏覽器中的顯示效果，如圖6-32所示。6.4CSS盒子定位屬性<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>sticky定位</title><styletype="text/css">div.sticky{position:-webkit-sticky;position:sticky;top:0;padding:5px;background-color:#cae8ca;border:2pxsolid#4CAF50;}</style></head><body><p>請(qǐng)滾動(dòng)頁面，才能看出效果！</p><p>注意:IE/Edge15及更早IE版本不支持sticky屬性。</p><divclass="sticky">我是粘性定位!</div><divstyle="padding-bottom:2000px"><p>滾動(dòng)我</p><p>來回滾動(dòng)我</p><p>滾動(dòng)我</p><p>來回滾動(dòng)我</p><p>滾動(dòng)我</p><p>來回滾動(dòng)我</p></div></body></html>6.4CSS盒子定位屬性6.4.3層疊順序?qū)傩詚-index語法：z-index:

auto|number【例6-23】z-index屬性示例，本例文件6-23.html在瀏覽器中的顯示效果，如圖6-33所示。

6.4CSS盒子定位屬性<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>z-index示例</title><styletype="text/css">img{position:absolute;left:0px;top:0px;z-index:-1;width:150px;height:100px;}div.box{position:absolute;width:100px;height:100px;}</style></head><body

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論