请选择 进入手机版 | 继续访问电脑版

网络科技

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

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

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

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

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

x

CSS 实现 1px 以内的移动

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 内的移动!
  基本语法:
        
  1. transform: translate(12px, 50%);transform: translateX(2em);transform: translateY(3in);
复制代码
      给出本文的 demo 代码,
        
  1. <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>
复制代码
      截图如下
   

CSS 实现 1px 以内的移动

CSS 实现 1px 以内的移动-2-网络科技-position,解决方案,chrome,border,bottom

   这里为了更容易观察,我们把布局换成 inline-block ,我们发现元素与元素之间存在空隙回去再看一遍代码发现没什么问题,那这段距离是怎么引起的呢?
   是空格? 没错! 在使用 inline-block 的时候一定注意代码缩进或换行带来的不必要的麻烦(无意中添加了空格)。
  修改如下
        
  1. <div class="parent">  <div class="child-first"></div><div class="child-second"></div><div class="child-third"></div></div>
复制代码
      得到最终结果,如下图
   

CSS 实现 1px 以内的移动

CSS 实现 1px 以内的移动-3-网络科技-position,解决方案,chrome,border,bottom

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



上一篇: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
在几百万帖里找到你,很不容易
回复 支持 反对

使用道具 举报

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

本版积分规则

我要投稿

推荐阅读


回页顶回复上一篇下一篇回列表
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )

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

返回顶部 返回列表