成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

從一個居中方法說起 —— 談 translate 與 相對、絕對定位

DandJ / 3248人閱讀

摘要：方法介紹垂直水平居中是日常前端開發(fā)當(dāng)中一個常見的需求，在支持屬性的現(xiàn)代瀏覽器當(dāng)中，有一個利用屬性的垂直水平居中方法例子傳送門請用現(xiàn)代瀏覽器打開從上面的例子看到，無論我們怎樣調(diào)整窗口的大小，紅色方塊始終會在窗口垂直水平居中。

方法介紹

垂直水平居中是日常前端開發(fā)當(dāng)中一個常見的需求，在支持 CSS3 屬性的現(xiàn)代瀏覽器當(dāng)中，有一個利用 CSS3 屬性的垂直水平居中方法：

    .center {
        position: absolute;
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%,-50%);
        -moz-transform: translate(-50%,-50%);
        -o-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%); 
    }

例子傳送門（請用現(xiàn)代瀏覽器打開）

從上面的例子看到，無論我們怎樣調(diào)整窗口的大小，紅色方塊始終會在窗口垂直、水平居中。

原理

為了解釋原理，我們創(chuàng)建兩個元素:

先不加上 transform 屬性：

    #outer {
        position: relative;
        width: 500px;
        height: 500px;
        border: 2px solid yellow;
    }
    
    #inner {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100px;
        height: 100px;
        background-color: red;
    }

未加上 transform 屬性的例子。

可以看到紅色方塊左、上方距離外層方塊的距離都是250個像素，如果我們想實(shí)現(xiàn)垂直水平居中，就應(yīng)該將紅色方塊的中心點(diǎn)移動到目前元素左上角的位置，也就是分別向上和向左移動一半方塊邊長的長度，50個像素。

     #inner {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100px;
        height: 100px;
        background-color: red;
        -ms-transform: translate(-50%,-50%);
        -moz-transform: translate(-50%,-50%);
        -o-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
    }

加上 transform 屬性。

所以我們可以看到在 translate 函數(shù)當(dāng)中使用百分比是以該元素的內(nèi)容區(qū)、補(bǔ)白(padding)、邊框(border)為標(biāo)準(zhǔn)計(jì)算的，為了說明這一點(diǎn)，我們在 innner 元素加上一些 padding 和 border:

    #inner {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100px;
        height: 100px;
        border: 25px solid yellow;
        padding: 25px;
        background-color: red;
        -ms-transform: translate(-50%,-50%);
        -moz-transform: translate(-50%,-50%);
        -o-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
   }

加上 padding 和 border 以后。

可以看到 inner 元素一樣做到了垂直、水平居中。

translate 與絕對定位、相對定位

在表現(xiàn)上看，使用 CSS3 translate 函數(shù)和絕對定位、相對定位屬性加上 top、left 數(shù)值都可以使元素產(chǎn)生位移。實(shí)際上它們還是有不少的區(qū)別。

元素視圖屬性中的 offsetLeft 和 offsetTop 屬性。

我們分別用相對定位和 translate 的方法來使元素產(chǎn)生位移：

    #box1 {
        position: relative;
        width: 50px;
        height: 50px;
        background-color: blue;
        top: 100px;
        left: 300px;
   }
   #box2 {
       width: 50px;
       height: 50px;
       background-color: red;
       -ms-transform: translate(300px,100px);
       -moz-transform: translate(300px,100px);
       -o-transform: translate(300px,100px);
       transform: translate(300px,100px);
   }

然后看看兩者的 offsetTop 和 offsetLeft 的數(shù)值：

    var box1 = document.getElementById("box1");
    
    alert(box1.offsetLeft);
    alert(box1.offsetTop);
    var box2 = document.getElementById("box1");
    
    alert(box2.offsetLeft);
    alert(box2.offsetTop);

使用相對定位的例子

使用 translate 的例子

可以看出使用 translate 的例子的 offsetTop 和 offsetLeft 的數(shù)值與沒有產(chǎn)生位移的元素沒有然后區(qū)別，無論位移多少這兩個數(shù)值都是固定不變的。

而使用相對定位的例子 offsetTop 和 offsetLeft 的數(shù)值則根據(jù)位移的長度發(fā)生了改變。

動畫表現(xiàn)的區(qū)別

在 CSS3 屬性還沒很好地被瀏覽器支持的時候，我們常常會使用絕對定位(position:absolute)，然后結(jié)合 jQuery 改變元素的 top、left 的數(shù)值來做位移的動畫效果。

然而，兩者在位移動畫的表現(xiàn)上也有一定的區(qū)別。借用國外博主 Paul Irish 的兩個例子：

Animating with Top/Left

Animating with Translate

對比兩個例子來看，可以看出使用 translate 來制作的動畫比絕對定位的動畫更加平滑。

