🔥 一键夜间模式，告别手动配置暗主题
你是否还在单独写变量控制夜间模式？
使用 prefers-color-scheme 媒体查询结合 filter 属性，
实现一键切换夜间模式，无需单独配置暗黑色值。
/* 夜间模式查询（可选）， */
@media (prefers-color-scheme: dark) {
body {
/* 一行代码搞定 */
filter: invert(1) hue-rotate(180deg);
background-color: #000
}
/* 图片还原真实颜色（避免被整体反色影响） */
img { filter: invert(1) hue-rotate(180deg); }
}
2. 🔥 一键适配！纯 CSS 搞定 REM 自适应
clamp()+calc()实现 16-22px 根字体流体排版
<style>
html {
font-size: clamp(16px, calc(16px + 2 * (100vw - 375px) / 39), 22px);
}
</style>
<p>39是(768-375)/6 ≈ 39的简化, 所以公式等价 , 只是写法不同 </p>
3. currentColor 一行实现智能换肤
借 color: inherit 继承主题色，currentColor关联 color， [data-theme] 属性区分不同主题
<section class="module">
<h4>模块标题</h4>
<content>
<ul><li>文字描述</li><li>文字描述</li><li>文字描述</li></ul>
<button>了解更多</button>
</content>
</section>
<section class="module" data-theme="a">
<h4>模块标题</h4>
<content>
<ul><li>文字描述</li><li>文字描述</li><li>文字描述</li></ul>
<button>了解更多</button>
</content>
</section>
<section class="module" data-theme="b">
<h4>模块标题</h4>
<content>
<ul><li>文字描述</li><li>文字描述</li><li>文字描述</li></ul>
<button>了解更多</button>
</content>
</section>
<style>
.module { border: 1px solid }
.module content { display: block; padding: 10px }
.module ul { color: #333 }
.module h4 {
margin: 0;
padding: 5px 10px;
-webkit-text-fill-color: #fff;
background-color: currentColor;
}
.module button {
border: 0;
width: 100px;
height: 32px;
-webkit-text-fill-color: #fff;
color: inherit;
background-color: currentColor;
margin-top: 10px;
}
/* 主题颜色设置 */
[data-theme="a"] { color: skyblue }
[data-theme="b"] { color: pink }
</style>
4. 移动端安全边距
使用 env(safe-area-inset-*) 函数，为刘海屏、底部安全区等设备提供适配。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 设置meta的content，确保 safe-area-inset-* 出现准确边距 -->
<meta name="viewport" content="viewport-fit=cover">
<style>
/* 移动端的 4个安全内边距值，设置兜底尺寸值 */
body {
padding-top: env(safe-area-inset-top, 20px);
padding-bottom: env(safe-area-inset-bottom, 0.5vh);
padding-left: env(safe-area-inset-left, 1.4rem);
padding-right: env(safe-area-inset-right, 1em);
}
</style>
</head>
5. vh 经典底部栏动态居底部
使用 Flexbox 布局，实现底部栏始终固定在页面底部，无论内容多少
<div class="container">
<section>
<button>少贴视窗底，多随内容底</button>
<ul class="content"> 。。。。。。。。。。 </ul>
</section>
<footer>自动跟随</footer>
</div>
<style>
* {margin: 0;padding: 0;box-sizing: border-box}
.container {
/* 核心代码 */
display: flex;
flex-direction: column;
min-height: 100vh;
}
footer {
height: 4rem;
background-color: #333;
/* 核心 */
margin-top: auto;
}
</style>
<script>
// 模拟内容极少不足、内容超过 100vh 两者情况
const content = document.querySelector('.content')
document.querySelector('button').onclick = function () {
for (let i = 0; i <= 30; i++) {
content.innerHTML += `<p>假如中间有很多内容</p>`
}
}
</script>
6. 任意字符强调效果
这种排版很神奇， text-emphasis-style 添加自定义强调标记，避免手动 flex 撸效果
<p>
宝贝，
<span class="emphasis">爱你</span>，
<span class="emphasis">比心</span>！
</p>
<style>
.emphasis {
/* 强调装饰符 */
-webkit-text-emphasis-style: '❤';
text-emphasis-style: '❤';
/* 控制文字方向 */
writing-mode: vertical-rl;
text-emphasis-position: over right;
}
</style>
7. 增强版滚动
scroll-behavior: smooth 让上下滚动更顺滑
<!-- HTML： -->
<div class="box">
<div class="list"><input id="one" readonly>1</div>
<div class="list"><input id="two" readonly>2</div>
<div class="list"><input id="three" readonly>3</div>
<div class="list"><input id="four" readonly>4</div>
</div>
<div class="link">
<label class="click" for="one">1</label>
<label class="click" for="two">2</label>
<label class="click" for="three">3</label>
<label class="click" for="four">4</label>
</div>
<style>
/* 核心CSS： */
.box {
width: 20em;
height: 10em;
/* 平滑滚动：scroll-behavior: smooth,.box 中的 scroll-behavior: smooth 是体验优化：
让浏览器滚动到聚焦元素的过程是 “平滑过渡”，而非瞬间跳转，提升交互体验。 */
scroll-behavior: smooth;
overflow: hidden;
}
.list {
height: 100%;
background: #ff4c4c;
text-align: center;
position: relative;
}
.list>input {
position: absolute;
top: 0;
height: 100%;
width: 1px;
border: 0;
padding: 0;
margin: 0;
clip: rect(0 0 0 0);
}
</style>
8. 阻止连带滚动
内部滚动牵动外部滚动是常见坑，overscroll-behavior : contain 可限定滚动域，防止穿透
<!-- 阻止连带滚动 -->
<zxx-scroll>
你想了解 overscroll-behavior: contain 和 -ms-scroll-chaining: contain 这两个 CSS
属性的作用，以及它们在实际开发中的价值，我会用通俗易懂的方式拆解这两个属性的核心功能、使用场景和差异。
核心作用: 解决 “滚动穿透” 问题
这两个属性的核心目标是阻止滚动行为的 “链式传递” ( 俗称 “滚动穿透” ) ，简单说:
当你在一个可滚动的小容器 ( 如弹窗、侧边栏 ) 内滚动到顶部 / 底部时，继续滑动，页面的外层容器 ( 如整个网页 ) 不会跟着滚动
没有这个属性时，小容器滚动到底部后，再滑动会触发整个页面的滚动，破坏交互体验 ( 比如弹窗内滑动导致背景页面滚动 ) 。
逐属性拆解
1. overscroll-behavior: contain ( 标准属性 )
定位: W3C 标准 CSS 属性，现代浏览器 ( Chrome/Firefox/Safari/Edge ) 均支持
核心值:
contain: 限制滚动行为在当前元素内，不会传递给父元素
auto ( 默认 ) : 允许滚动穿透
none: 不仅阻止滚动穿透，还会禁用浏览器的默认滚动反馈 ( 如 iOS 的弹性回弹 ) 。
</zxx-scroll>
<!-- 连带滚动 -->
<p class="test">你想了解 overscroll-behavior: contain 和 -ms-scroll-chaining: contain 这两个 CSS
属性的作用，以及它们在实际开发中的价值，我会用通俗易懂的方式拆解这两个属性的核心功能、使用场景和差异。
核心作用: 解决 “滚动穿透” 问题
这两个属性的核心目标是阻止滚动行为的 “链式传递” ( 俗称 “滚动穿透” ) ，简单说:
当你在一个可滚动的小容器 ( 如弹窗、侧边栏 ) 内滚动到顶部 / 底部时，继续滑动，页面的外层容器 ( 如整个网页 ) 不会跟着滚动
没有这个属性时，小容器滚动到底部后，再滑动会触发整个页面的滚动，破坏交互体验 ( 比如弹窗内滑动导致背景页面滚动 ) 。
</p>
<p>
</p>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
zxx-scroll {
display: block;
width: 180px;
height: 100vh;
padding: .5em 1em;
border: solid deepskyblue;
overflow: auto;
/* 核心css */
overscroll-behavior: contain;
-ms-scroll-chaining: contain;
}
.test {
width: 180px;
height: 300px;
overflow: auto;
}
</style>
9. 丝滑滚动急停
使用 scroll-snap-type 和 scroll-snap-align 属性，实现滚动时的自动对齐效果。
<!--
scroll-snap-align: center：定义图片在滚动容器中的吸附对齐点（center = 居中，还可设 start/end）
配合容器的scroll-snap-type，实现滑动后图片自动居中对齐。
-->
<div class="scroll-x">
<img src="./图片/风景.webp">
<img src="./图片/image.png">
<img src="./图片/image copy.png">
<img src="./图片/image copy 2.png">
</div>
<style>
.scroll-x {
max-width: 414px; height: 420px;
margin: auto;
scroll-snap-type: x mandatory;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
}
.scroll-x img {
width: 300px; height: 400px;
scroll-snap-align: center;/* 图片居中吸附 */
}
</style>
scroll-snap-type：设置滚动容器的吸附类型scroll-snap-align：设置子元素的吸附对齐点- 强制吸附：实现滚动后的精确定位
10. 滚动锁定急停
使用 scroll-snap-type 的不同值，实现不同的滚动吸附效果。
<section>
<h4>垂直滚动 - mandatory</h4>
<div class="scroll scroll-y mandatory">
<img src="wallpaper-1.jpg">
<img src="nature-1.jpg">
<img src="wallpaper-3.jpg">
<img src="nature-2.jpg">
</div>
</section>
<section>
<h4>垂直滚动 - proximity</h4>
<div class="scroll scroll-y proximity">
<img src="wallpaper-1.jpg">
<img src="nature-1.jpg">
<img src="wallpaper-3.jpg">
<img src="nature-2.jpg">
</div>
</section>
<style>
.scroll { overflow: auto }
.scroll-y { max-width: 300px; height: 150px }
.mandatory { scroll-snap-type: y mandatory }
.proximity { scroll-snap-type: y proximity }
.scroll img { scroll-snap-align: center }
</style>
scroll-snap-type: mandatory：强制吸附到最近的对齐点scroll-snap-type: proximity：仅在接近对齐点时吸附- 垂直滚动：实现类似轮播图的效果
参考资源
- 《CSS新世界》- 张鑫旭
