Apple官網(wǎng)研究之使用Justify布局導航

xuxueli 發(fā)布于2019-08-01 15:05 / 2912人閱讀

摘要：在實現(xiàn)文字兩端對齊的時候，可以對文字所在的元素使用如下屬性來達到需求我們已經(jīng)知道，使用浮動布局是一個次等選擇，因為浮動布局會導致頁面全局渲染次而降低渲染效率，因此陸續(xù)出現(xiàn)了許多浮動布局的替換方案。官網(wǎng)也是使用了內(nèi)聯(lián)塊元素的兩端對齊。

在實現(xiàn)文字兩端對齊的時候，可以對文字所在的元素使用如下屬性來達到需求

text-align: justify;

我們已經(jīng)知道，使用浮動布局是一個次等選擇，因為浮動布局會導致頁面全局渲染2次而降低渲染效率，因此陸續(xù)出現(xiàn)了許多浮動布局的替換方案。比如新舊兩種彈性盒模型，以及接下來我們需要分析到的內(nèi)聯(lián)塊元素的兩端對齊。

Apple官網(wǎng)也是使用了內(nèi)聯(lián)塊元素的兩端對齊。


    Javascript
    Css
    Angular
    Gulp
    Bootstrap

.wrap {
    max-width: 600px;
    background-color: orange;
    color: #fff;
    margin: 20px auto;
    text-align: justify;
    height: 44px;
    line-height: 44px;
}

.item {
    display: inline-block;
}

.wrap::after {
    display: inline-block;
    content: "";
    width: 100%;
    line-height: 0;
    font-size: 0;
}

想要使用justify達到預期效果，必須注意到以下一點

內(nèi)聯(lián)元素最后一排不會兩端居中，而會左對齊。

因此，如果導航元素只有一排的話，text-align: justify并不會生效，所以我們在wrap子元素的最后添加一個after偽類，并將他的寬度設(shè)置為100%，那么最后一排就是這個after偽類了，效果就得意正常實現(xiàn)。

GPU云服務(wù)器云服務(wù)器云服務(wù)器多人獨之使用 Justify text-align:justify Apple

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/49759.html

相關(guān)文章

Apple官網(wǎng)研究之使用Justify布局導航

摘要：在實現(xiàn)文字兩端對齊的時候，可以對文字所在的元素使用如下屬性來達到需求我們已經(jīng)知道，使用浮動布局是一個次等選擇，因為浮動布局會導致頁面全局渲染次而降低渲染效率，因此陸續(xù)出現(xiàn)了許多浮動布局的替換方案。官網(wǎng)也是使用了內(nèi)聯(lián)塊元素的兩端對齊。在實現(xiàn)文字兩端對齊的時候，可以對文字所在的元素使用如下屬性來達到需求 text-align: justify; 我們已經(jīng)知道，使用浮動布局是一個次等選擇，...

walterrwu 2019-08-30 12:47 評論0 收藏0
如何使用Flexbox和CSS Grid，實現(xiàn)高效布局

摘要：代碼如下頁面內(nèi)容樣式接下來，將側(cè)邊欄和主內(nèi)容區(qū)域使用一個包含起來。列和行布局部分橫跨所有的列。也可以使用簡寫，起始值和結(jié)束值位于同一行上，并用斜杠分隔。設(shè)計方法總結(jié)以上的布局設(shè)計中，使用了來進行整體布局以及設(shè)計中的非線性部分。 CSS 浮動屬性一直是網(wǎng)站上排列元素的主要方法之一，但是當實現(xiàn)復雜布局時，這種方法不總是那么理想。幸運的是，在現(xiàn)代網(wǎng)頁設(shè)計時代，使用 Flexbox 和 CSS...

eternalshallow 2019-08-29 13:29 評論0 收藏0
單頁面官網(wǎng)-平滑過渡到指的錨點

摘要：特點單頁面官網(wǎng)不是傳說中的單頁面應(yīng)用固定頂部，點擊導航平滑過渡到指定錨點，鼠標上下滾動到錨點位置導航隨之切換如考拉微課布局頂部導航欄內(nèi)容區(qū)底部樣式導航欄的樣式要注意，這給當前樣式單獨做了一個層，絕對定位，鼠標移動特點單頁面官網(wǎng)--不是傳說中的單頁面應(yīng)用！固定頂部，點擊導航平滑過渡到指定錨點，鼠標上下滾動到錨點位置導航隨之切換如：考拉微課 HTML布局 ...

zhaot 2019-08-01 17:28 評論0 收藏0
單頁面官網(wǎng)-平滑過渡到指的錨點

摘要：特點單頁面官網(wǎng)不是傳說中的單頁面應(yīng)用固定頂部，點擊導航平滑過渡到指定錨點，鼠標上下滾動到錨點位置導航隨之切換如考拉微課布局頂部導航欄內(nèi)容區(qū)底部樣式導航欄的樣式要注意，這給當前樣式單獨做了一個層，絕對定位，鼠標移動特點單頁面官網(wǎng)--不是傳說中的單頁面應(yīng)用！固定頂部，點擊導航平滑過渡到指定錨點，鼠標上下滾動到錨點位置導航隨之切換如：考拉微課 HTML布局 ...

SegmentFault 2019-08-20 18:56 評論0 收藏0
單頁面官網(wǎng)-平滑過渡到指的錨點

摘要：特點單頁面官網(wǎng)不是傳說中的單頁面應(yīng)用固定頂部，點擊導航平滑過渡到指定錨點，鼠標上下滾動到錨點位置導航隨之切換如考拉微課布局頂部導航欄內(nèi)容區(qū)底部樣式導航欄的樣式要注意，這給當前樣式單獨做了一個層，絕對定位，鼠標移動特點單頁面官網(wǎng)--不是傳說中的單頁面應(yīng)用！固定頂部，點擊導航平滑過渡到指定錨點，鼠標上下滾動到錨點位置導航隨之切換如：考拉微課 HTML布局 ...

tianhang 2019-08-29 13:13 評論0 收藏0