关于margin:-10000px;padding:10000px;的理解

标签：

原文链接：http://javakid.blog.163.com/blog/static/191061094201221414057146/

内外补丁负值法是指通过内外补丁的设置来解决一些我们通常方法不能实现的效果。例如：可以通过改变盒模型的样式来使几列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的深刻理解的基础上；否则我们只能知其然而不知其所以然，这样灵活运用就更不可能了。所以以后在做一个效果的时候不仅仅是掌握解决问题的方法，更要明白这种方法所运用的原理，或是思想。

关于margin:-10000px;padding:10000px;的理解

标签：

原文地址：http://www.cnblogs.com/haoyijing/p/5759696.html