原因在于使用絕對定位的動畫效果會受制于利用像素(px)為單位進(jìn)行位移，而使用 translate 函數(shù)的動畫則可以不受像素的影響，以更小的單位進(jìn)行位移。

另外，絕對定位的動畫效果完全使用 CPU 進(jìn)行計(jì)算，而使用 translate 函數(shù)的動畫則是利用 GPU，因此在視覺上使用 translate 函數(shù)的動畫可以有比絕對定位動畫有更高的幀數(shù)。

最后

CSS3 動畫相關(guān)的屬性出現(xiàn)以后，可以讓我們更加輕松地制作復(fù)雜的動畫，同時 position:relative 和 position:absolute 這一類的屬性可以回歸它們原本的定位，為定位、布局服務(wù)，而將動畫的重任交給 CSS3 的相關(guān)屬性。

感謝您的閱讀，有不足之處請為我指出。

參考

Why Moving Elements With Translate() Is Better Than Pos:abs Top/left

本文同步于我的個人博客 http://blog.acwong.org/2014/12/21/css3-middle-translate-and-relative/

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/110985.html

相關(guān)文章

  • css魔幻屬性跟進(jìn)篇

    摘要：中是這樣定義的屬性指定一個元素應(yīng)沿其容器的左側(cè)或右側(cè)放置，允許文本和內(nèi)聯(lián)元素環(huán)繞它。其同樣適用于設(shè)置屬性為絕對定位或固定定位的內(nèi)聯(lián)元素。至于為什么，可以理解為內(nèi)聯(lián)元素沒有盒模型，其高度由內(nèi)容決定。 白話：即上一篇我腦中飄來飄去的css魔幻屬性自己的文章推出之后，這是自己寫的第四篇CSS相關(guān)的文章，文章絕大部分是自己工作總結(jié)得來，另一部分是平日sf回答的與面試中向面試官交流學(xué)到的，都是一...

    oogh 評論0 收藏0

  • CSS 布局經(jīng)典問題初步整理

    摘要：布局經(jīng)典問題初步整理標(biāo)簽前端本文主要對布局中常見的經(jīng)典問題進(jìn)行簡單說明，并提供相關(guān)解決方案的參考鏈接，涉及到三欄式布局，負(fù)，清除浮動，居中布局，響應(yīng)式設(shè)計(jì)，布局，等等。 CSS 布局經(jīng)典問題初步整理 標(biāo)簽 ： 前端 [TOC] 本文主要對 CSS 布局中常見的經(jīng)典問題進(jìn)行簡單說明，并提供相關(guān)解決方案的參考鏈接，涉及到三欄式布局，負(fù) margin，清除浮動，居中布局，響應(yīng)式設(shè)計(jì)，F(xiàn)l...

    Amos 評論0 收藏0

  • 整理：子容器垂直居中于父容器的方案

    摘要：子容器溢出時，父容器出現(xiàn)滾動條。父容器或很顯然，子容器溢出時，被父容器截斷的情形無法和父容器自適應(yīng)于子容器共存?，F(xiàn)在這個布局可以自動生成，詳見林小志的小工具圖片垂直居中。溢出子容器溢出時會變成頂對齊，原因同上。 本文在evernote里有備份。如果evernote的閱讀區(qū)域嫌窄了，那么可以把這個鏈接拖入書簽并點(diǎn)擊javascript:jQuery(#container).width(9...

    youkede 評論0 收藏0

  • 水平居中、垂直居中、水平垂直居中、浮動居中、絕對定位居中.......幫你搞定

    摘要：包括水平居中，垂直居中，還有水平垂直居中。如果要再要細(xì)分，還要分浮動元素絕對定位的居中。樣式水平居中的元素圖片的水平居中圖片的居中，比較特殊。 2018.05.29 居中一個元素？你會想到啥？這里面的知識還真不少。包括水平居中，垂直居中，還有水平垂直居中。如果要再要細(xì)分，還要分浮動元素、絕對定位的居中。為了代碼簡介，沒有加背景和其他樣式，需要看效果的，可以加上背景。 目錄： 第一...

    waterc 評論0 收藏0

  • CSS || 元素垂直居中筆記

    摘要：種元素垂直居中根據(jù)不同情況，使用的垂直居中方式各異針對塊級元素與行級元素的垂直居中不同。行級元素行內(nèi)包含特殊元素如果行內(nèi)包含特殊元素圖片輸入框元素或者粗體使用設(shè)置對齊方式即可垂直居中。 CSS種元素垂直居中 根據(jù)不同情況，使用的垂直居中方式各異：針對塊級元素與行級元素的垂直居中不同。 1 行級元素 1.1 行內(nèi)包含特殊元素 如果行內(nèi)包含特殊元素：圖片、input輸入框、inline-...

    VPointer 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<