社区编辑申请
注册/登录
CSS实现1px以内的移动
开发 前端
之前的文章说过关于行内元素垂直方向对齐的方案。感兴趣的可以看我的往期文章。在上一篇文章里我们提到了 1px 内的移动问题。本文就一像素内的问题给出解决方案。

之前的文章说过关于行内元素垂直方向对齐的方案。感兴趣的可以看我的往期文章。在上一篇文章里我们提到了 1px 内的移动问题。本文就一像素内的问题给出解决方案。

可能大家看过关于 Retina 屏幕的一像素边框问题,注意这里是边框宽度而不是移动元素。

什么?border 小于 1px ?

对,因为前面有人给出相关方案而且好多种方案,这里不重复描述实现原理,给大家两个链接,感兴趣的自己跳转。

看完大彻大悟,佩服佩服,思路很多,回到本文重点

想一下能实现移动的方法 position(top,right,bottom,left), margin, padding, vertical-align。

上面给的只是一部分可以通过具体单位(px, em, rem 等)进行移动的方法

本着实践的原则,上述方案都不可行,在***的 chrome 中,当小于 0.5px 时是 0,当大于等于 0.5px 时就变成 1px。

因为案例过于简单,不做 demo ,感兴趣的自己实践,相信大家多数人试验过了。

那么还有什么以具体单位移动的属性呢?

解决方案

也许你早就知道有 transform 的 translate 属性了。没错它就能实现 1px 内的移动!

基本语法:

  1. transform: translate(12px, 50%); 
  2.  
  3. transform: translateX(2em); 
  4.  
  5. transform: translateY(3in);  

给出本文的 demo 代码,

  1. <div class="parent"
  2.   <div class="child-first"></div> 
  3.   <div class="child-second"></div> 
  4.   <div class="child-third"></div> 
  5. </div> 
  6.  
  7. <style> 
  8.   .parent { 
  9.     width: 310px; 
  10.     height: 150px; 
  11.     background-color: #666; 
  12.   } 
  13.  
  14.   .parent div { 
  15.     display: inline-block; 
  16.   } 
  17.  
  18.   .child-first { 
  19.     width: 100px; 
  20.     height: 100px; 
  21.  
  22.     margin-top: .5px; 
  23.  
  24.     transform: translateY(.3px); 
  25.  
  26.     background-color: #f66; 
  27.   } 
  28.  
  29.   .child-second { 
  30.     width: 100px; 
  31.     height: 100px; 
  32.  
  33.     transform: translateY(.5px); 
  34.  
  35.     background-color: #ff0; 
  36.   } 
  37.  
  38.   .child-third { 
  39.     width: 100px; 
  40.     height: 100px; 
  41.  
  42.     transform: translateY(1px); 
  43.  
  44.     background-color: #06c; 
  45.   } 
  46. </style>  

截图如下

这里为了更容易观察,我们把布局换成 inline-block ,我们发现元素与元素之间存在空隙回去再看一遍代码发现没什么问题,那这段距离是怎么引起的呢?

是空格? 没错! 在使用 inline-block 的时候一定注意代码缩进或换行带来的不必要的麻烦(无意中添加了空格)。

修改如下

  1. <div class="parent"
  2.  
  3. <div class="child-first"></div><div class="child-second"></div><div class="child-third"></div> 
  4.  
  5. </div>  

得到最终结果,如下图

这里特地将小块颜色做区分,浏览器视图放大到***倍数,如果还是看不清的话,推荐大家亲手试一试,

总结

到这里我的方法讲完了,在***欢迎大家讨论,方案不止一个, orange 目前只发现这一个方案,你也可以根据 js 判断屏幕然后给出 .5 像素的偏移也是可行的,我个人认为此方法简单一些。

欢迎关注 orange 的 个人博客 http://orangexc.xyz/

责任编辑:庞桂玉 来源: segmentfault

同话题下的热门内容

Java 服务 Docker 容器化优秀实践程序员不得不知道的 API 接口常识TestOps完全手册:工作流、生命周期、团队和流程11个 ES2022(ES13)中惊人的 JavaScript 新特性不要在 Python 中使用循环,这些方法其实更棒!使用 Vite 和 TypeScript 带你从零打造一个属于自己的 Vue3 组件库你需要知道的TypeScript高级类型Hooks时代,如何写出高质量的react和vue组件?

编辑推荐

太厉害了,终于有人能把TCP/IP协议讲的明明白白了!牛人5次面试腾讯不成功的经验HBase原理–所有Region切分的细节都在这里了Javascript如何监听页面刷新和关闭事件如何搭建一个HTTPS服务端
我收藏的内容
点赞
收藏

51CTO技术栈公众号