左右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 设置成百分比的时候,仅仅跟父容器宽度有关!。!幅!!!谁能告诉我,为什么是宽度!!!他深受的自己的无知移动。行!来吧!

版权声明:本文博主原创文章,博客,未经同意不得转载。

时间: 2024-11-05 04:20:18

左右margin top问题百分比值的相关文章

css 巧用 margin/padding 的百分比值实现高度自适应(多用于占位,避免闪烁)

一个基础却又容易混淆的 css 知识点 本文依赖于一个基础却又容易混淆的 css 知识点:当 margin/padding 取形式为百分比的值时,无论是 left/right,还是top/bottom,都是以父元素的width为参照物的! 高度自适应占位 假设有这么个场景: 如上图所示,有这么一种用来放图片的容器,图片都是正方形(为了方便举例用正方形,实际上只要固定长宽比例即可).在 PC 端好办,容器的宽高都写死是多少 px,这样即使图片加载不出来容器都不会变型.但是在移动端,由于各机型分辨率

margin/padding百分比值的计算

1.百分比介绍 一般元素的宽度用百分比值表示时,元素的总宽度包括外边距取决于父元素的width,这样可能得到"流式"页面,即元素的外边距会扩大或缩小以适应父元素的实际大小.如果对这个文档设置该样式,使其子元素使用百分数外边距,当用户修改浏览窗口的宽度时,外边距会随之扩大或缩小. margin-right/margin-left的百分比值是相对于父元素的宽度来计算的,这很好理解:而margin-top/margin-bottom为什么也是以父元素的width为参照物的呢? 2.为什么呢?

关于margin top百分比值的问题

不想说今天心情有多差! 9点多开始发现一个"bug",需求是根据屏幕高度动态调整某个div的位置,代码大概是这样的. <div style="margin-top: 25%; margin-left:25%; width:50px; height:50p; background-color: yellow;"> </div> 演示: 然后就发现,"当窗口宽度变化的时候,margin-top变了,变了!了!!!" ,调了一个

圆角卖萌式登录表单和width的百分比值

1.圆角恶意卖萌登录表单 小组要做一个网站,大学生社区那种,然后要做登陆界面然后还要做好看的登录界面,然后在书上看到了一个很漂亮的登陆界面,说来和一般的登陆界面没什么不同只是登录表单的边角被柔化了,变成了恶意卖萌的圆角.于是自己尝试着写了一个 换成英文以后总感觉自己高大上了很多,柔化圆角很简单,只要加一个css规则——border-radius:XXXpx;就好了,这个登陆界面有可能真的成为我们小组网站的登录界面也说不定. 附上css代码,万一以后自己也找不到了呢= =: 2.width的百分比

margin top 无效

常出现两种情况: (一)margin-top失效 两个层box1和box2,box1具有浮动属性,box2没有,这时候设置box2的上边距margin-top没有效果. 解决办法: 1.box2增加float属性 2.box1与box2之间增加一层"<divstyle="clear:both;"></div>" (二)子元素设置margin-top作用于父容器 当给box2设置margin-top时,在FF下仅作用于父容器. 解决办法: 1.

当padding/margin的取值形式为百分比时。。。。。

一个基础却又容易混淆的css知识点:当margin/padding取形式为百分比的值时,无论是left/right,还是top/bottom,都是以父元素的width为参照物的!也许你会说,left/right以父元素的width为参照物好理解,但是top/bottom为什么也是以父元素的width为参照物的呢?网上众说纷纭,关键还是看W3C的规范: 利用这个规范,我们可以用来解决移动端的高度自适应占位问题,在移动端,高度一般都是用内部撑开,例如,一个div包着一个图片.如果是用图片撑开div的

【整理】如何使元素水平垂直居中

第一种:已知元素宽.高 兼容:IE6+ 源码: <title>css使元素垂直居中</title> <style type="text/css"> .box{ width: 200px; height: 200px; background-color: grey; /*css使元素垂直居中*/ position: relative; } .box .center{ width: 100px; height: 100px; background-col

css实现自适应正方形的方法 http://www.cnblogs.com/dantis/archive/2017/05/12/6846611.html

页面布局中,我们经常需要用百分比来实现宽度自适应,但是如果这时候高度要跟宽度呈固定比例变化,该怎么办呢? 很简单,我们可以利用元素的padding或margin的百分比值是参照宽度的这一特性来实现, 即如果元素的padding或margin值是百分比值,那么,它的值是根据父元素的宽度来计算的. 所以,实现一个自适应的正方形,可以有两种写法: 可以这么写: 1 <style> 2 .box{ 3 width: 50%; 4 padding-top: 50%; 5 background-color

css实现自适应正方形的方法

页面布局中,我们经常需要用百分比来实现宽度自适应,但是如果这时候高度要跟宽度呈固定比例变化,该怎么办呢? 很简单,我们可以利用元素的padding或margin的百分比值是参照宽度的这一特性来实现, 即如果元素的padding或margin值是百分比值,那么,它的值是根据父元素的宽度来计算的. 所以,实现一个自适应的正方形,可以有两种写法: 可以这么写: 1 <style> 2 .box{ 3 width: 50%; 4 padding-top: 50%; 5 background-color