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;

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