CSS 实现 1px 以内的移动
可能大家看过关于 Retina 屏幕的一像素边框问题，注意这里是边框宽度而不是移动元素。
什么？border 小于 1px ？
对，因为前面有人给出相关方案而且好多种方案，这里不重复描述实现原理，给大家两个链接，感兴趣的自己跳转。
Retina 屏的移动设备如何实现真正 1px 的线？
移动 web 点 5 像素的秘密
看完大彻大悟，佩服佩服，思路很多，回到本文重点
想一下能实现移动的方法 position(top,right,bottom,left), margin, padding, vertical-align。
上面给的只是一部分可以通过具体单位(px, em, rem 等)进行移动的方法
本着实践的原则，上述方案都不可行，在最新的 chrome 中，当小于 0.5px 时是 0，当大于等于 0.5px 时就变成 1px。
因为案例过于简单，不做 demo ，感兴趣的自己实践，相信大家多数人试验过了。
那么还有什么以具体单位移动的属性呢？
解决方案
也许你早就知道有 transform 的 translate 属性了。没错它就能实现 1px 内的移动！
基本语法：
transform: translate(12px, 50%);
transform: translateX(2em);
transform: translateY(3in);
给出本文的 demo 代码，
<div class="parent">
<div class="child-first"></div>
<div class="child-second"></div>
<div class="child-third"></div>
</div>
<style>
.parent {
width: 310px;
height: 150px;
background-color: #666;
}
.parent div {
display: inline-block;
}
.child-first {
width: 100px;
height: 100px;
margin-top: .5px;
transform: translateY(.3px);
background-color: #f66;
}
.child-second {
width: 100px;
height: 100px;
transform: translateY(.5px);
background-color: #ff0;
}
.child-third {
width: 100px;
height: 100px;
transform: translateY(1px);
background-color: #06c;
}
</style>
截图如下
这里为了更容易观察，我们把布局换成 inline-block ，我们发现元素与元素之间存在空隙回去再看一遍代码发现没什么问题，那这段距离是怎么引起的呢？
是空格? 没错! 在使用 inline-block 的时候一定注意代码缩进或换行带来的不必要的麻烦（无意中添加了空格）。
修改如下
<div class="parent">
<div class="child-first"></div><div class="child-second"></div><div class="child-third"></div>
</div>
得到最终结果，如下图
这里特地将小块颜色做区分，浏览器视图放大到最大倍数，如果还是看不清的话，推荐大家亲手试一试，
总结
到这里我的方法讲完了，在最后欢迎大家讨论，方案不止一个， orange 目前只发现这一个方案，你也可以根据 js 判断屏幕然后给出 .5 像素的偏移也是可行的，我个人认为此方法简单一些。
相关文章
- php语言实现redis的客户端与服务端有一些区别了因为前面介绍过服务端了这里我们来介绍客户端吧，希望文章对各位有帮助。 为了更好的了解redis协议，我们用php来实现...2016-11-25
- 有时我们在页面上需要选择数值范围，如购物时选取价格区间，购买主机时自主选取CPU，内存大小配置等，使用直观的滑块条直接选取想要的数值大小即可，无需手动输入数值，操作简单又方便。HTML首先载入jQuery库文件以及jRange相关...2015-03-15
- PHP去除html、css样式、js格式的方法很多，但发现，它们基本都有一个弊端：空格往往清除不了 经过不断的研究，最终找到了一个理想的去除html包括空格css样式、js 的PHP函数。...2013-08-02
- 这篇文章主要介绍了pycharm 实现光标快速移动到括号外或行尾的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-02-06
- 本文实例讲述了JS实现的简洁纵向滑动菜单(滑动门)效果。分享给大家供大家参考，具体如下：这是一款纵向布局的CSS+JavaScript滑动门代码，相当简洁的手法来实现，如果对颜色不满意，你可以试着自己修改CSS代码，这个滑动门将每一...2015-10-21
jquery ready函数、css函数及text()使用示例
.text更改内容 .css更改样式...2013-10-03jQuery+slidereveal实现的面板滑动侧边展出效果
我们借助一款jQuery插件：slidereveal.js，可以使用它控制面板左右侧滑出与隐藏等效果，项目地址：https://github.com/nnattawat/slideReveal。如何使用首先在页面中加载jquery库文件和slidereveal.js插件。复制代码 代码如...2015-03-15- 翻板抽奖的实现流程：前端页面提供6个方块，用数字1-6依次表示6个不同的方块，当抽奖者点击6个方块中的某一块时，方块翻转到背面，显示抽奖中奖信息。看似简单的一个操作过程，却包含着WEB技术的很多知识面，所以本文的读者应该熟...2015-10-21
SQLMAP结合Meterpreter实现注入渗透返回shell
sqlmap 是一个自动SQL 射入工具。它是可胜任执行一个广泛的数据库管理系统后端指印, 检索遥远的DBMS 数据库等，下面我们来看一个学习例子。 自己搭建一个PHP+MYSQ...2016-11-25- 这篇文章主要为大家详细介绍了js+css实现回到顶部按钮back to top回到顶部按钮，感兴趣的小伙伴们可以参考一下...2016-03-03
- 复制代码 代码如下: // 第一种写法 $da = date("w"); if( $da == "1" ){ echo "今天是星期一"; }else if( $da == "2" ){ echo "今天是星期二"; }else if( $da == "3" ){ echo "今天是星期三"; }else if( $da == "4"...2013-10-04
React引入antd-mobile+postcss搭建移动端
本文给大家分享React引入antd-mobile+postcss搭建移动端的详细流程，文末给大家分享我的一些经验记录使用antd-mobile时发现我之前配置的postcss失效了，防止大家踩坑，特此把解决方案分享到脚本之家平台，需要的朋友参考下吧...2021-06-21- 这篇文章主要介绍了解决vue scoped scss 无效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-04
- js里面设置DOM节点透明度的函数属性：filter= "alpha(opacity=" + value+ ")"（兼容ie）和opacity=value/100（兼容FF和GG）。 先来看看设置透明度的兼容性代码： 复制代码 代码如下: function setOpacity(ele, opacity) { if (...2014-06-07
- 这篇文章主要为大家详细解析了BootStrap图片样式、辅助类样式和CSS组件源码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2017-01-23
- 在BS中，xml，html，css和js我们都学过，起初分不清这四者的区别和联系，随着知识的增长，有了一些体会，下面通过本文给大家简单介绍 XML、HTML、CSS与JS的区别，需要的朋友参考下...2016-02-21
- 这篇文章主要介绍了微信小程序 通过控制CSS实现view隐藏与显示的相关资料,需要的朋友可以参考下...2017-05-27
- 这篇文章主要给大家介绍了关于如何在JS中如何使用css变量以及export之javascript关键字的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2021-09-02
- 本文我们需要解决的问题是如何实现Http请求来实现通信，解决Android 2.3 版本以后无法使用Http请求问题，下面请看正文。 Android开发中使用HttpClient来开发Http程序...2016-09-20
- DOM是种符合万维网标准的HTML操纵方式，它能比innerHTML特性达成更多操控功能。这篇文章主要介绍了JavaScript驾驭网页-CSS与DOM的相关资料,需要的朋友可以参考下...2016-03-28