左右margin top问题百分比值
不想说今天心情有多差!
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问题百分比值的更多相关文章
- 巧用margin/padding的百分比值实现高度自适应(多用于占位,避免闪烁)
本文依赖于一个基础却又容易混淆的css知识点:当margin/padding取形式为百分比的值时,无论是left/right,还是top/bottom,都是以父元素的width为参照物的!也许你会说, ...
- 巧用margin/padding的百分比值实现高度自适应
原文:https://segmentfault.com/a/1190000004231995 一个基础却又容易混淆的css知识点 本文依赖于一个基础却又容易混淆的css知识点:当margin/padd ...
- css relative设置top为百分比值
前言: 最近在学习HTML.CSS的过程中,想模仿一下百度首页.发现搜索框这一部分与上下其它元素的空白距离可以随着窗口大小变化(效果如下图所示),于是自己研究了一下并记录下来. 效果实现 <!D ...
- 当padding,margin,top为百分比值,具体数值如何计算
padding以及margin的四个方向设置值为百分数的时候,是以父元素的宽度为基数来进行计算. (为了保持横向和纵向方向上的margin/padding一致,但是其实也不是一定以父元素的宽度为参照物 ...
- margin/padding百分比值的计算
1.百分比介绍 一般元素的宽度用百分比值表示时,元素的总宽度包括外边距取决于父元素的width,这样可能得到"流式"页面,即元素的外边距会扩大或缩小以适应父元素的实际大小.如果对这 ...
- 定位(left 、right 、top 、 bottom)、padding、margin 值设为百分比值时
定位(left .right .top . bottom): top 为例 right 为例 padding.margin : 当padding.margin 值设为百分比值时,其百分比会相对于父元素 ...
- css百分比值到底参考谁?
一.元素宽高设置百分比 (1)width / min-width / max-width 参考块级父元素的宽度 (2)height / min-height / max-height 参考块级父元素的 ...
- CSS设置百分比值的问题
当给元素设置width:100%:height:100% 的时候没有反应 因为,元素的宽高是根据内容来自动适应的,当设置百分比值时,是根据这个元素的父元素来确定百分比的 如果父元素没有固定的值,那就需 ...
- 在饼图上显示百分比值(报表生成器和 SSRS)
在饼图上显示百分比值(报表生成器和 SSRS) 默认情况下,图例中显示了类别来标识每个值. 如果使用了类别标签标记饼图,则可能希望在图例中显示百分比. 注意 在 SQL Server Data Too ...
随机推荐
- Linux查看用户数、登录用户
如果是系统中全部只要默认shell是bash的就包括那么二楼正解,就是cat /etc/passwd|grep bash|wc -l如果是正在登陆系统的账户中使用bash shell的,那么ps -e ...
- 一百万数据索引实例測试--mysql
推荐书籍:http://pan.baidu.com/s/1sjJIyRV 任务描写叙述: 如果一高频查询例如以下 SELECT * FROM user WHERE area='amoy' AND s ...
- MySQL创建用户权限结果Trigger失败
说来惭愧,MySQL我已经在只将用于,非常赞赏阶段. 甚至一些比较深层次的管理,不熟悉如何,我们要加强啊! 最近.系统测试,使用MySQL数据库,你需要在表上创建触发器.该数据库是安装在机.但.在任何 ...
- WPF换肤之六:酷炫的时区浏览小精灵
原文:WPF换肤之六:酷炫的时区浏览小精灵 由于工作需要,经常要查看到不同地区的 当前时间,以前总是对照着时区表来进行加减运算,现在有了这个小工具以后,感觉省心了不少.下面是软件的截图: 效果图赏析 ...
- 一旦ORA-28000: the account is locked用户锁定故障排除
今天我的同事们反映的问题,测试库的变化password,并改变相关的应用程序中使用password后,其中一个仍然会出现在帐户被锁定,报告ORA-28000: the account is locke ...
- 大页(huge pages) 三大系列 ---计算大页配置参数
使用以下shell 脚本来计算大页配置参数,确保使用脚本实例之前的数据已经开始, 如果数据库的版本号11g,确认是否使用自己主动的内存管理(AMM) +++++++++++++++++++++++++ ...
- uva10791 uva10780(分解质因数)
http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem&p ...
- 如何使用 yum 安装/更新/移除 软件
如何使用 yum 安装/更新/移除 软件 一. 建立仓库(repository)和源 a) 拷贝所以相关rpm包到某个目录 b) 执行createrepo /目录/目录/目录/目录 注意:b)中 ...
- 傻瓜式破解linux--rootpassword
破password的方法: 方法1.单用户模式改动 (表示进入到单用户模式) .按回车键.按b键启动.进入单用户模式,进行password改动.重新启动 init 5 口诀:e2e 空格1 回车b 开 ...
- C 和 C++ 的速度相差多少,你知道吗?
有谁清楚这个事实吗 ? 网络游戏速度至关重要, 是游戏质量的唯一标准, 尤其是即时格斗, 相差几毫秒都会影响用户体验 ! 哪怕就是 5% 的效率损失,也是 差之毫厘,失之千里, 游戏的速度是程序语言天 ...