原文链接:

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

    <?php // 事件的回调函数 function func_tick() { echo "call...\r\n"; } // 注册事件的回调函数 register_tic ...

  2. phpcms与discuz的ucenter整合

    1.安装phpcms系统,域名为pc.me   2.安装discuz,并选择安上uc_server,域名为dz.me   3.在phpcms下phpsso的系统设置   4.到ucenter管理中心- ...

  3. Halcon小函数的封装和代码导出

    一.Halcon小函数的封装和修改 1.名词解释: 算子:指Halcon中最基础.最底层的函数(即你看不到它的代码实现),一个算子只有一句话,例如threshold算子. 小函数:由多个算子组合成的函 ...

  4. Ubuntu 下如何查看已安装的软件

    1.查看安装的所有软件 dpkg -l 例如:dpkg -l | grep ftp <span style="font-size:18px;">:~$ dpkg -l ...

  5. Loadrunner12.5-同一个网址通过vugen不能打开,但是直接在ie11中就可以打开

    一:录制选项修改成“WinINet级别数据”,重新录制就可以成功打开网页了. 注:运行时设置--首选项--高级--“使用WinINet回放而非套接字(仅限Windows)”需要勾选上:否则录制脚本结束 ...

  6. SQA计划和系统测试规程

    SQA计划和系统测试规程 一.SQA计划 1.软件工程 我们小组所做的项目是图书馆管理系统.我们要准确的了解此软件的需求(能够注册登录,查询图书,借书,还书,查看借阅记录等),在此前提进行建模,基于场 ...

  7. 前端之css笔记3

    一 display属性 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  8. 2018.07.08 NOIP模拟 第K小数(二分)

    第K小数 题目背景 SOURCE:NOIP2016-AHSDFZ T1 题目描述 有两个正整数数列,元素个数分别为 N 和 M .从两个数列中分别任取一个数相乘,这样一共可以得到 N*M 个数,询问这 ...

  9. 1) Apache Maven 's README.txt

    Apache Maven What is it? ----------- Maven is a software project management and comprehension tool. ...

  10. 01-html和head介绍

    一.web标准 web准备介绍: w3c:万维网联盟组织,用来制定web标准的机构(组织) web标准:制作网页遵循的规范 web准备规范的分类:结构标准.表现标准.行为标准. 结构:html.表示: ...