丁香花视频免费播放,偷拍,清纯,欧美,久久精品,超碰国产精品久久国产精品99,新版天堂资源网,av在线观看

這篇文章繼續(xù)前面發(fā)起的關(guān)于自動(dòng)定位的話題，先前在描述關(guān)于自動(dòng)定位的一些基本信息之后，我留下了一些可能用在布局中的方法，現(xiàn)在是時(shí)候討論元素定位的改進(jìn)問(wèn)題了。

玩弄絕對(duì)定位元素于股掌之間

首先，回憶一下自動(dòng)定位是如何觸發(fā)的，設(shè)置絕對(duì)定位元素的left、top、right、bottom屬性為默認(rèn)的“auto”值，而不是給定長(zhǎng)度值。當(dāng)屬性為“auto”值時(shí)，絕對(duì)定位元素不會(huì)參考任何定位的祖先元素，而是參照它作為靜態(tài)流動(dòng)元素應(yīng)該放置的“static”位置。它占據(jù)著該位置，但仍保持在一個(gè)單獨(dú)的層上，或許會(huì)疊加在文本流上。

一般情況下會(huì)很好，但真正這樣做會(huì)使我們失去對(duì)每一個(gè)邊距屬性的控制，當(dāng)我們需要將AP元素放置到理想位置時(shí)，我們就需要正常的利用這些屬性了。如果AP元素的靜態(tài)位置碰巧與我們想讓其放置的位置不一致時(shí)，有一種可能的方法可以使自動(dòng)定位元素發(fā)射偏移—-margin。

規(guī)則說(shuō)明，margins在所有AP元素上都能工作，且不會(huì)與其它margin 折疊，這大大簡(jiǎn)化了這種狀況，但是，有一個(gè)問(wèn)題會(huì)導(dǎo)致混淆——AP元素作為內(nèi)聯(lián)元素時(shí)，如span和link。

在起前一篇文章曾經(jīng)提到忽略了邊距和補(bǔ)白的所有top和bottom屬性，但是，AP元素會(huì)執(zhí)行所有的margins和paddings，及時(shí)他們是純粹的span和link。這是因?yàn)椋珹P元素會(huì)將其轉(zhuǎn)換成包含塊，或者更具體些—塊元素。

借助于margin使AP元素向四周移動(dòng)，這看起來(lái)不錯(cuò)，但當(dāng)你參照前一篇文章中的自動(dòng)定位演示頁(yè)，你會(huì)有一點(diǎn)陌生，這是演示頁(yè)：

當(dāng)鼠標(biāo)經(jīng)過(guò)“l(fā)ink-text”時(shí)，AP出現(xiàn)在窗口之中，自動(dòng)定位將其放在一個(gè)內(nèi)聯(lián)span應(yīng)該出現(xiàn)的位置上，即使span是絕對(duì)定位，并且是一個(gè)塊元素，就瀏覽器而言，絕對(duì)定位的span元素像內(nèi)聯(lián)元素那樣，同時(shí)它又是擁有諸如margin、padding和border等屬性的塊元素。

同時(shí)，回憶一下第二個(gè)演示頁(yè)，我給span特定的定義了“display：block”屬性，那樣，所有非IE瀏覽器將span放置到新一行上，并且是從段落的左側(cè)開(kāi)始。這樣，我們看到元素并無(wú)多大改變，而是對(duì)其自動(dòng)定位屬性產(chǎn)生了影響。（IE除外）

這非常有趣，但一點(diǎn)也不影響我們的margin實(shí)驗(yàn)。我只是讓你認(rèn)識(shí)到這一點(diǎn)，因?yàn)橛袝r(shí)候，它會(huì)在你毫不知情的情況下使你困惑。

Margins初探

我們想讓AP span彈出框的位置出現(xiàn)的第一點(diǎn)，更靠左一些，使其疊在父鏈接之上。這樣看起來(lái)更酷，而且他們重疊，確保用戶來(lái)回移動(dòng)鼠標(biāo)不會(huì)使彈出框消失。

這是同樣的demo，但是其top邊距向下移，right邊距左移，這樣就出現(xiàn)在父鏈接之前，增加以下代碼：

