Apple官网研究之使用Justify布局导航

walterrwu 发布于2019-08-30 12:47 / 2669人阅读

摘要：在实现文字两端对齐的时候，可以对文字所在的元素使用如下属性来达到需求我们已经知道，使用浮动布局是一个次等选择，因为浮动布局会导致页面全局渲染次而降低渲染效率，因此陆续出现了许多浮动布局的替换方案。官网也是使用了内联块元素的两端对齐。

在实现文字两端对齐的时候，可以对文字所在的元素使用如下属性来达到需求

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115067.html

Apple官网研究之使用Justify布局导航

摘要：在实现文字两端对齐的时候，可以对文字所在的元素使用如下属性来达到需求我们已经知道，使用浮动布局是一个次等选择，因为浮动布局会导致页面全局渲染次而降低渲染效率，因此陆续出现了许多浮动布局的替换方案。官网也是使用了内联块元素的两端对齐。在实现文字两端对齐的时候，可以对文字所在的元素使用如下属性来达到需求 text-align: justify; 我们已经知道，使用浮动布局是一个次等选择，...

xuxueli 2019-08-01 15:05 评论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