左右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问题百分比值相关推荐

css top 定位百分比,css 使用relative设置top为百分比值的方法(仿百度首页)
前言: 最近在学习HTML.CSS的过程中,想模仿一下百度首页.发现搜索框这一部分与上下其它元素的空白距离可以随着窗口大小变化(效果如下图所示),于是自己研究了一下并记录下来. 效果实现垂直伸缩 * ...
巧用margin/padidng的百分比值占位，避免闪烁
当margin/padding取形式为百分比的值时,无论是left/right,还是top/bottom,都是以父元素的width为参照物的场景:购物平台商品的展示界面当图片还未加载出来时,高度为 ...
巧用margin/padding的百分比值实现高度自适应（
转载自https://segmentfault.com/a/1190000004231995 巧用margin/padding的百分比值实现高度自适应(多用于占位,避免闪烁) 布局自适应前端 cs ...
在才开始进入前端这个坑的时候在布局中会遇到很多问题我才入这个坑的时候在margin top 中遇到几个bug 我分享一下...
margin top的bug 当子元素和父元素是纯元素没有内容的时候,我们去调整子元素的margin:top, 他会误以为是要调整父元素解决方案: 1.给父元素设置一个边框 2.父元素加overf ...
在饼图上显示百分比值(报表生成器和 SSRS)
在饼图上显示百分比值(报表生成器和 SSRS) 默认情况下,图例中显示了类别来标识每个值. 如果使用了类别标签标记饼图,则可能希望在图例中显示百分比. 注意在 SQL Server Data Too ...
java 计算百分比值
public class Test1 {public static String myPercent(int y, int z) {String baifenbi = "";// ...
java 计算百分比值
public class Test1 {public static String myPercent(int y, int z) {String baifenbi = "";// ...
java计算百分比值的方法
public class Test1 { public static String myPercent(int y, int z) { String baifenbi = "";/ ...
饼图图例中显示百分比值
在设计图面上,右键单击饼图并选择"序列属性".此时将显示"序列属性"对话框. 在"图例"的"自定义图例文本"属性中键入 ...

左右margin top问题百分比值

左右margin top问题百分比值相关推荐

最新文章

热门文章