不想说今天心情有多差!

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. Scala的XML操作

     8.  XML 8.1.     生成 Scala原生支持xml,就如同Java支持String一样,这就让生成xml和xhtml非常easy优雅: val name = "james ...

  2. Android_模拟时钟内时针、分针触摸转动

    最近实现了android里的一个机能,在activity里面画了一个模拟的时针,然后触摸上面的时针跟分针可以实现调时间的功能. 其实,说起原来来还是挺简单的,但是我花了将近一周的时间才全部实现,有点惭 ...

  3. jquery和highcharts折线图、柱形图、饼状图-模拟后台传參源代码

    js代码: <script type="text/javascript"> $(function(){ showLine(); showColumn(); showPi ...

  4. AMDU恢复ASM磁盘组数据(測)

    --umount ASMCMD> umoung -a asmdg commands:         md_backup, md_restor         lsattr, setattr   ...

  5. Golang初学者的资源整理

    看了汪汪汪不是我的语言的GO语言零基础入门资料整理,个人感觉还不够全面,忍不住过来补充一些内容. 网站教程: GO语言编程 and GO语言开发2048 from 实验楼Go语言后台应用开发 form ...

  6. centos 安装 使用本地图像文件来安装网络安装

    有时很无奈,无盘,U它只有盘4G而一个centos该盘4.16G,如何将它安装了网络安装,对不起,你想用20M更多的带宽,并注意使用网络启动盘的方法 没有条件,应该创造条件: 网络安装,需要下载图片, ...

  7. hdu 5073 Galaxy(2014acm鞍山亚洲分部 C)

    主题链接:http://acm.hdu.edu.cn/showproblem.php? pid=5073 Galaxy Time Limit: 2000/1000 MS (Java/Others)   ...

  8. mysql寻呼最快

    大家都知道,mysql分页写: select * from 'yourtable' limit start,rows 如今我数据库一张表里面有9969W条数据.表名叫tweet_data select ...

  9. HDU ACM 1071 The area 定积分计算

    分析: 1.求抛物线方程F(x)=a*x^2+b*x+c: 2.求直线方程f(x)=k*x+b. 3.利用定积分计算F(x)-f(x)在x2到x3之间的面积. #include<iostream ...

  10. delphi webbrowser 经常使用的演示样本

    var Form : IHTMLFormElement ; D:IHTMLDocument2 ; begin with WebBrowser1 do begin D := Document as IH ...