現(xiàn)在，鼠標(biāo)經(jīng)過(guò)鏈接文本時(shí)看到變化沒(méi)有？彈出層較以前下移了一些。不錯(cuò)，但它并沒(méi)有向左移！Right邊距看來(lái)并未生效。讓我們從不同的方向試試－－用負(fù)的left邊距代替正的right邊距。

這是為什么？負(fù)left邊距生效而正的right邊距屬性不生效？同樣為什么top邊距也能生效？我們需要更好的demo去探討這個(gè)問(wèn)題，下面是一個(gè)相對(duì)定位的盒子，四個(gè)絕對(duì)定位的子div借助其left、top、right、bottom屬性分別位于四個(gè)角落。

注意，由于存在四舍五入錯(cuò)誤，在一些瀏覽器中你會(huì)看到盒子的底部和右邊有1px的間隙，到目前為止，一切正常，現(xiàn)在讓我們添加一些邊距。

在下面的示例中四個(gè)不同的測(cè)試版本中，第一個(gè)box擁有l(wèi)eft、top邊距，第二個(gè)擁有bottom、right邊距。剩下的兩個(gè)與前兩個(gè)相同但屬性值為負(fù)。

分析

你注意到這種模式?jīng)]有？只有在絕對(duì)定位元素的同一側(cè)應(yīng)用margin和定位屬性值時(shí)margin才生效。實(shí)際上，在你定義了絕對(duì)定位元素的left屬性后，你可以定義margin-left屬性，這樣會(huì)生效，其它幾邊是一樣。

你或許會(huì)問(wèn)，為什么是這樣？一個(gè)有著嚴(yán)格尺寸的絕對(duì)定位box會(huì)通過(guò)兩個(gè)相鄰的屬性(left、top、right、bottom)與其他元素相毗鄰。余下的將被忽略或偏移你定義的尺寸大小。

既然只有絕對(duì)定位盒子的兩側(cè)與其他相聯(lián)系，當(dāng)定義margin時(shí)，只有這兩側(cè)發(fā)生反應(yīng)。其余的兩側(cè)被描述為“半拉子”，它們不觸及任何東西，在不干擾盒子聲明尺寸或已定義屬性值的一側(cè)的情況下，其margin屬性不產(chǎn)生任何推拉效果。很明顯，這種行為不是很好，這樣，那些無(wú)關(guān)的margin將被忽略。

當(dāng)靜態(tài)位置是在從左到右的流中計(jì)算時(shí)，自動(dòng)定位盒子看起來(lái)好像是由left和top屬性來(lái)決定的。這樣，在我們的演示頁(yè)中，right屬性不會(huì)生效，bottom也是一樣。

絕對(duì)定位盒子沒(méi)有尺寸時(shí)也沒(méi)什么不同（僅僅用兩個(gè)相鄰的屬性來(lái)控制），因?yàn)樵谀欠N情況下，絕對(duì)定位盒子會(huì)在垂直和水平方向上收縮以適合內(nèi)容，這樣是的盒子看起來(lái)好像被定義了尺寸，尺寸大小剛好與內(nèi)容的大小相同。唯一的例外出現(xiàn)在絕對(duì)定位盒子由兩個(gè)相反屬性控制時(shí)。

試試半拉子

讓我們看看，你設(shè)置絕對(duì)定位盒子的left和right屬性為0，但不定義任何寬度。這樣盒子在其最近的定位的祖先元素中伸展直到填滿所有所有水平空間?，F(xiàn)在，絕對(duì)定位盒子的兩側(cè)與另外一個(gè)元素相關(guān)，這樣，margin-left和margin-right將會(huì)生效，其值無(wú)論正負(fù)都有效，查看示例

正如你所看到的那樣，正值擠壓盒子的兩邊，而負(fù)值使盒子延伸出去。

需要牢記的是：IE6決不允許用兩個(gè)相反的屬性值來(lái)控制盒子的尺寸，這樣margin也不會(huì)生效，除非給絕對(duì)定位盒子定義尺寸。

總結(jié)

我希望討論能消除絕對(duì)定位盒子關(guān)于margin屬性的疑慮，一旦這些問(wèn)題得到理解，它就不會(huì)很復(fù)雜。除了IE6的限制，希望bug越少越好。

上一篇：IE 下的只讀 innerHTML

下一篇：入門知識(shí):網(wǎng)站地址前的http是什么意思？

返回