內外補丁負值法是指通過內外補丁的設置來解決一些我們通常方法不能實現的效果。例如:可以通過改變盒模型的樣式來使幾列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;
想想為什么開始做題時沒有做出來呢?究其原因還是因為我對margin負值來抵消padding的原理不太理解。所以在運用的時候思路打不開。而內外補丁負值法就是源於對盒模型和margin、padding的深刻理解的基礎上;否則我們只能知其然而不知其所以然,這樣靈活運用就更不可能了。所以以后在做一個效果的時候不僅僅是掌握解決問題的方法,更要明白這種方法所運用的原理,或是思想。