左右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 ...
随机推荐
- C++习题 虚函数-计算图形面积
C++习题 虚函数-计算图形面积 Time Limit: 1 Sec Memory Limit: 128 MB Submit: 122 Solved: 86 [cid=1143&pid=6 ...
- Thinkphp常用标签
告:在使用下列所说的任何标签库都需要 HTML第一行加入 <tarlib name=”cx,html” /> 如果想单独引入cx标签库就直接写成<tarlib name=”cx” / ...
- SWT入门-常用组件的使用(转)
转自:http://www.cnblogs.com/kentyshang/archive/2007/08/16/858367.html swt的常用组件button ,text ,combo,list ...
- word2vec 中的数学原理具体解释(四)基于 Hierarchical Softmax 的模型
word2vec 是 Google 于 2013 年开源推出的一个用于获取 word vector 的工具包,它简单.高效,因此引起了非常多人的关注.因为 word2vec 的作者 Tomas M ...
- 准备踏入IT编程的学子们,你们第一门编程语言选谁? Are You Ready? Go!
Are You Ready? Go! ——第一门编程语言选谁? 金旭亮 说明: 这篇文章是专门针对大学低年级学生(和其他软件开发初学者)写的,如果你己经是研究生或本科高年级学生,请将这篇文章转发给你的 ...
- Linux cp -a用法
对于cp -a最主要的用法是在保留原文件属性的前提下复制文件.其实还有个很好的用法,如下: 大家知道linux下复制目录可以通过,cp -r dirname destdir 但是这样复制的目录属性会发 ...
- cocos2d-x 精灵的创建和基本使用
在cocos2d-x中.精灵能够说是一个最重要的组成元素,它代表游戏中一个最小的可见单位.同一时候也是CCNode一个最为灵活的子类,由于它能够通过装载一个平面纹理,从而具有丰富的表现力. 在进一步说 ...
- Spring in action(Spring实战) 第四版中文翻译
第一部分 Spring核心 Spring提供了非常多功能,可是全部这些功能的基础是是依赖注入(DI)和面向方面编程(AOP). 第一章 Springing into action 本章包含: Spri ...
- hdu3873 有约束条件的最短路
题目大意:美国佬打算入侵火星,火星上有n个城市,有些城市可能受其他城市保护, 如果i城市受j城市保护,那么你必须先攻占j城市才能再攻占i城市,问你攻占城市n的最短时间是多少. 数据解释: 给定t, 表 ...
- ExcelHelper Excel,Export,Import
using System; using System.Collections.Generic; using System.Data; using System.Data.Odbc; using Sys ...