原文链接:

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

    问题 当我使用docke search mysql时,显示如下错误: [root@iZ25u61v97hZ opt]# docker search redis Segmentation Fault o ...

  2. Navicat Premium11连接Oracle出现ORA-28547:connection to server failed

    环境描述:本地Oracle正常安装,中途没有出现任何异常.确保Oracle的主要服务都启动了.1.OracleServiceORCL2.OracleOraDb11g_home1TNSListener ...

  3. 什么是maven,jar包的查找过程?

    1.什么是maven? Maven项目对象模型(POM),可以通过一小段描述信息来管理项目的构建,报告和文档的项目管理工具软件. 2.什么是项目管理工具? 就是SVN.对于SVN的介绍见我的上一篇博客 ...

  4. C#调用默认浏览器打开网页的几种方法

    private void button1_Click(object sender, EventArgs e) { //从注册表中读取默认浏览器可执行文件路径 RegistryKey key = Reg ...

  5. Halcon的编程语法与数据处理——第8讲

    1.跟其他语言不完全一致的表达符号 赋值符号  := 引号      ' ' (一律是单引号) 求商求余  /   % (一个整数除以另一个数,如何使商是实型的?即浮点型) 逻辑运算  and  or ...

  6. 从输入url到显示网页发生了什么

    原文链接:https://juejin.im/post/5bf23afa6fb9a049be5d1494 在浏览器中输入url到显示网页主要包含两个部分: 网络通信和页面渲染 互联网内各网络设备间的通 ...

  7. Linux的crontab应注意事项

    今天遇到一个问题,困扰了好久,刚开始时以为crontab定时任务配置错误,后经过验证没有错误,然后又怀疑到是不是权限问题呀?将权限跟改为root后,重新配置crontab定时任务,还是不行,真是让人气 ...

  8. at java.net.InetAddress.getLocalHost(InetAddress.java:1475)

    今天在centos 安装hadoop安装完成后执行wordcount的时候报如下错误: at java.net.InetAddress.getLocalHost(InetAddress.java:14 ...

  9. 如何使用css来让图片居中不变形 微信小程序和web端适用

    图片变形很多人祭奠出了妖魔鬼怪般的各种大法,比如使用jq来写,或者使用css表达式来写.今天我总结的是使用css3来写,唯一最大缺点就是对一些浏览器版本不够兼容.下面就是关于如何使用css来让图片居中 ...

  10. Python调用Google翻译

    出自:http://blog.csdn.net/zhaoyl03/article/details/8830806 最近想动手做一个文档自动下载器,需要模拟浏览器的行为.虽然感觉思路上没有困难,但在技术 ...