本文依赖于一个基础却又容易混淆的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. Docker-创建一个mysql容器，并保存为本地镜像

    查找docker hub上的镜像 [root@wls12c ~]$ docker search mysql NAME DESCRIPTION STARS OFFICIAL AUTOMATED mysq ...

  2. hostapd and wpa_supplicant

    一.Hostapd hostapd 是一个用户态用于AP和认证服务器的守护进程.它实现了IEEE 802.11相关的接入管理,IEEE 802.1X/WPA/WPA2/EAP 认证, RADIUS客户 ...

  3. 转：不是技术牛人，如何拿到国内IT巨头的Offer

    转自:http://blog.csdn.net/lsldd/article/details/13506263 不久前,byvoid面阿里星计划的面试结果截图泄漏,引起无数IT屌丝的羡慕敬仰.看看这些牛 ...

  4. 配置Linux任务计划

    Linux有三种计划任务: at:指定一个时间执行一个任务 (适用一个或多个任务,执行一次后就不用) cron:根据一个时间表自动执行任务 (使用一个或多个任务,周期性执行) 系统级别的计划任务及其扩 ...

  5. 转！！深入理解 Session 与 Cookie

    摘要 Session 与 Cookie 不管是对 Java Web 的初学者还是熟练使用者来说都是一个令人头疼的问题.在初入职场时恐怕很多程序员在面试的时候都被问到过这个问题.其实这个问题回答起来既简 ...

  6. 最牛B的编码套路（转）

    转自:http://blog.csdn.net/happydeer/article/details/17023229 最近,我大量阅读了Steve Yegge的文章.其中有一篇叫"Pract ...

  7. 安卓手机与电脑无线传输文件（利用ftp服务）

    安卓手机与电脑无线传输文件(利用ftp服务) 手机与电脑无线传输文件,手机开启ftp服务,电脑能够对手机内全部文件进行全方位管理,包括上传.下载.新建.删除等,而且手机和电脑能够双向传输,很方便.手机 ...

  8. 【bzoj1791】岛屿

    [bzoj1791]岛屿 题意 求基环树的直径. \(n\leq 100000\) 分析 这道题的题解貌似很少啊. 所以自己也写一份吧. 首先找出基环树的环. 那么树的直径有两种情况: ①以环为根的某 ...

  9. pvresize - Unix, Linux Command

    NAME pvresize - resize a disk or partition in use by LVM2 SYNOPSIS pvresize [-d|--debug] [-h|--help] ...

  10. [Java] java文件读写操作大全

    一.获得控制台用户输入的信息 //可以返回用户输入的信息,不足之处在于不支持中文输入,有待进一步改进 public String getInputMessage() throws IOExceptio ...