为什么有些事情用CSS就够了（css为什么不能用百分比）

yumo6668小时前技术文章2

JavaScript确实强大，这是毋庸置疑的。

但你知道吗？其实不一定每次都需要它。

事实上，JavaScript越少，网站性能往往越好。

为什么要减少JavaScript的使用？

想象你背着一个沉重的背包跑马拉松，这就是你网站加载多余JavaScript的感觉。

每一行JavaScript都会增加“负担”：

当然，我不是说完全不使用JavaScript。

只是当CSS能优雅完成某件事时，何必让事情复杂化呢？

1. 悬停显示子菜单

下拉菜单你见过不少。

大多数开发者习惯用JavaScript来控制显示隐藏，但其实CSS的 :hover 就能搞定。

HTML结构示例：

<nav>
  <ul>
    <li><a href="#">首页a>li>
    <li><a href="#">关于a>li>
    <li>
      <button>博客 ↓button>
      <ul>
        <li><a href="#">新闻a>li>
        <li><a href="#">访谈a>li>
        <li><a href="#">旅游a>li>
        <li><a href="#">艺术a>li>
        <li><a href="#">科技a>li>
      ul>
    li>
    <li><a href="#">联系a>li>
  ul>
nav>

CSS样式：

nav > ul > li {
  position: relative;
}
nav > ul ul {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s ease;
}
nav > ul > li:hover > ul {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

无需JavaScript，菜单平滑显示。

2. 纯CSS标签页切换

需要做标签页切换？

很多人第一反应是用JavaScript监听点击，然后显示隐藏内容。

但CSS的 :checked 伪类配合兄弟选择器 ~ 就能轻松实现切换。

HTML结构示例：

<input type="radio" id="tab1" name="tabs" checked>
<label for="tab1">标签1label>
<input type="radio" id="tab2" name="tabs">
<label for="tab2">标签2label>
<input type="radio" id="tab3" name="tabs">
<label for="tab3">标签3label>

<div class="tab-content" id="content1">标签1内容div>
<div class="tab-content" id="content2">标签2内容div>
<div class="tab-content" id="content3">标签3内容div>

CSS样式：

input[type="radio"] {
  display: none;
}
label {
  display: inline-block;
  padding: 10px;
  cursor: pointer;
  background: #eee;
  border: 1px solid #ccc;
}
input[type="radio"]:checked + label {
  background: white;
  font-weight: bold;
}
.tab-content {
  display: none;
  padding: 20px;
  border: 1px solid #ccc;
}
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3 {
  display: block;
}

就这么简单，纯CSS实现功能完整的标签页。

3. 滚动捕捉（Scroll Snap）实现流畅导航

你在电脑上浏览YouTube Shorts或Instagram故事时，那种滑动到位的顺畅体验，其实是CSS搞定的！

利用 scroll-snap-type 和 scroll-snap-align 轻松实现。

HTML结构示例：

<div class="scroll-container">
  <div class="scroll-item">内容1div>
  <div class="scroll-item">内容2div>
  <div class="scroll-item">内容3div>
div>

CSS样式：

.scroll-container {
  overflow-y: scroll;
  height: 300px;
  scroll-snap-type: y mandatory;
}
.scroll-item {
  scroll-snap-align: start;
  height: 100px;
  background: lightblue;
  margin: 10px 0;
}