底部tapbar栏是移动端页面中非常常见的组件，通常用于承载首页、分类、购物车、个人中心等核心页面的切换入口，需要始终固定在页面底部，不会随着页面滚动而消失。实现这个效果主要依赖css的固定定位属性和弹性布局能力。
基础布局结构
首先我们需要搭建tapbar的基本HTML结构，通常包含一个最外层的容器，内部是每个导航选项，每个选项一般包含图标和文字两部分。结构示例如下：
<div class="tapbar">
<div class="tapbar-item active">
<span class="icon">首页</span>
<span class="text">首页</span>
</div>
<div class="tapbar-item">
<span class="icon">分类</span>
<span class="text">分类</span>
</div>
<div class="tapbar-item">
<span class="icon">购物车</span>
<span class="text">购物车</span>
</div>
<div class="tapbar-item">
<span class="icon">我的</span>
<span class="text">我的</span>
</div>
</div>
核心css样式实现
固定定位到底部
要让tapbar始终停留在页面底部，首先给最外层容器设置固定定位，同时指定底部距离为0，宽度占满整个屏幕。为了避免页面内容被tapbar遮挡，还需要给页面主体内容设置底部内边距，数值和tapbar的高度一致。
/* 页面主体内容样式 */
.page-content {
padding-bottom: 50px;
min-height: 100vh;
box-sizing: border-box;
}
/* tapbar容器样式 */
.tapbar {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 50px;
background-color: #ffffff;
border-top: 1px solid #e5e5e5;
display: flex;
z-index: 999;
}
内部选项排列
使用flex布局让tapbar内部的选项均匀分布，每个选项占据相同的宽度，内容垂直水平居中排列。同时设置默认的文字和图标颜色，以及选中状态的样式。
.tapbar-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #666666;
font-size: 12px;
}
.tapbar-item .icon {
font-size: 20px;
margin-bottom: 2px;
}
.tapbar-item.active {
color: #1677ff;
}
移动端适配处理
不同移动设备的屏幕尺寸和像素密度不同，为了让tapbar在各种设备上都有合适的显示效果，可以使用相对单位或者媒体查询做适配。如果使用viewport单位，可以把tapbar的高度设置为相对值，同时配合env(safe-area-inset-bottom)处理刘海屏设备的安全区域问题。
.tapbar {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: calc(50px + env(safe-area-inset-bottom));
padding-bottom: env(safe-area-inset-bottom);
background-color: #ffffff;
border-top: 1px solid #e5e5e5;
display: flex;
z-index: 999;
box-sizing: border-box;
}
.page-content {
padding-bottom: calc(50px + env(safe-area-inset-bottom));
min-height: 100vh;
box-sizing: border-box;
}
交互效果优化
为了让tapbar有更好的交互体验，可以添加点击反馈效果，同时如果要实现路由切换，可以配合对应的前端框架处理点击事件，这里给出纯css的点击反馈实现：
.tapbar-item:active {
background-color: #f5f5f5;
}
以上就是通过css实现底部tapbar栏的完整方案，核心思路是利用position: fixed实现固定定位，配合flex布局完成内部元素的排列，再根据实际需求做适配和交互优化即可。