原文链接:

内外补丁负值法是指通过内外补丁的设置来解决一些我们通常方法不能实现的效果。例如:可以通过改变盒模型的样式来使几列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;的理解的更多相关文章

  1. margin和padding理解

    W3C组织建议把所有网页上的对像都放 在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层. 盒模型主要定义四个区域:内容 (content).边框 ...

  2. css-深入理解margin和padding

    最近一阶段从新学习了css,发现真的有很多很多的地方都是空白的,今天我们来总结一下margin和padding的一些不为人知的秘密! 一利用float和margin实现布局 我们首先来实现一个两列示布 ...

  3. 浅谈Margin和Padding值设置成百分数的布局

    转自:问说网http://www.uedsc.com/discussion-margin-and-padding-values.html Margin和Padding是我们在网页设计经常使用到的CSS ...

  4. 使用CSS中margin和padding的基础和注意事项

    在CSS中,margin和padding是页面布局的主要属性,如何灵活有效使用对于基于DIV+CSS设计网页方法是非常重要的,笔者经常使用且经常误使用,所以根据经验和网上资料整理出切合自己的内容,以备 ...

  5. HTML CSS——margin和padding的学习

    你在学习margin和padding的时候是不是懵了,——什么他娘的内边距,什么他娘的外边距.呵呵呵,刚开始我也有点不理解,后来通过查资料学习总算弄明白了,现在我来谈一下自己对margin和paddi ...

  6. HTML CSS——margin与padding的初学

    下文引自HTML CSS——margin和padding的学习,作者fengyv,不过加入了一些个人的看法. 你在学习margin和padding的时候是不是懵了,——什么他娘的内边距,什么他娘的外边 ...

  7. android中的margin和padding

    Android的Margin和Padding跟Html的是一样的.如下图所示:黄色部分为Padding,灰色部分为Margin. 通俗的理解: Padding 为内边框,指该控件内部内容,如文本/图片 ...

  8. Android之Margin和Padding属性及支持的长度单位

    做了个小软件后,终于把Margin和Padding弄清楚了,现总结如下: Android的Margin和Padding跟Html的是一样的.如下图所示:黄色部分为Padding,灰色部分为Margin ...

  9. css:margin和padding的百分之使用

    #app { position: fixed; width: 94%; height: 100%; background: pink; padding: 0px 3% 0px 3%;} 如上代码,最终 ...

随机推荐

  1. ubuntu 安装 google Gtest

    1.安装源代码 在ubuntu的桌面上,右键选择打开终端,在终端中输入如下命令: $ sudo apt-get install libgtest-dev 下载源码后,apt将会在目录/usr/src/ ...

  2. [SoapUI] 在执行某个TestSuite之前先执行login或者其他什么前置步骤

    打开TestSuite有一个地方可以设置Setup Script import com.eviware.soapui.model.support.PropertiesMap log.info &quo ...

  3. Java数据结构和算法(四)赫夫曼树

    Java数据结构和算法(四)赫夫曼树 数据结构与算法目录(https://www.cnblogs.com/binarylei/p/10115867.html) 赫夫曼树又称为最优二叉树,赫夫曼树的一个 ...

  4. c++ 博客资源

    /************************************************************** 技术博客 http://www.cnblogs.com/itdef/   ...

  5. Caused by: java.lang.NoClassDefFoundError at com.jc.zm.ZmAlarmAction.analyDo(ZmAlarmAction.java:198)

    ZmPlanDayAction objPlanDay = new ZmPlanDayAction();   objPlanDay.setDao(dao);   objPlanDay.setServle ...

  6. Devexpress VCL Build v2014 vol 14.1.4 发布

    虽然这次没加什么新东西,但是及时更新支持xe7,还算可以. What's New in 14.1.4 (VCL Product Line)   New Major Features in 14.1 W ...

  7. 2018.10.21 codeforces1071B. Minimum path(dp+贪心+bfs)

    传送门 唉考试的时候写错了两个细节调了一个多小时根本没调出来. 下来又调了半个小时才过. 其实很简单. 我们先dpdpdp出最开始最多多少个连续的aaa. 然后对于没法继续连续下去的用贪心+bfsbf ...

  8. 2018.10.20 bzoj1068: [SCOI2007]压缩(区间dp)

    传送门 这题转移很妙啊. f[l][r][1/0]f[l][r][1/0]f[l][r][1/0]表示对于区间[l,r][l,r][l,r]有/无重复的机会时压缩的最小值. 那么可以从三种情况转移过来 ...

  9. time & datetime 模块

    在平常的代码中,我们常常需要与时间打交道.在Python中,与时间处理有关的模块就包括:time,datetime,calendar(很少用,不讲),下面分别来介绍. 在开始之前,首先要说明几点: 一 ...

  10. AngularJS标准Web业务流程开发框架—1.AngularJS模块以及启动分析

    前言: AngularJS中提到模块是自定义的模块标准,提到这不得不说AngularJS是框架中的老大哥,思想相当的前卫..在这框架满天横行的时代,AngularJS有些思想至今未被超越,当然仁者见仁 ...