左右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 ...
随机推荐
- cocos2d-x-3.0新建工程以及移植其他平台
本文来自:http://www.zaojiahua.com/cocos2d-x-3-0.html 有将近俩个礼拜没有研究cocos2dx了,博主最近刷了些ACM的水题,越做感觉越没意思,这哪是考编程啊 ...
- spoj Balanced Numbers(数位dp)
一个数字是Balanced Numbers,当且仅当组成这个数字的数,奇数出现偶数次,偶数出现奇数次 一下子就相到了三进制状压,数组开小了,一直wa,都不报re, 使用记忆化搜索,dp[i][s] 表 ...
- 黄聪:Microsoft Enterprise Library 5.0 系列教程(三) Validation Application Block (高级)
原文:黄聪:Microsoft Enterprise Library 5.0 系列教程(三) Validation Application Block (高级) 企业库验证应用程序模块之配置文件模式: ...
- s有一天,教你开始truts2
写在前面 他也是一个java和java web新秀.此前有过接触java web发展 我想一个小项目.要熟悉struts2开发过程 一个有趣的想法源于教研室项目上的一个功能实现–自己主动识别运营商,去 ...
- mysql copy复制拷贝表数据及结构的几种方式(转)
mysql拷贝表操作我们会常常用到,下面就为您详细介绍几种mysql拷贝表的方式,希望对您学习mysql拷贝表方面能够有所帮助.假如我们有以下这样一个表:id username password--- ...
- gc overhead limit exceeded eclipse错误解决方式
在Eclipse打包的时候报错:gc overhead limit exceeded eclipse 原因是Eclipse默认配置内存太小须要更改安装Eclipse目录下的eclipse.ini文件. ...
- Spring之AOP术语
AOP是Aspect Oriented Programing的简称.被译为"面向切面编程". AOP独辟蹊径通过横向抽取机制为这类无法通过纵向继承体系进行抽象的反复性代码提供了解决 ...
- LoadImage()使用
该系统被定义: WINUSERAPIHANDLEWINAPILoadImageA( HINSTANCE, LPCSTR, UINT, int, int, UINT) ...
- Sandcastle生成帮助文档
http://www.cnblogs.com/net515/p/3311584.html Sandcastle帮助文档生成器使用介绍 一.软件介绍 Sandcastle是一个管理类库的文档 ...
- [windows phone] 教你如何使地图动画缩放
原文:[windows phone] 教你如何使地图动画缩放 说明 本篇将介绍如何将地图以动画显示呈现,在以下的范例介绍中可以看到有动画跟没动画的差别,如果你的地图还是很单调的话,不仿加上这个设计,让 ...