CSS基础查缺补漏（持续更新补充）

此篇博文作为CSS基础系列的补充内容，将持续收录后续学习过程中未在前文涉及的知识点。主包将保持持续更新，不断完善CSS知识体系。

如果你在学习过程中遇到任何CSS相关问题，欢迎在评论区留言讨论。我们会定期梳理大家的问题，并将有价值的补充内容整理到本文中。

一、精灵图

CSS精灵图是一种将多个小图像 合并到一张大图中的技术，通过CSS的 background-position 属性来控制显示图像的特定部分。这种技术可以减少HTTP请求数量，从而提高页面加载性能。

1.优势

（1）减少HTTP请求数量，提高页面加载速度

（2）减少图像总体积（合并后通常比分开的图像文件小）

（3）提前加载资源，避免鼠标悬停时出现延迟

（4）减少服务器负载

2.劣势

（1）开发调试相对复杂

（2）维护成本较高（添加或修改图标需要重新生成整个精灵图）

（3）不适合频繁变化的动态内容

（4）在高DPI屏幕上可能需要提供多倍图

3.使用方法

将所有图标、按钮背景等小图像合并到一张大图上，然后通过CSS定位只显示需要的部分。

css 复制代码

/* 定义精灵图的基本样式 */
.icon {
  background: url('sprite.png');
  width: 50px;
  height: 50px;
}

/* 通过background-position定位特定图标 */
.icon {
  background-position: -50px 0;
}

或者使用下面这种写法

css 复制代码

.icon1 {
  background: url('sprite.png') -50px 0;
  width: 50px;
  height: 50px;
}

PS：background-position需要在浏览器中调节 px 保证完美契合网页

二、CSS进阶技巧

1.鼠标样式

CSS 中的 cursor属性允许指定鼠标指针移动到元素上时显示的光标类型。

光标样式可复制HTML在浏览器中自行查看。

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，在浏览器中自行查看。

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，在浏览器中自行查看，点击按钮即可查看不同的轮廓线效果。

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）基本宽度计算

css 复制代码

.container {
  width: calc(100% - 20px); /* 容器宽度为父元素宽度减去20px */
}

（2）居中元素

css 复制代码

.box {
  position: absolute;
  left: 50%;
  width: 300px;
  margin-left: calc(-300px / 2); /* 等价于 -150px，实现水平居中 */
}

（3）响应式布局

css 复制代码

.column {
  width: calc(50% - 10px); /* 两列布局，中间留出20px间距 */
  margin-right: 20px;
}

.column:last-child {
  margin-right: 0;
}

（4）动态字体大小

css 复制代码

.text {
  font-size: calc(1rem + 2vw); /* 基础1rem，加上视窗宽度的2% */
}

（5）复杂计算

css 复制代码

.element {
  padding: calc(10px + 2%) calc((100% - 800px) / 2);
}

calc() 函数非常适合创建灵活的布局，特别是在响应式设计中，可以根据不同的屏幕尺寸动态调整元素的尺寸和位置。所有现代浏览器都支持 calc() 函数，是 CSS 中非常实用的工具。