关于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 条评论
登录 后参与评论

相关文章

来自专栏游戏开发那些事

【Unity游戏开发】AssetBundle杂记--AssetBundle的二三事

  马三在公司大部分时间做的都是游戏业务逻辑和编辑器工具等相关工作,因此对Unity AssetBundle这块的知识点并不是很熟悉,自己也是有打算想了解并熟悉...

632
来自专栏飞雪无情的博客

Go语言中自动选择json解析库

golang官方为我们提供了标准的json解析库–encoding/json,大部分情况下,使用它已经够用了。不过这个解析包有个很大的问题–性能。它不够快,如果...

513
来自专栏信安之路

密码破解那些事

最近恰巧刚好搞到一批hash,所以就寻思着,要不顺手小结一点关于hash破解的东西吧,反正经常要用,就当留备忘了,顺便也分享给大家,主要还是希望大家都能在实际渗...

800
来自专栏C#

开源的.NET媒体文件操作组件TagLib#解析

  人生得意须尽欢 莫使金樽空对月。写文章都会在吃饭后,每次吃饭都要喝上二两小酒,写文章前都要闲扯,这些都是个人爱好,改不掉了,看不惯的人,还望多多包含一下,有...

1989
来自专栏Alice

ios tableview 上加 textfiled

ios tableview 上加 textfiled  首先附上我项目中用曾经用到的几张图  并说明一下我的用法: 图1: ? 图2: ? 图3: ? 心在你我...

1805
来自专栏FreeBuf

一种常规Android脱壳技术的拓展(附工具)

最近在做移动安全测试的项目时,遇到了最新的某数字壳,好久都没脱壳了,记得上次脱壳还是zjdroid通杀的时候。秉着安全研究的精神,趁此机会,又把最新的加固与脱壳...

2498
来自专栏企鹅号快讯

ODOO优化层级关系查询效率的方法

《Odoo10 Development Essentials》Chapter5(p106)中介绍了Odoo中分层关系的建立。 代码如下 在上面的代码中。 使用字...

2208
来自专栏Bingo的深度学习杂货店

PHP 笔试 + 面试题

本章主要介绍常见的 PHP 笔试 + 面试题,包括: ---- 基础及程序题 数据库技术题 综合技术题 项目及设计题 ---- 基础及程序题 [1] 写一...

4704
来自专栏NetCore

更新自己,不要影响其他人

最近围绕着c++和C#的讨论越来越激烈,firelong努力着证明自己的观点,园子里一些大大们也在激烈的辩证着,作为小鸟的我,旁观,看看一笑而过吧。 其实无论哪...

20010
来自专栏hrscy

Unity 脚本入门

在 Unity 中脚本是必不可少的组成部分,因为它将定义游戏的各种行为。Unity 推荐使用的编程语言是 JavaScript,但是 C# 或 Boo 同样也可...

702

扫码关注云+社区