CSS基础查缺补漏（持续更新补充）
此篇博文作为CSS基础系列的补充内容，将持续收录后续学习过程中未在前文涉及的知识点。主包将保持持续更新，不断完善CSS知识体系。
如果你在学习过程中遇到任何CSS相关问题，欢迎在评论区留言讨论。我们会定期梳理大家的问题，并将有价值的补充内容整理到本文中。
一、精灵图
CSS精灵图是一种将多个小图像合并到一张大图中的技术，通过CSS的 background-position 属性来控制显示图像的特定部分。这种技术可以减少HTTP请求数量，从而提高页面加载性能。
1.优势
（1）减少HTTP请求数量，提高页面加载速度
（2）减少图像总体积（合并后通常比分开的图像文件小）
（3）提前加载资源，避免鼠标悬停时出现延迟
（4）减少服务器负载
2.劣势
（1）开发调试相对复杂
（2）维护成本较高（添加或修改图标需要重新生成整个精灵图）
（3）不适合频繁变化的动态内容
（4）在高DPI屏幕上可能需要提供多倍图
3.使用方法
将所有图标、按钮背景等小图像合并到一张大图上，然后通过CSS定位只显示需要的部分。
/* 定义精灵图的基本样式 */
.icon {background: url('sprite.png');width: 50px;height: 50px;
}/* 通过background-position定位特定图标 */
.icon {background-position: -50px 0;
}
或者使用下面这种写法
.icon1 {background: url('sprite.png') -50px 0;width: 50px;height: 50px;
}
PS：background-position 需要在浏览器中调节 px 保证完美契合网页
二、CSS进阶技巧
1.鼠标样式
CSS 中的 cursor 属性允许指定鼠标指针移动到元素上时显示的光标类型。
光标样式可复制HTML在浏览器中自行查看。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 600px;margin: 200px auto;display: flex;flex-wrap: wrap;}.cursor-item {padding: 12px 20px;margin: 20px;background: #3498db;color: white;border-radius: 5px;text-align: center;min-width: 100px;}.cursor-auto {cursor: auto;}.cursor-pointer {cursor: pointer;}.cursor-wait {cursor: wait;}.cursor-help {cursor: help;}.cursor-not-allowed {cursor: not-allowed;}.cursor-zoom-in {cursor: zoom-in;}.cursor-grab {cursor: grab;}.cursor-cell {cursor: cell;}.cursor-crosshair {cursor: crosshair;}</style>
</head><body><div class="box"><div class="cursor-item cursor-auto">auto</div><div class="cursor-item cursor-pointer">pointer</div><div class="cursor-item cursor-wait">wait</div><div class="cursor-item cursor-help">help</div><div class="cursor-item cursor-not-allowed">not-allowed</div><div class="cursor-item cursor-zoom-in">zoom-in</div><div class="cursor-item cursor-grab">grab</div><div class="cursor-item cursor-cell">cell</div><div class="cursor-item cursor-crosshair">crosshair</div></div>
</body></html>2.文本域
resize 属性控制文本域是否可由用户调整大小。
文本域样式可复制HTML，在浏览器中自行查看。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 600px;}textarea {width: 100%;min-height: 100px;padding: 12px;border: 1px solid #ddd;border-radius: 5px;margin: 10px 0;}/* 默认文本域（可调整） */.resize-none { resize: none; }/* 禁止调整大小 */.resize-both { resize: both; }/* 只能水平调整 */.resize-horizontal { resize: horizontal; }/* 只能垂直调整 */.resize-vertical { resize: vertical; }</style>
</head><body><div class="box"><p>默认文本域（可调整）：</p><textarea placeholder="尝试拖动我右下角的拖拽手柄"></textarea><p>禁止调整大小：</p><textarea class="resize-none" placeholder="无法拖动我调整大小"></textarea><p>只能水平调整：</p><textarea class="resize-horizontal" placeholder="只能水平拖动"></textarea><p>只能垂直调整：</p><textarea class="resize-vertical" placeholder="只能垂直拖动"></textarea></div>
</body></html>3.轮廓线
轮廓线是属性在元素周围绘制一条线，位于边框外围，不占用空间。
轮廓线样式可复制HTML，在浏览器中自行查看，点击按钮即可查看不同的轮廓线效果。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 400px;margin: 200px auto;display: flex;flex-wrap: wrap;}.outline-btn {padding: 12px 20px;margin: 20px;background: #2ecc71;color: white;border: none;border-radius: 5px;font-size: 16px;}.outline1:focus { outline: none; }.outline2:focus { outline: 2px solid #e74c3c; }.outline3:focus { outline: 2px dashed #9b59b6; }.outline4:focus { outline: 2px solid #f39c12; outline-offset: 3px; }</style>
</head><body><div class="box"><button class="outline-btn outline1">无轮廓线</button><button class="outline-btn outline2">实线轮廓</button><button class="outline-btn outline3">虚线轮廓</button><button class="outline-btn outline4">带偏移的轮廓</button></div>
</body></html>4.calc() 函数
支持加减乘除四种运算（+、-、*、/）
可以混合使用不同单位（如 px、%、em、rem 等）
运算遵循基本的数学优先级规则
+ 和 - 运算符两侧必须有空格
* 和 / 运算符不需要空格，但建议添加以提高可读性
（1）基本宽度计算
.container {width: calc(100% - 20px); /* 容器宽度为父元素宽度减去20px */
}（2）居中元素
.box {position: absolute;left: 50%;width: 300px;margin-left: calc(-300px / 2); /* 等价于 -150px，实现水平居中 */
}（3）响应式布局
.column {width: calc(50% - 10px); /* 两列布局，中间留出20px间距 */margin-right: 20px;
}.column:last-child {margin-right: 0;
}（4）动态字体大小
.text {font-size: calc(1rem + 2vw); /* 基础1rem，加上视窗宽度的2% */
}（5）复杂计算
.element {padding: calc(10px + 2%) calc((100% - 800px) / 2);
}calc() 函数非常适合创建灵活的布局，特别是在响应式设计中，可以根据不同的屏幕尺寸动态调整元素的尺寸和位置。所有现代浏览器都支持 calc() 函数，是 CSS 中非常实用的工具。