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

walterrwu 發(fā)布于2019-08-30 12:47 / 2683人閱讀

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

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

text-align: justify;

我們已經(jīng)知道，使用浮動布局是一個次等選擇，因為浮動布局會導(dǎo)致頁面全局渲染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達到預(yù)期效果，必須注意到以下一點

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

因此，如果導(dǎo)航元素只有一排的話，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://specialneedsforspecialkids.com/yun/115067.html

相關(guān)文章

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

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

xuxueli 2019-08-01 15:05 評論0 收藏0
如何使用Flexbox和CSS Grid，實現(xiàn)高效布局

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

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

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

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

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

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

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

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