92、【Ubuntu】【Hugo】搭建私人博客：侧边导航栏（六）

【声明】本博客所有内容均为个人业余时间创作，所述技术案例均来自公开开源项目（如Github，Apache基金会），不涉及任何企业机密或未公开技术，如有侵权请联系删除

背景

分析了 .post-with-sidebar 容器和 .sidebar-related 侧边栏的 CSS 样式，下面继续分析

OK，再来看下一个 CSS 样式

这里有几个点，首先是 .sidebar-related * 和 .sidebar-related 的区别

.post-with-sidebar .sidebar-related：设置侧边栏容器本身的字体大小，行高和颜色，其图同的文本子元素，比如 <p>，<span> 会继承这些样式
.post-with-sidebar .sidebar-related *：* 是通配符，表示该容器内所有的子元素 ，这里会强制所有的子元素（包括 <div>，<span>，<li>，<h3> 等）都使用指定的字体大小 font-size，line-height 行高和 color 颜色，font（字体）的意思

上面提到了一些标签，下面详细分析下：

<p>：表示段落，用于包裹一段文字内容，比如文章中的一段话，浏览器会默认给 <p> 加上上下外边距（margin），让该段文字和其他段落之间有空隙，比如

html 复制代码

<p>这是一个段落。</p>
<p>这是另一个段落。</p>

显式效果如下

这是一个段落。

这是另一个段落。

可以看到 <p> 标签的前后都会有一个空行

<span>：通用的行内容器，没有默认样式，也不会换行，只是用来包裹住一小段文字，通常是为了给包裹的文字加样式或 JavaScript 操作，常用于对句子中的某几个字变颜色，或加粗等
<h3>：标题，表示三级标题，其效果表现为块级元素，默认字体较大，加粗，有强烈语义，告诉浏览器和搜索引擎，这里是内容的层级结构，比如

html 复制代码

<h1>主标题</h1>
<h2>章节标题</h2>
<h3>小节标题</h3>

经过浏览器渲染的显式效果为

OK，分析完这些，在看里面设置的 font-size，line-height，color，都是对字体大小，行间距，颜色的描述，下面再看下一个 CSS 样式

这里是对 .post-with-sidebar 双栏布局中另一个元素 .post-single 的描述了，.post-single 在语境中就是正文内容的意思，首先，这段 CSS 样式的作用可以让文章主体占据剩余空间，限制宽度范围，并设置上下间距

flex: 1：关键布局属性，可以让 .post-single 在 Flex 容器中自动填充剩余空间，这里 flex: 1 是 flex: 1 1 0% 的简写，进一步表示
- flex-grow: 1：可以放大占满剩余可用空间
- flex-shrink: 1：空间不足时可以缩小
- flex-basis: 0%：初始主轴尺寸为 0，完全由剩余空间决定

这样侧边栏（固定宽度 300px，且排在文章的左边）能够和文章正文区域自动平分空间，并且文章区域优先扩展剩余空间

max-width: 720px：限制最大宽度，即使屏幕很宽，文章内容也不会无限拉伸，720px 是阅读体验的常见最佳宽度，避免行长过长导致阅读疲劳
min-width: 400px：限制最小宽度，防止屏幕较窄时，文章区域被压缩得太小 ，比如在平板或小笔记本上，低于 400px 可能会破坏排版，比如图片溢出，文字挤在一起等
margin-top: 3rem; margin-bottom: 2rem;：上下外边距与侧边栏对齐，保持视觉一致性

OK，下一个 CSS 样式

移动端的先不分析

OK，侧边栏的内容介绍完了，下面来看实际效果

可以看到左侧区域就是侧边导航栏，点击即可前往

往下滑动，侧边栏导航也能紧紧贴在左侧，毫无违和感

OK，本篇先到这里，如有疑问，欢迎评论区留言讨论，祝各位功力大涨，技术更上一层楼！！！更多内容见下篇 blog
【Ubuntu】【Hugo】搭建私人博客：面包屑（一）