本文依赖于一个基础却又容易混淆的css知识点：当margin/padding取形式为百分比的值时，无论是left/right，还是top/bottom，都是以父元素的width为参照物的！
也许你会说，left/right以父元素的width为参照物好理解，但是top/bottom为什么也是以父元素的width为参照物的呢？网上众说纷纭，关键还是看W3C的规范：

Note that in a horizontal flow, percentages on ‘margin-top’ and ‘margin-bottom’ are relative to the width of the containing block, not the height (and in vertical flow, ‘margin-left’ and ‘margin-right’ are relative to the height, not the width).

Note that percentages on ‘padding-top’ and ‘padding-bottom’ are relative to the width of the containing block, not the height (at least in a horizontal flow; in a vertical flow they are relative to the height).

权威一出，记住就好，科科。

http://codepen.io/jianyeruan/pen/wMNPew

都是以父元素的width为参照物的的更多相关文章

  1. CSS 实现：父元素包含子元素，子元素垂直居中布局

    ☊[实现要求]:父元素包含子元素,子元素垂直居中布局 <div class="demo5"> <div class="child">A& ...

  2. 深入子元素的width与父元素的width关系

    深入理解父元素与子元素的width关系 对于这一部分内容,如果理解准确,可以更容易控制布局,节省不必要的代码,这里将简单研究. 第一部分:父子元素都是内联元素 代码演示如下: <!DOCTYPE ...

  3. 深入理解子元素的width与父元素的width关系

    深入理解父元素与子元素的width关系 对于这一部分内容,如果理解准确,可以更容易控制布局,节省不必要的代码,这里将简单研究. 第一部分:父子元素都是内联元素 代码演示如下: <!DOCTYPE ...

  4. div宽度设置width:100%后再设置padding或margin超出父元素的解决办法

    div宽度设置width:100%后再设置padding或margin超出父元素的解决办法 一.总结 一句话总结:直接加上box-sizing:border-box;即可解决上述问题. 1.box-s ...

  5. html 子元素和父元素都监听了 click 事件，点击子元素时为何先触发的是父元素的 click 事件？

    先上一段代码,点击子元素时先触发的是父元素的 click 事件 <html> <head> <script type="text/javascript" ...

  6. margin折叠-从子元素margin-top影响父元素引出的问题

    正在做一个手机端电商项目,顶部导航栈的布局是一个div包含一个子div,如果给在正常文档流中的子div一个垂直margin-top,神奇的现象出现了,两父子元素的边距没变,但父div跟着一起往下走了! ...

  7. CSS关于子元素设置了float属性后父元素高度为0的解释和解决方法

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  8. 父元素与子元素之间的margin-top问题

    父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. html代码: <div c ...

  9. CSS子元素margin-top对于父元素的影响

    父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. html代码如下 <styl ...

随机推荐

  1. 统一事件源epoll代码示例

    可以将信号注册进pipe管道的写端,通过对读端的监听,来实现统一事件源. #include <sys/types.h> #include <sys/socket.h> #inc ...

  2. Java开发中的一些小技巧

    原文:http://www.cnblogs.com/xdp-gacl/p/3490276.html 一. Java获取URL地址中传递的参数 /** * 获取URL中的参数名和参数值的Map集合 * ...

  3. 转：c的回归-云风

    C 的回归 周末出差,去另一个城市给公司的一个项目解决点问题.回程去机场的路上,我用手机上 google reader 打发时间.第一眼就看到孟岩大大新的一篇:Linux之父话糙理不糙 .主题是 C ...

  4. JavaScript判断鼠标滑轮是向下还是向上滚动

    我们常用的就是鼠标,鼠标中键一般都用于滑动网页,但是网页中很多很炫的效果,使用鼠标滑轮操作更好. 当然对于手机就没有这个设备了,所以就不用考虑手机端的实现方法,手机端有触摸滑动事件. 使用JavaSc ...

  5. 工作了3年的JAVA程序员应该具备什么技能？(zhuan)

    http://www.500d.me/article/5441.html **************************************** 来源:五百丁 作者:LZ2016-03-18 ...

  6. weblogic 下载安装部署说明

    http://blog.csdn.net/gaofuqi/article/details/36870887/ http://jingyan.baidu.com/article/d8072ac45f57 ...

  7. apk瘦身（包大小优化）

    最近太忙好久没有写随笔,放假才有空写写随笔. 最近在项目中一直在做包大小优化 随着业务需求的增加,包大小是忍不住的往上涨 为了提高应用市场下载转化率,一直在优化包大小 首先 分析你的apk中占比的主要 ...

  8. MyBatis执行过程显示SQL语句的log4j配置

    log4j.properties文件   log4j.rootLogger=debug,stdout,logfile log4j.appender.stdout=org.apache.log4j.Co ...

  9. VI编辑器学习笔记

    VIM的使用 VI是Linux系统中的一种编辑器,它的使用方法和界面与Unix平台十分相似,掌握了VIM的特殊,你可以感觉到它强大的功能与高效.Vim 相对来说较小,无论你使用任何Linux系统,你总 ...

  10. js从千分位格式

    从千分位格式化谈JS性能优化 http://heeroluo.net/article/detail/115 方法六 // 方法六 function toThousands(num) { ).toStr ...