左右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 ...
随机推荐
- PHPDocumentor代码注释规范说明
PHPDocumentor是一个的用PHP写的道具,对于有规则注释的php程序,它能够快速生成具有相互参照,索引等功能的API文档. 标记 用途 描述 @abstract 抽象类的变量和方法 ...
- win7系统u盘安装过程
1.准备好带有启动项的U盘,并把镜像解压到里面去 2.插上u盘,开机长按del键进入bois设置界面 在boot页面 1.boot device priority->1st boot devic ...
- cocos2dx移植android平台
本人这几天一直都没有跟新自己的网站内容,问我干什么去了,当然是做这篇文章做的事了,说起这个移植来真是麻烦啊,网上试验了各种方法,都不知道谁对谁错啊.不过经过本人这三天的研究最后终于成功了,为了让大家少 ...
- Pro Android学习笔记(六一):Preferences(5):组织Preference
PreferenceCategory 假设有多个preference,我们希望能在他们组织在一起.有两种方式,一种就是我们在复合preference中,利用PreferenceScreen进行嵌套,或 ...
- 域名注册查询接口(API)的说明
1.域名查询 接口采用HTTP,POST,GET协议: 调用URL:http://panda.www.net.cn/cgi-bin/check.cgi 参数名称:area_domain 值为标准域名, ...
- centos6.5安装nodejs
Preface(前言) 一次偶然的机会知道有nodejs这个东西,确实对它还是非常感兴趣的.刚開始仅仅知道它能让javascript写后台,然后前后台都由javascript来写,确实认为真的挺爽,毕 ...
- PHP --字符串编码转换(自动识别原编码)
/** * 对数据进行编码转换 * @param array/string $data 数组 * @param string $output 转换后的编码 */ function array_icon ...
- PL/SQL 游标的使用
游标的使用 ①游标概念 为了处理SQL 语句,ORACLE 必须分配一片叫上下文( context area )的区域来处理所必需的信息, 当中包含要处理的行的数目.一个指向语句被分析以后的表示 ...
- redis入门(转)
Redis介绍 Redis是一种高级key-value数据库.它跟memcached类似,不过数据可以持久化,而且支持的数据类型很丰富.有字符串,链表.哈希.集合和有序集合5种.支持在服务器端计算集合 ...
- Zookeeper实践方案:(4)命名服务
1.基本介绍 命名服务是指通过指定的名字来获取资源或者服务的地址,提供者的信息.利用Zookeeper非常easy创建一个全局的路径,而这个路径就能够作为一个名字.它能够指向集群中的集群.提供的服务的 ...