CSS實(shí)現(xiàn)1px以內(nèi)的移動(dòng)
之前的文章說過關(guān)于行內(nèi)元素垂直方向?qū)R的方案。感興趣的可以看我的往期文章。在上一篇文章里我們提到了 1px 內(nèi)的移動(dòng)問題。本文就一像素內(nèi)的問題給出解決方案。
可能大家看過關(guān)于 Retina 屏幕的一像素邊框問題，注意這里是邊框?qū)挾榷皇且苿?dòng)元素。
什么?border 小于 1px ?
對(duì)，因?yàn)榍懊嬗腥私o出相關(guān)方案而且好多種方案，這里不重復(fù)描述實(shí)現(xiàn)原理，給大家兩個(gè)鏈接，感興趣的自己跳轉(zhuǎn)。
看完大徹大悟，佩服佩服，思路很多，回到本文重點(diǎn)
想一下能實(shí)現(xiàn)移動(dòng)的方法 position(top,right,bottom,left), margin, padding, vertical-align。
上面給的只是一部分可以通過具體單位(px, em, rem 等)進(jìn)行移動(dòng)的方法
本著實(shí)踐的原則，上述方案都不可行，在***的 chrome 中，當(dāng)小于 0.5px 時(shí)是 0，當(dāng)大于等于 0.5px 時(shí)就變成 1px。
因?yàn)榘咐^于簡(jiǎn)單，不做 demo ，感興趣的自己實(shí)踐，相信大家多數(shù)人試驗(yàn)過了。
那么還有什么以具體單位移動(dòng)的屬性呢?
解決方案
也許你早就知道有 transform 的 translate 屬性了。沒錯(cuò)它就能實(shí)現(xiàn) 1px 內(nèi)的移動(dòng)!
基本語法：
- 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 ，我們發(fā)現(xiàn)元素與元素之間存在空隙回去再看一遍代碼發(fā)現(xiàn)沒什么問題，那這段距離是怎么引起的呢?
是空格? 沒錯(cuò)! 在使用 inline-block 的時(shí)候一定注意代碼縮進(jìn)或換行帶來的不必要的麻煩(無意中添加了空格)。
修改如下
- <div class="parent">
- <div class="child-first"></div><div class="child-second"></div><div class="child-third"></div>
- </div>
得到最終結(jié)果，如下圖
這里特地將小塊顏色做區(qū)分，瀏覽器視圖放大到***倍數(shù)，如果還是看不清的話，推薦大家親手試一試，
總結(jié)
到這里我的方法講完了，在***歡迎大家討論，方案不止一個(gè)， orange 目前只發(fā)現(xiàn)這一個(gè)方案，你也可以根據(jù) js 判斷屏幕然后給出 .5 像素的偏移也是可行的，我個(gè)人認(rèn)為此方法簡(jiǎn)單一些。
歡迎關(guān)注 orange 的 個(gè)人博客 http://orangexc.xyz/
