Apple官網研究之使用Justify布局導航

xuxueli 發布于2019-08-01 15:05 / 2859人閱讀

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

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

text-align: justify;

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

Apple官網也是使用了內聯塊元素的兩端對齊。


    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達到預期效果，必須注意到以下一點

內聯元素最后一排不會兩端居中，而會左對齊。

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

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/49759.html

Apple官網研究之使用Justify布局導航

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

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

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

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

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

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

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

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

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

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