CSS 底部 Tab 切換是一種常見的頁面設(shè)計形式，是實現(xiàn)多個選項卡切換的一種方式。通過在底部放置選項卡，不僅能夠增加頁面的美觀度，還能夠提升用戶體驗。

{
box-sizing: border-box;
padding: 0;
margin: 0;
}
.tab-container {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #f5f5f5;
height: 50px;
border-radius: 5px;
overflow: hidden;
}
.tab {
flex-grow: 1;
text-align: center;
font-size: 16px;
padding: 10px;
cursor: pointer;
transition: background-color .2s ease-in-out;
}
.tab.selected {
background-color: #fff;
color: #333;
}
.tab-content {
padding: 20px;
background-color: #fff;
border-radius: 5px;
}

以上是一個簡單的 CSS 樣式代碼，實現(xiàn)了底部 Tab 切換的效果。其中，.tab-container 元素設(shè)置了 display: flex; ，使得選項卡能夠水平排列，并通過 justify-content 和 align-items 屬性調(diào)整位置和對齊方式。.tab 元素使用 flex-grow: 1; 屬性，根據(jù)父元素的寬度平分多個選項卡。.tab:selected 用于設(shè)置選中狀態(tài)的樣式，.tab-content 則設(shè)置了內(nèi)容塊的樣式。