亚洲av综合av一区二区三区,粉嫩xxxx小馒头xxxx

　徹底弄懂CSS盒子模式之四

作者：webflash　時間： 2007-04-04　文檔類型：原創(chuàng)　來自：藍色理想

第 1 頁絕對定位和相對定位 [1]
第 2 頁絕對定位和相對定位 [2]
第 3 頁絕對定位和相對定位 [3]

3．實例強化對定位屬性的理解

（1）無定位設(shè)置，對象遵循HTML定位規(guī)則。一般是子級不會跑出父級外邊去（子級沒有使用負邊界情況），子級一般是靠在父級左上角的，父級放在最下層。

（2）給設(shè)定了定位屬性的對象指定left，right，top，bottom屬性中的至少一個，不然定位不起作用。下面實例中雖然給box2設(shè)定了定位屬性position: absolute，但是如果沒有指定其中一個方位定位值top: 0px，定位是不發(fā)生作用的，你可以刪除我注釋的樣式再測試效果進行前后對比。

（3）絕對定位對象可以層疊，層疊順序用z-index控制，如果沒有指定則遵循其父對象的定位方法，就目前來說要做到不同瀏覽器正常瀏覽，最好不要給z-index指定負值，因為像FF這樣標準的瀏覽器不支持負值，為了解釋這一現(xiàn)象，下面實例中的最底層圖片我用到了負值，所以會出現(xiàn)在IE中可以看到3幅圖層疊，而轉(zhuǎn)到FF中你就只能看到兩幅圖層疊了。

運行代碼框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>絕對定位對象可以層疊,層疊順序可用z-index控制,但最好不要用負值,因為FF不支持</title> <style type="text/css">  </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]

（4）相對定位對象會占據(jù)它原來位置，在下面實例中，沒有設(shè)定相對定位前，綠色小盒子是在藍色盒子左上角的，之前也設(shè)定了綠色小盒子的浮動方式為左浮動，可以看到文本環(huán)繞在它右邊，但是后來用相對定位方法把綠色小盒子重定位到外面去了，它還占著自己原來位置，因為你還可以看到文本流沒有發(fā)生自動填補流動。因此這種直接的相對定位方法較少用，因為重定位對象后原來位置空了一塊。相對定位常與絕對定位結(jié)合用，一般是給父級設(shè)定相對定位方式，子級元素就可以相對它進行方便的絕對定位了（請注意看后面的實例）。

運行代碼框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>相對定位對象會占據(jù)原有位置</title> <style type="text/css">  </style> </head> <body> <div class="box1"> <div class="box2"></div> [相對定位對象會占據(jù)原有位置]現(xiàn)在綠色小盒子是以子盒子形式存在藍色大盒子中，并設(shè)定了浮動方式為左浮動，所以這些文字能環(huán)繞在它右邊，當綠色小盒子用相對定位方法重定位到外邊去了，文字還是不能流入它的區(qū)域，即左上角空白區(qū)域，那是因為綠色盒子還占用著它原來位置。</div> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]

（5）相對定位的對象不可以重疊。這一點也許比較難理解，先來這樣理解吧，因為相對定位的對像沒有脫離文本流，就像兩個還是住在同一層樓的人，任何時候，他們腳下踩的地方不可能被另一個人踩著的，如果可以就意味著兩個人共享一塊地方了。在下面的實例中，兩個小盒子都剛好排在大盒子上方，所以在大盒子中輸入的文字被擠到了下面。上面兩個盒子我再用相對定位的方法對調(diào)了它們的位置，當前它們下方的空間其實不是自己的，也正因為它們沒有重疊，所以盒子上方還是有兩個盒子占用的空間，下面文字無法向上流動（我已對盒子設(shè)定了浮動屬性的了，如果不設(shè)定，即使有空間文本也不會往上流，上面盒子是塊級元素，會獨立占據(jù)一行）。

運行代碼框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>相對定位對象不可層疊</title> <style type="text/css">  </style> </head> <body> <div class="box1"> <div class="box2">我家在左邊</div> <div class="box3">我家在右邊</div> 相對定位對象是在正常文本流中移動的，所以它的存在還是會影響文本流的布局，如果是絕對定位，這些文本應(yīng)向上流入上方兩個盒子的底部了。 </div> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]

（6）高度自適應(yīng)的妙用。在下面實例中，右邊的紫色小盒子高度是沒有設(shè)定的，它的高度是隨著里面內(nèi)容的增加而增高的，但我們又可以通過絕對定位方法把它始終定位在父盒子的右上角。同理，我們也可以只設(shè)定高度而讓寬度自動隨內(nèi)容增加而變寬。

運行代碼框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>高度自適應(yīng)的妙用</title> <style type="text/css">  </style> </head> <body> <div class="box1"> <div class="box3">右邊的小盒子高度是沒有設(shè)定的，它的高度是隨著里面內(nèi)容的增加而增高的，但我們又可以通過絕對定位把它始終定在父盒子的右上角。</div> <div class="box2"> <p>藍色理想<br /> 經(jīng)典論壇<br /> 業(yè)界動態(tài)<br /> 技術(shù)文檔 </p> </div> </div> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]

出處：藍色理想
責任編輯：moby

上一頁絕對定位和相對定位 [1] 下一頁絕對定位和相對定位 [3]

◎進入論壇網(wǎng)頁制作、網(wǎng)站綜合版塊參加討論

相關(guān)文章

徹底弄懂CSS盒子模式之五

作者文章

徹底弄懂CSS盒子模式之一


關(guān)鍵字搜索	常規(guī)搜索	推薦文檔
熱門搜索：CSS Fireworks 設(shè)計比賽網(wǎng)頁制作 web標準用戶體驗 UE photoshop Dreamweaver Studio8 Flash 手繪 CG

站點最新

站點最新列表

周大福“敬•自然”設(shè)計大賽開啟

國際體驗設(shè)計大會7月將在京舉行

中國國防科技信息中心標志征集

云計算如何讓安全問題可控

云計算是多數(shù)企業(yè)唯一擁抱互聯(lián)網(wǎng)的機會

阿里行云

云手機年終巨獻，送禮標配299起

阿里巴巴CTO王堅的"云和互聯(lián)網(wǎng)觀"

1499元買真八核云OS雙蛋大促

首屆COCO桌面手機主題設(shè)計大賽

欄目最新

欄目最新列表

淺談JavaScript編程語言的編碼規(guī)范

如何在illustrator中繪制臺歷

Ps簡單繪制一個可愛的鉛筆圖標

數(shù)據(jù)同步算法研究

用ps作簡單的作品展示頁面

CSS定位機制之一:普通流

25個最佳最閃亮的Eclipse開發(fā)項目

Illustrator中制作針線縫制文字效果

Photoshop制作印刷凹凸字體

VS2010中創(chuàng)建自定義SQL Rule

中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx