本文依赖于一个基础却又容易混淆的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. JS---------->数组练习!

      var arr = [4, 0, 7, 9, 0, 0, 2, 6, 0, 3, 1, 0]; 要求将数组中的0项去掉,将不为0的值存入一个新的数组,生成新的数组 <!doctype htm ...

  2. hdu 1573 X问题

    数论题,本想用中国剩余定理,可是取模的数之间不一定互质,用不了,看到网上有篇文章写得很好的:数论——中国剩余定理(互质与非互质),主要是采用合并方程的思想: 大致理解并参考他的代码后便去试试hdu上这 ...

  3. C++——友元、异常和其他

    一.友元 类并非只能拥有友元函数,也可以将类作为友元.在这种情况下,友元类的所有方法都可以访问原始类的私有成员和保护成员.另外,也可以做更严格的限制,只将特定的成员函数指定为另一个类的友元.哪些函数. ...

  4. Hadoop 基本操作

    1.关闭安全模式 hadoop dfsadmin -safemode leave

  5. Oracle 修改一行数据内存主要变化

    向Oracle 数据库发出请求,修改一行数据,在内存中主要有以下变化: 1. 服务器进程将包含该行数据的块读取到内存中 2. 写redo日志.将内存中该数据块指向undo表空间中数据块的变更向量(Ch ...

  6. Oracle Names - Oracle_SID /db_name instance_name service_names / service_name / sid / sid_name

    很多人还是困惑,下面再次尝试从几个不同角度区分一下: Oracle_SID / db_name, instance_name, service_names  / service_name, sid / ...

  7. drush cc all 报错

    请看好 指明了Module文件的行数 报错一定要多看看哦.

  8. 20145218 《Java程序设计》第7周学习总结

    20145218 <Java程序设计>第7周学习总结 教材学习内容总结 第十二章 Lambda 如果使用JDK8的话,可以使用Lambda特性去除重复的信息. 在只有Lambda表达式的情 ...

  9. 安卓手机修改host

    电脑修改 注意:usb设置为调试模式 1.手机必须先root,小米可以安卓开发版系统即可 2.安卓 adb工具(android debug bridge) 3.依次执行下面的命令 1.adb root ...

  10. HDU 1171(01背包）

    Big Event in HDU Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others ...