国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看

打開APP
userphoto
未登錄

開通VIP,暢享免費電子書等14項超值服

開通VIP
[zz]css絕對定位、相對定位和文檔流的那些事
 前言

http://www.cnblogs.com/tim-li/archive/2012/07/09/2582618.html  


  接觸html、和css時間也不短了,但每次用div+css布局的時候心里還是有點兒虛,有時候干脆就直接用table算了,很多時候用div會出現(xiàn)些不可預料的問題,雖然花費一定時間能夠解決,但總不是個事,所以今天特地探索了下css+div的絕對定位和相對定位和文檔流的關系。

 

文檔流的概念

    確切的說應該是文檔文檔流模型的機制,html的布局機制就是用文檔流模型的,即塊元素(block)獨占一行,內聯(lián)元素(inline)。不獨占一行

 

如塊級元素(block)

<div>div1</div><div>div2</div>

效果如下

 

ok,那么怎么知道這不是因為沒有設置高和寬的樣式而出現(xiàn)的情況呢,我們聽鄧爺爺的話,實踐是檢驗真理的唯一標準

<div style=" width:100px; height:100px;">div1</div><div style=" width:100px; height:100px;">div2</div>

效果如下:額,沒坑你吧...

 

又如內聯(lián)元素(inline)

<img src="Image/close.gif" alt="圖片" style=" height:100px; width:100px;"/><a href="http:">超鏈接1</a><a href="http:">超鏈接2</a>

效果如下:可以看到內聯(lián)元素后跟內聯(lián)元素不會另起一行

 

我們再試下inline 后加 block

<img src="Image/close.gif" alt="圖片" style=" height:100px; width:100px;"/><a href="http:">超鏈接1</a><a href="http:">超鏈接2</a><div style=" width:100px; height:100px;">div1</div>

效果如下:可以看到div1(block)是另起一行獨占的

 

相對定位 position:relative

    故名思意,相對定位就應該是相對于一個東西來定位,而這個東西是什么呢?其實這個東西不是什么,就是元素自己本身,用left right top b0ttom進行定位后,元素會根據原來的位置進行移動,但由于position:relative這個屬性并沒有脫離文檔流的,所以元素本身所占的位置會保留。

下面來做個實驗,一看你就懂了- -

<div style=" width:100px; height:100px;">div1</div><div style=" width:100px; height:100px;">div2</div><div style=" width:100px; height:100px;">div3</div>

效果如下:這是沒有加入position:relative文檔流的默認排法

 

我們給div2加position:relative 并用top:-20px;left:50px進行相對移動

<div style=" width:100px; height:100px;">div1</div><div style=" width:100px; height:100px; position:relative; top:-20px; left:50px;">div2</div><div style=" width:100px; height:100px;">div3</div>

效果如下:額,為了給大家看到效果還有省了ps的勁直接截了ide的圖...但我保證在瀏覽器里他也是這么排的。我們可以看到藍色邊框就是div2原來的位置,黑色邊框就是通過position:relative相對于原來的位置左移50px; 上移20px得到的,而且我們看以看到,div3并沒有因為div2的上移而上移了,原因就是position:relative這個屬性是沒有脫離文檔流的,所以元素本身所占的位置會保留。

絕對定位 position:absolute

    好吧終于有點戲肉了,文檔流那復雜的玩意我們先不理,所謂絕對定位,其實也要找個東西來相對來絕對的,而這個東西就是元素的第一個有position,且positon不能為static的祖先元素,是不是有點拗口,換個說法吧,就是這個小鬼(element)的定位可以是他的老爸,他的爺爺,他的太公....(祖先要素)中而且第一個是是有錢的(position:absolute)或者是當官的(position:relative),就是不能是個程序猿(position:static 或者沒有設position)的。而且值得注意的是position:absolute這個屬性是脫離文檔流的,所以重新定位后元素是不會占著原來的位置的

還是跟著程序來吧- -

  <div style=" border:1px solid Red; padding:10px; width: 340px; height: 400px"">    紅色:太公        <div style="border:1px solid Green; padding:10px; width: 320px; height: 360px"">        綠色:爺爺            <div style="border:1px solid Yellow; padding:10px; width: 300px; height: 320px; ">            黃色:老爸                <div style="width: 100px; height: 100px;">                    div1</div>                <div style="width: 100px; height: 100px;">                    div2</div>                <div style="width: 100px; height: 100px;">                    div3</div>            </div>        </div>    </div>

效果如下:首先給div1 div2 div3三個祖先div 黃色的老爸, 綠色的爺爺, 紅色的太公,暫時對他們都不設position屬性

 

好吧,現(xiàn)在給老爸div設position:relative(喲!當官的)給div2設position:absolute;left:120px; top:100px;

    <div style=" border:1px solid Red; padding:10px; width: 340px; height: 400px"">    紅色:太公        <div style="border:1px solid Green; padding:10px; width: 320px; height: 360px"">        綠色:爺爺            <div style="border:1px solid Yellow; padding:10px; width: 300px; height: 320px; position:relative;">            黃色:老爸                <div style="width: 100px; height: 100px;">                    div1</div>                <div style="width: 100px; height: 100px; position:absolute; left:120px; top:100px;">                    div2</div>                <div style="width: 100px; height: 100px;">                    div3</div>            </div>        </div>    </div>

效果如下:可以從藍色線看出,div2以黃色(ide的藍線和黃色混在一起變色了)div為參照距離老爸左邊120px 上邊100px而且有于position:absolute是脫離文檔流的所以div2原來的位置不能保留div3向上填充

 

 我們再用他爺爺來試試

<div style=" border:1px solid Red; padding:10px; width: 340px; height: 400px">    紅色:太公        <div style="border:1px solid Green; padding:10px; width: 320px; height: 360px; position:relative;">        綠色:爺爺            <div style="border:1px solid Yellow; padding:10px; width: 300px; height: 320px; ">            黃色:老爸                <div style="width: 100px; height: 100px;">                    div1</div>                <div style="width: 100px; height: 100px; position:absolute; left:120px; top:100px;">                    div2</div>                <div style="width: 100px; height: 100px;">                    div3</div>            </div>        </div>    </div>

效果如下:還是div2還是 position:absolute;left:120px;top:100px,可以沖藍色線看出這次是以綠色爺爺為參照物做絕對定位的,而且div2同樣脫離了文檔流

至于他太公,一把年紀了,我們就放過他吧- -

先到這把,在下愚見,如有錯誤請及時指出。有空再總結下margin布局和float布局

本站僅提供存儲服務,所有內容均由用戶發(fā)布,如發(fā)現(xiàn)有害或侵權內容,請點擊舉報
打開APP,閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
CSS布局 ——從display,position, float屬性談起
css的屬性position屬性值的描述
代碼學習群簡易教程(29)
送你一款網頁播放器,可換任何flash音樂
網頁背景圖片代碼
在div中使用css讓文字底部對齊的方法
更多類似文章 >>
生活服務
分享 收藏 導長圖 關注 下載文章
綁定賬號成功
后續(xù)可登錄賬號暢享VIP特權!
如果VIP功能使用有故障,
可點擊這里聯(lián)系客服!

聯(lián)系客服