一、CSS 初始化
*{margin:0;/* 外边距清零 */padding:0;/* 内边距清零 */scroll-behavior:smooth;/* 页面添加平滑滚动效果 */}/* em 和 i 斜体的文字不倾斜 */em, i{font-style:normal;}/* 去掉 li 的小圆点 */li{list-style:none;}/* 解决图片底侧有空白缝隙的问题 */img{vertical-align:middle;}/* 取消 a 链接下划线 */a{text-decoration:none;}快速清除元素所有默认样式，从头开始定制：
.reset-component{all:unset;/* 移除所有继承和默认样式 */display:block;/* 重新定义需要的样式 */padding:12px;background:#4299e1;color:white;}
二、css样式美化小作坊
1. accent-color：一键美化表单元素
🔰给表单元素设置 accent-color 样式，就可以改变表单元素的颜色；
/* 美化复选框 */input[type="checkbox"]{accent-color:cyan;/* 品牌粉色 */}/* 美化单选按钮 */input[type="radio"]{accent-color:#2196f3;/* 品牌蓝色 */}<divclass="container"><inputtype="checkbox"name=""id=""><inputtype="radio"name=""id=""></div>2. caret-color：定制光标颜色
🔰给表单元素设置 caret-color 样式，就可以改变光标颜色；
.container input{background:#1a1a1a;color:#ffffff;caret-color:#F43507;}<divclass="container"><inputname=""id=""></div>3. currentColor：颜色继承
🔰自动继承元素的 color 属性值，让边框、背景等样式与文字颜色同步;
.container button{color:#0066cc;/* 主色调 */border:2px solid currentColor;/* 边框继承文字颜色 */background:transparent;}/* hover时同步变色 */.containerbutton:hover{color:#f99;/* 加深主色调 *//* 边框会自动变成 #f99，无需重复定义 */}<divclass="container"><button>颜色继承按钮</button></div>4. all: unset：一键清除默认样式
🔰all: unset 只需一行，就能彻底移除元素的所有默认样式（包括继承属性）
.custom-btn{all:unset;/* 清除默认的边框、背景、字体等 */padding:8px16px;background:#ff9800;color:white;border-radius:4px;cursor:pointer;margin:010px;}<divclass="container"><button>默认按钮</button><buttonclass="custom-btn">unset 按钮</button></div>🔰给表单元素设置 outline 样式，就可以去掉默认的蓝色边框；
input { outline: none; }
5. inset：简化定位布局
🔰写绝对定位（position: absolute）或固定定位（position: fixed）时，常常要重复写 top/right/bottom/left 四行代码。inset 是这四个属性的简写，语法和 padding 类似，能大幅精简代码。
/* 全屏覆盖（等价于 top:0; right:0; bottom:0; left:0） */.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);}/* 上下10px，左右20px（等价于 top:10px; right:20px; bottom:10px; left:20px） */.card{position:absolute;inset:10px20px;}6. text-wrap: balance：智能均衡文本折行
🔰在响应式设计中，标题或长文本的折行常常参差不齐（比如一行只有 1-2 个字符），影响排版美感。text-wrap: balance 会自动计算文本长度，让每行的字符数尽量均衡，就像专业排版师调整的效果。
/* 让标题折行更优雅 */h2{text-wrap:balance;max-width:600px;/* 配合最大宽度使用，效果更佳 */}<divclass="container"><h2>在响应式设计中，标题或长文本的折行常常参差不齐（比如一行只有 1-2 个字符），影响排版美感。text-wrap: balance会自动计算文本长度，让每行的字符数尽量均衡，就像专业排版师调整的效果。</h2></div>7. :is ()：简化多选择器重复写法
🔰当多个选择器需要应用相同样式时，:is()伪类能减少代码重复，让选择器更简洁。比如给header、main、footer中的p标签设置相同样式：
/* 传统写法 */headerp, mainp, footerp{margin:8px0;line-height:1.6;}/* :is() 简化写法 */:is(header, main, footer) p{margin:8px0;line-height:1.6;}8. aspect-ratio：固定元素宽高比
🔰给元素设置 aspect-ratio 样式，就可以通过宽高比例设置元素的尺寸；
/* 16:9 视频容器 */.video-container{width:100%;aspect-ratio:16/9;background:#000;}/* 1:1 头像容器 */.avatar{width:80px;aspect-ratio:1;border-radius:50%;overflow:hidden;margin-top:10px;}img{width:100%;height:100%;object-fit:cover;}<divclass="video-container"></div><divclass="avatar"><im
