使用 fixed 定位可实现底部固定导航栏，通过 position: fixed; bottom: 0; left: 0 设置元素始终位于视口底部，并用 width: 100% 横向铺满；为防止内容被遮挡，需在 body 或主容器添加 padding-bottom，其值等于导航栏高度；结合媒体查询可适配移动设备，调整尺寸与字体，提升小屏体验；通常采用 Flexbox 布局对齐图标与文字，确保美观与功能性。
在网页开发中，底部固定导航栏常用于移动端或响应式设计，方便用户随时访问关键功能。实现方式主要依赖 CSS 的定位属性。
使用 fixed 定位固定到底部
将导航栏元素固定在浏览器窗口的底部，即使页面滚动也保持可见。
关键代码：position: fixed; 配合 bottom: 0; 和 left: 0; 可以让元素始终贴在视口底部，并从左侧开始铺满。
示例：
立即学习“前端免费学习笔记（深入）”；
.footer-nav {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 60px;
background-color: #333;
display: flex;
justify-content: space-around;
align-items: center;
color: white;
z-index: 1000; /* 确保在其他内容之上 */
}
避免内容被遮挡
fixed 元素会脱离文档流，可能导致页面底部内容被覆盖。
解决方法是在页面内容区域添加 padding-bottom 或 margin-bottom，留出足够空间。
- padding-bottom 的值应等于导航栏的高度（如 60px）
- 适用于 body 或主容器
示例：
立即学习“前端免费学习笔记（深入）”；
body {
padding-bottom: 60px;
}
适配移动设备与响应式设计
底部导航在小屏幕上更常见，需确保在不同设备上正常显示。
可以结合媒体查询优化布局：
@media (max-width: 768px) {
.footer-nav {
height: 50px;
font-size: 14px;
}
}
图标+文字的组合更适合小屏幕，可配合 Flexbox 布局均匀分布菜单项。
基本上就这些。用 fixed 定位加一点样式和间距处理，就能做出一个实用的底部导航栏。
