不想说今天心情有多差!

9点多開始发现一个"bug",需求是依据屏幕高度动态调整某个div的位置。代码大概是这种。

    <div style="margin-top: 25%;
margin-left:25%;
width:50px;
height:50p;
background-color: yellow;">
</div>

演示:

然后就发现。“当窗体宽度变化的时候,margin-top变了,变了!了。!!” ,调了一个晚上,问了好多前端群,贴上代码。居然没有人知道为什么!

!!

最后找到一句话:

'margin-top', 'margin-bottom'

Percentages: refer to width of containing block

对,没错。margin-top 设置成百分比的时候,仅仅跟父容器宽度有关!。!幅!!!谁能告诉我,为什么是宽度!!!他深受的自己的无知移动。行!来吧!

版权声明:本文博主原创文章,博客,未经同意不得转载。

左右margin top问题百分比值的更多相关文章

  1. 巧用margin/padding的百分比值实现高度自适应(多用于占位,避免闪烁)

    本文依赖于一个基础却又容易混淆的css知识点:当margin/padding取形式为百分比的值时,无论是left/right,还是top/bottom,都是以父元素的width为参照物的!也许你会说, ...

  2. 巧用margin/padding的百分比值实现高度自适应

    原文:https://segmentfault.com/a/1190000004231995 一个基础却又容易混淆的css知识点 本文依赖于一个基础却又容易混淆的css知识点:当margin/padd ...

  3. css relative设置top为百分比值

    前言: 最近在学习HTML.CSS的过程中,想模仿一下百度首页.发现搜索框这一部分与上下其它元素的空白距离可以随着窗口大小变化(效果如下图所示),于是自己研究了一下并记录下来. 效果实现 <!D ...

  4. 当padding,margin,top为百分比值,具体数值如何计算

    padding以及margin的四个方向设置值为百分数的时候,是以父元素的宽度为基数来进行计算. (为了保持横向和纵向方向上的margin/padding一致,但是其实也不是一定以父元素的宽度为参照物 ...

  5. margin/padding百分比值的计算

    1.百分比介绍 一般元素的宽度用百分比值表示时,元素的总宽度包括外边距取决于父元素的width,这样可能得到"流式"页面,即元素的外边距会扩大或缩小以适应父元素的实际大小.如果对这 ...

  6. 定位(left 、right 、top 、 bottom)、padding、margin 值设为百分比值时

    定位(left .right .top . bottom): top 为例 right 为例 padding.margin : 当padding.margin 值设为百分比值时,其百分比会相对于父元素 ...

  7. css百分比值到底参考谁?

    一.元素宽高设置百分比 (1)width / min-width / max-width 参考块级父元素的宽度 (2)height / min-height / max-height 参考块级父元素的 ...

  8. CSS设置百分比值的问题

    当给元素设置width:100%:height:100% 的时候没有反应 因为,元素的宽高是根据内容来自动适应的,当设置百分比值时,是根据这个元素的父元素来确定百分比的 如果父元素没有固定的值,那就需 ...

  9. 在饼图上显示百分比值(报表生成器和 SSRS)

    在饼图上显示百分比值(报表生成器和 SSRS) 默认情况下,图例中显示了类别来标识每个值. 如果使用了类别标签标记饼图,则可能希望在图例中显示百分比. 注意 在 SQL Server Data Too ...

随机推荐

  1. 关于SVN配置文件的一个小例子

    1   背景假设 厦门央瞬公司是一家电子元器件设备供应商,其中有个ARM部门,专门负责ARM芯片的方案设计.销售,并在北京.上海各设立了一个办事处.对于工作日志,原先采用邮件方式发给经理,但是这种方式 ...

  2. 可删除超炫&amp;多种特效的Card视图(改造自cardsui-for-android开源项目),提供DEMO下载

    转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990).谢谢支持!        实例Demo下载地址在本文最后 简介 这个Demo主要是使用了cardsui ...

  3. [置顶] JUnit入门教程(二)

    一:介绍 接着上次的课程,今天我们学习JUnit4的新特性 assertThat()方法,这种方式和其余的assert方法比起来,更加接进英语. 二:分析API API中的例子: 参数 T Actua ...

  4. TCP header

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc3Vzc2VyNDM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA ...

  5. poj 3250 Bad Hair Day (单调栈)

    Bad Hair Day Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 14883   Accepted: 4940 Des ...

  6. hdu 4891---水的问题 但WA非常多

    这个问题是在一个坑----即使在使用long  long 这将是超出范围 自己显得很长的时间去阅读很多次的称号仍然没想到 当时的想法是要记住----无论如何,我用long long 已经最大范围.当然 ...

  7. hdu 4557 非诚勿扰 vector的应用 原来vector 可以删除指定位置元素 不过消耗大

    非诚勿扰 Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others) Total Submi ...

  8. Java 8 时间日期库的20个使用示例

    java 8是如何处理时间及日期的 有人问我学习一个新库的最佳途径是什么?我的回答是,就是在实际项目中那样去使用它.在一个真实的项目中会有各种各样的需求,这会促使开发人员去探索和研究这个新库.简言之, ...

  9. 玩转web之JQuery(二)---改变表单和input的可编辑状态(封装的js)

    var FormDeal = { /** * 功能 :将表单的所有input都设为可编辑的 *@param 要操作表单的id */ formWritable: function (formId) { ...

  10. hadoop-1.1.2 在Windows环境下的部署

    1:先安装Cygwin 参考http://blog.csdn.net/wind520/article/details/9223003 2:下载 3:解压在C:\cygwin\hadoop1 4:配置 ...