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

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

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

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

text-align: justify;

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

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


    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達(dá)到預(yù)期效果，必須注意到以下一點(diǎn)

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

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

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

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

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

相關(guān)文章

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

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

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

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

eternalshallow 2019-08-29 13:29 評(píng)論0 收藏0
單頁(yè)面官網(wǎng)-平滑過(guò)渡到指的錨點(diǎn)

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

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

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

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

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

tianhang 2019-08-29 13:13 評(píng)論0 收藏0