网络科技

    今日:164| 主题:246361
收藏本版
互联网、科技极客的综合动态。

[其他] CSS 实现 1px 以内的移动

[复制链接]
告別昨天漣漪 发表于 2016-10-17 22:03:37
90 4

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

CSS 实现 1px 以内的移动-1 (position,解决方案,chrome,border,bottom)

  之前的文章说过关于行内元素垂直方向对齐的方案。感兴趣的可以看我的往期文章。在上一篇文章里我们提到了 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 内的移动!
  基本语法:
         [code]transform: translate(12px, 50%);transform: translateX(2em);transform: translateY(3in);[/code]       给出本文的 demo 代码,
         [code]
  
  
  
[/code]       截图如下

CSS 实现 1px 以内的移动-2 (position,解决方案,chrome,border,bottom)

   这里为了更容易观察,我们把布局换成 inline-block ,我们发现元素与元素之间存在空隙回去再看一遍代码发现没什么问题,那这段距离是怎么引起的呢?
   是空格? 没错! 在使用 inline-block 的时候一定注意代码缩进或换行带来的不必要的麻烦(无意中添加了空格)。
  修改如下
         [code]
  
[/code]       得到最终结果,如下图
12下一页
友荐云推荐




上一篇:CVE-2016-6187: Exploiting Linux kernel heap off-by-one
下一篇:Leaked Samsung Chromebook Is Delightful Overkill
酷辣虫提示酷辣虫禁止发表任何与中华人民共和国法律有抵触的内容!所有内容由用户发布,并不代表酷辣虫的观点,酷辣虫无法对用户发布内容真实性提供任何的保证,请自行验证并承担风险与后果。如您有版权、违规等问题,请通过"联系我们"或"违规举报"告知我们处理。

小僧也要谈恋爱 发表于 2016-10-17 23:38:08
夏天就是不好,穷的时候我连西北风都没得喝……
回复 支持 反对

使用道具 举报

angelababy杨颖 发表于 2016-10-18 04:01:59
前排支持下
回复 支持 反对

使用道具 举报

夜礼服假面 发表于 2016-10-20 22:42:14
什么是福,吃亏是福;什么是乐,知足常乐!
回复 支持 反对

使用道具 举报

kevinshi2010 发表于 2016-10-25 17:09:15
在几百万帖里找到你,很不容易
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读

扫码访问 @iTTTTT瑞翔 的微博
回页顶回复上一篇下一篇回列表手机版
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )|网站地图 酷辣虫

© 2001-2016 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表