這篇文章繼續前面發起的關于自動定位的話題,先前在描述關于自動定位的一些基本信息之后,我留下了一些可能用在布局中的方法,現在是時候討論元素定位的改進問題了。
玩弄絕對定位元素于股掌之間
首先,回憶一下自動定位是如何觸發的,設置絕對定位元素的left、top、right、bottom屬性為默認的“auto”值,而不是給定長度值。當屬性為“auto”值時,絕對定位元素不會參考任何定位的祖先元素,而是參照它作為靜態流動元素應該放置的“static”位置。它占據著該位置,但仍保持在一個單獨的層上,或許會疊加在文本流上。
一般情況下會很好,但真正這樣做會使我們失去對每一個邊距屬性的控制,當我們需要將ap元素放置到理想位置時,我們就需要正常的利用這些屬性了。如果ap元素的靜態位置碰巧與我們想讓其放置的位置不一致時,有一種可能的方法可以使自動定位元素發射偏移—-margin。
規則說明,margins在所有ap元素上都能工作,且不會與其它margin 折疊,這大大簡化了這種狀況,但是,有一個問題會導致混淆——ap元素作為內聯元素時,如span和link。
在起前一篇文章曾經提到忽略了邊距和補白的所有top和bottom屬性,但是,ap元素會執行所有的margins和paddings,及時他們是純粹的span和link。這是因為,ap元素會將其轉換成包含塊,或者更具體些—塊元素。
借助于margin使ap元素向四周移動,這看起來不錯,但當你參照前一篇文章中的自動定位演示頁,你會有一點陌生,這是演示頁:
01.<p>
新聞熱點
疑難解答