亚洲天堂2017无码中文,又爽又色又高潮色视频国产

　position兩三事

作者：aslen　時間： 2009-02-16　文檔類型：原創(chuàng)　來自：藍(lán)色理想

第 1 頁 position兩三事 [1]
第 2 頁 position兩三事 [2]
第 3 頁 position兩三事 [3]
第 4 頁 position兩三事 [4]

3.在IE下沒有設(shè)置定位屬性4個方向的值的絕對定位的塊元素的表現(xiàn)是inline-block 再FF下其是block

例子：

運(yùn)行代碼框
<!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=utf-8" /> <meta name="author" content="aslen" /> <meta name="Copyright" content="www.gongchang.com" /> <style type="text/css"> *{padding:0;margin:0} </style> </head> <body> 這是一行正常的文字~我們知道只要是塊元素不管他的寬度多少他始終是占一行的 <div style="width:500px;background:#ff0000;position:absolute;height:30px;">我是一個具有絕對定位屬性的塊元素~你在IE下看我再那里，你再FF下看我再那里</div> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]

這個其實(shí)是瀏覽器的差異，在FF下在塊元素?fù)碛衟osition:absolute屬性后，其依然作為一個塊元素，而相對于前面的文檔流而換行，所以為了統(tǒng)一，在這種使用情況下，可以加上display:inline即可保證各個瀏覽器統(tǒng)一

4.絕對定位元素依據(jù)其定位基點(diǎn)進(jìn)行絕對定位時會忽視其定位基點(diǎn)的padding空間

例子：

運(yùn)行代碼框
<!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=utf-8" /> <meta name="author" content="aslen" /> <meta name="Copyright" content="www.gongchang.com" /> <style type="text/css"> *{padding:0;margin:0} </style> </head> <body> <div style="padding:100px;width:500px; position:relative; background:#f00;height:500px;margin:0 auto"> <div style="width:400px;background:#CC9900;height:30px;top:0;position:absolute">我是一個具有position屬性；且定位屬性為top:0px;你看我再那里</div> 我是正常文檔流中的文字 </div> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]

圖中的紅色區(qū)域是一個高度和寬度為500px且padding:100px;因?yàn)榻^對定位元素忽視其定位基點(diǎn)的padding屬性，所以在頂部呈現(xiàn)

5.設(shè)置任何一個方向的定位屬性.該絕對元素除該方向按照定位屬性的值依據(jù)其具有position屬性最近的父元素為基點(diǎn)進(jìn)行定位.其另外方向上的邏輯位置依然受前一文檔流中的元素影響.按照正常的位置進(jìn)行布局：

例子：

運(yùn)行代碼框
<!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=utf-8" /> <meta name="author" content="aslen" /> <meta name="Copyright" content="www.gongchang.com" /> <style type="text/css"> *{padding:0;margin:0} </style> </head> <body> <div style="width:500px;background:#CC9900;height:30px">1</div> <div style="width:500px;background:#ff0000;position:absolute;height:30px;left:40px;">我是一個具有絕對定位，且只有l(wèi)eft:40px這個定位屬性；你看再我那里</div> <div style="width:500px;background:#CC9900;height:30px">3</div> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]

我們可以看到圖中的紅色區(qū)域，除按照left:40這個屬性偏移40像素后，其垂直方向的位置依然為正常文檔流中的位置

出處：藍(lán)色理想
責(zé)任編輯：bluehearts

上一頁 position兩三事 [2] 下一頁 position兩三事 [4]

◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。

相關(guān)文章

更多相關(guān)鏈接

制作一幅撲克牌系列教程

用div+css模擬表格對角線

Opera的WEB標(biāo)準(zhǔn)教程

快速定位頁面中復(fù)雜 CSS BUG

border-radius與圓角


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

站點(diǎn)最新

站點(diǎn)最新列表

周大�！熬�•自然”設(shè)計(jì)大賽開啟

國際體驗(yàn)設(shè)計(jì)大會7月將在京舉行

中國國防科技信息中心標(biāo)志征集

云計(jì)算如何讓安全問題可控

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

阿里行云

云手機(jī)年終巨獻(xiàn)，送禮標(biāo)配299起

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

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

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

欄目最新

欄目最新列表

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

如何在illustrator中繪制臺歷

Ps簡單繪制一個可愛的鉛筆圖標(biāo)

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

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

CSS定位機(jī)制之一:普通流

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

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

Photoshop制作印刷凹凸字體

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

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