margin

內外補丁負值法是指通過內外補丁的設置來解決一些我們通常方法不能實現的效果。例如:可以通過改變盒模型的樣式來使幾列div由內容撐開高度但幾列div與最高的一欄等高的問題。但是爲什麼會出現這樣的情況呢?先來充分理解一下margin和padding;說的直白一些margin就是模塊與模塊之間的間隙,而padding是邊框與內容之間的間隙。當設置padding-bottom:10000px;margin-bottom:-10000px;是先通過padding-bootom增大盒模型的高度,再通過margin-bottom抵消盒模型的高度。此時運用的是padding可以撐開外層標籤而margin不用來撐開外層標籤。即當padding-bottom:10000px時撐開外層標籤的高度增加10000px,外層標籤用overflow:hidden;隱藏掉多餘的高,這樣可以讓高度與最高的那一欄對齊;而margin關乎模塊佈局,margin:-10000px可以抵消掉padding撐開的盒子使佈局能夠從內容部分開始。

題一:兩欄div並列,一欄固定寬,另一欄div自適應屏幕大小的一道題;這只需要給一欄設定寬另一欄不設寬設margin-left的負值大小爲另一欄的寬度即可。這不需要內外補丁相互抵消的方法,這裏要講的是另外兩道題。
題二:兩欄div並列,左欄內容撐開寬度,右欄寬度自適應屏幕大小。做題時腦袋暈暈的,一直轉在第一題上,結果就很悲劇了。下來聽到同學說起思路恍然驚醒。
思路是:左欄以內容撐開寬度,右欄設定margin-left:-10000px;padding-left:10000px;結果就是我們所需要的了。
題三:三欄佈局內容撐開高度但三欄以最高的一欄對齊;
思路與題二相同。設定margin-bottom:-10000px;padding-bottom:10000px;

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章