本文依赖于一个基础却又容易混淆的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. 使用myeclipse建立maven项目(重要)

    maven是管理项目的,myeclipse是编写代码的.第一次写项目都要配置好多东西,很麻烦,now 来看看怎样新建一个maven项目. 工具/原料   myeclipse maven 方法/步骤   ...

  2. C++中的虚函数与纯虚函数

    这个吧,我也不怎么知道,所以,大家来看这两篇文章哦: http://blog.csdn.net/hackbuteer1/article/details/7558868 http://blog.csdn ...

  3. Android控件_使用TextView实现跑马灯效果

    一.第一种方式: 通过TextView控件的自身属性实现(但是有缺点就是当多个TextView要实现这种效果的时候,只有第一个才有效果)  实现方法加上下面四个属性: android:singleLi ...

  4. mysql使用笔记（四）

    一.选择合适的数据类型 1. CHAR vs VCHAR     char是固定长度的字符类型,而varchar是可变长度的字符类型.char(M)的数据列中,每个值都占用M个字节,如果某个长度小于M ...

  5. java main函数

    public static void main(String[] args)[String args[]]也对 1)public :公共的权限最大,在任何情况下都可以访问. 原因:为了保证java虚拟 ...

  6. SAP 库存关联表信息

    一般保存在 MARD 表 LABST 字段中, 为Valuated Unrestricted-Use Stock           INSME: Stock in Quality Inspectio ...

  7. SQL Server 2012清除连接过的服务器名称历史

    退出客户端后 SQL Server 2012: 删除这两个地方!请提前备份! X:\Users\XXX\AppData\Roaming\Microsoft\SQL Server Management ...

  8. Java线程(二)：线程同步synchronized和volatile

    上篇通过一个简单的例子说明了线程安全与不安全,在例子中不安全的情况下输出的结果恰好是逐个递增的(其实是巧合,多运行几次,会产生不同的输出结果),为什么会产生这样的结果呢,因为建立的Count对象是线程 ...

  9. JavaWeb学习之环境搭建

    1. HTML(Hyper Text Markup Language) , 超文本标记语言. HTML文件的后缀名一般是: .htm , .html 表单(form): 浏览器内核: WebKit , ...

  10. HDUOJ-------1052Tian Ji -- The Horse Racing(田忌赛马)

    Tian Ji -- The Horse Racing Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (J ...