关于margin-top的百分比值

周末朋友发出江湖救急的消息,说他有个莫名其妙的bug搞不定了,于是我让他把bug的代码发过来看看。

他的需求是绝对居中,代码是这样的

  1. width:100px;
  2. height:100px;
  3. position:relative;
  4. margin-top:50%;
  5. margin-left:50%;
  6. top:-50px;
  7. left:-50px;

如果你已经看出问题了,那么这篇文章就可以不用看了。如果你觉得这段代码没问题,那么可以继续探讨。

大多数时候我们做一个块的居中,写法都是这样的

  1. width:100px;
  2. height:100px;
  3. position:relative;
  4. top:50%;
  5. left:50%;
  6. margin-top:-50px;
  7. margin-left:-50px;

看出区别了吧,区别就在于,margin是负的具体像素,定位是百分比。而出bug的写法刚好相反。乍一看这是没啥区别的,甚至我也曾经想当然的认为这两种写法是一样的。

这就是典型的知其然不知其所以然。

我们看一下W3.org上关于margin-top的说明:

  1. 'margin-top', 'margin-bottom'
  2. Value: <margin-width> | inherit
  3. Initial: 0
  4. Applies to: all elements except elements with table display types other than table-caption, table and inline-table
  5. Inherited: no
  6. Percentages: refer to width of containing block
  7. Media: visual
  8. Computed value: the percentage as specified or the absolute length
  9. These properties have no effect on non-replaced inline elements.

关键就是这里

  1. Percentages: refer to width of containing block

也就是说,只要margin的值是百分比,那么,他的基数就只会是父容器的宽度,比如父容器宽100PX,那么margin-top:50% 就是50px,无论父容器高是多少,都跟’margin-top’, ‘margin-bottom’的百分比值无关。

来个demo,这个是有问题的写法

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style type="text/css">

.wrap{

width:300px;

height:1000px;

margin:20px auto;

border:#f1f1f1 1px solid;

}

.box{

width:100px;

height:100px;

background:#ff6600;

position:relative;

top:-50px;

left:-50px;

margin-top:50%;

margin-left:50%;

}

</style>

</head>

<body>

<div class="wrap">

<div class="box"></div>

</div>

</body>

</html>

提示:你可以先修改部分代码再运行。

然后来个正确的写法

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style type="text/css">

.wrap{

width:300px;

height:1000px;

margin:20px auto;

border:#f1f1f1 1px solid;

}

.box{

width:100px;

height:100px;

background:#ff6600;

position:relative;

top:50%;

left:50%;

margin-top:-50px;

margin-left:-50px;

}

</style>

</head>

<body>

<div class="wrap">

<div class="box"></div>

</div>

</body>

</html>

提示:你可以先修改部分代码再运行。

需要注意的是,绝对定位的元素margin-top的百分比值低版本webkit下和其他浏览器表现不一,这个可以自己写几个demo试试看吧……..

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Windows Community

New UWP Community Toolkit - RotatorTile

概述 UWP Community Toolkit  中有一个为图片或磁贴提供轮播效果的控件 - RotatorTile,本篇我们结合代码详细讲解  Rotato...

2938
来自专栏我杨某人的青春满是悔恨

谈谈Swift的extension

3.times { puts 'hello world' } 这是一条Ruby语句,它会打印“hello world”三次,意图清晰,语法简洁。

692
来自专栏Android开发指南

10.多媒体

3698
来自专栏听雨堂

水晶报表文本在web中无法两端对齐

        在Web上利用水晶报表显示一段文本,用的是动态加载rpt的方法,结果出来的文本效果如下: ?         右边很不齐,于是回到水晶报表10...

1788
来自专栏吴裕超

JavaScript 函数节流和函数去抖应用场景辨析

函数节流和去抖的出现场景,一般都伴随着客户端 DOM 的事件监听。举个例子,实现一个原生的拖拽功能(不能用 H5 Drag&Drop API),需要一路监听 m...

2937
来自专栏偏前端工程师的驿站

WebComponent魔法堂:深究Custom Element 之 面向痛点编程

前言  最近加入到新项目组负责前端技术预研和选型,一直偏向于以Polymer为代表的WebComponent技术线,于是查阅各类资料想说服老大向这方面靠,最后得...

1805
来自专栏冰霜之地

WWDC2016 Session笔记 - Xcode 8 Auto Layout新特性

Incrementally Adopting Auto Layout是什么意思呢?在我们IB里面布局我们的View的时候,我们并不需要一次性就添加好所有的con...

683
来自专栏Android开发经验

自适应软键盘的Dialog以及监听软键盘弹起

1763
来自专栏Golang语言社区

原生javascript实现图片轮播效果代码

前几天用jquery做了一个JS的图片轮播效果,现在用原生的javascript代码实现同样的功能,当练习用吧,代码写得不是很满意。 看到BlueDream在他...

3648
来自专栏AndroidTv

属性动画 ValueAnimator 运行原理全解析

好,废话不多说,之前我们已经分析过 View 动画 Animation 运行原理解析,那么这次就来学习下属性动画的运行原理。

3638

扫码关注云+社区