CSS 其他常用属性

学习

CSS 其他常用属性

2026-02-23/0/ 编辑

CSS 其他常用属性

1. 鼠标样式 (cursor)

cursor 属性用于设置鼠标指针在元素上显示的样式。

语法

cursor: 值;

常用属性值

值描述示例
default默认箭头光标鼠标移过普通文本时
pointer手型光标（可点击）链接、按钮
move移动光标拖拽元素
text文本选择光标输入框、可编辑区域
wait等待光标（漏斗）页面加载中
help帮助光标（问号）帮助提示
crosshair十字准星光标精确选择
not-allowed禁止光标（圆圈斜杠）不可点击的元素
grab / grabbing抓取光标拖拽功能
zoom-in / zoom-out放大/缩小光标缩放功能
progress进度光标（箭头加漏斗）后台处理
url('图片路径')自定义光标图片自定义样式

示例代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>鼠标样式示例</title>
    <style>
        .default { cursor: default; }
        .pointer { cursor: pointer; }
        .move { cursor: move; }
        .text { cursor: text; }
        .wait { cursor: wait; }
        .help { cursor: help; }
        .crosshair { cursor: crosshair; }
        .not-allowed { cursor: not-allowed; }
        .grab { cursor: grab; }
        .grabbing { cursor: grabbing; }
        .zoom-in { cursor: zoom-in; }
        .zoom-out { cursor: zoom-out; }

        .box {
            width: 150px;
            height: 60px;
            margin: 10px;
            padding: 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            text-align: center;
            display: inline-block;
            border-radius: 8px;
            font-size: 14px;
        }

        .container {
            padding: 30px;
            background: #f5f5f5;
        }

        h2 {
            text-align: center;
            color: #333;
            margin-bottom: 30px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>CSS 鼠标样式演示</h2>
        <p>将鼠标悬停在下面的方块上查看不同的鼠标样式</p>

        <div class="box default">default (默认)</div>
        <div class="box pointer">pointer (手型)</div>
        <div class="box move">move (移动)</div>
        <div class="box text">text (文本)</div>
        <div class="box wait">wait (等待)</div>
        <div class="box help">help (帮助)</div>
        <div class="box crosshair">crosshair (十字)</div>
        <div class="box not-allowed">not-allowed (禁止)</div>
        <div class="box grab">grab (可抓取)</div>
        <div class="box grabbing">grabbing (抓取中)</div>
        <div class="box zoom-in">zoom-in (放大)</div>
        <div class="box zoom-out">zoom-out (缩小)</div>
    </div>
</body>
</html>

实际应用场景

/* 链接和按钮 */
a {
    cursor: pointer;
}

/* 拖拽区域 */
.draggable {
    cursor: grab;
}

.draggable:active {
    cursor: grabbing;
}

/* 禁用状态 */
.disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* 自定义光标 */
.custom-cursor {
    cursor: url('custom-cursor.png'), auto;
}

2. 外轮廓 (outline)

outline 属性用于在元素周围绘制一条轮廓线，位于 border 的外侧。轮廓线不占用布局空间。

语法

outline: outline-width outline-style outline-color;

单独属性

属性描述示例
outline-width轮廓宽度thin, medium, thick, 2px
outline-style轮廓样式none, solid, dashed, dotted, double
outline-color轮廓颜色颜色值、invert（反转）
outline-offset轮廓偏移量（与边框的距离）正值向外偏移，负值向内

示例代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>外轮廓示例</title>
    <style>
        .container {
            padding: 30px;
            background: #f5f5f5;
        }

        .box {
            width: 200px;
            height: 100px;
            margin: 20px;
            padding: 20px;
            background: #fff;
            border: 5px solid #333;
            display: inline-block;
            vertical-align: top;
        }

        .example1 {
            outline: 3px solid red;
        }

        .example2 {
            outline: 5px dashed blue;
        }

        .example3 {
            outline: 4px dotted green;
            outline-offset: 10px;
        }

        .example4 {
            outline: 3px double purple;
            outline-offset: -5px;
        }

        .example5 {
            outline: 2px solid orange;
            outline-offset: 15px;
        }

        .example6 {
            outline: none; /* 移除轮廓 */
        }

        /* 聚焦时的轮廓 */
        input:focus, button:focus {
            outline: 3px solid #667eea;
            outline-offset: 3px;
        }

        .input-group {
            margin: 20px 0;
        }

        input, button {
            padding: 10px 15px;
            margin: 5px;
            border: 2px solid #ddd;
            border-radius: 5px;
            font-size: 14px;
        }

        button {
            background: #667eea;
            color: white;
            border: none;
        }

        h2 {
            text-align: center;
            color: #333;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>CSS 外轮廓演示</h2>

        <div class="box example1">
            <strong>实线轮廓</strong><br>
            outline: 3px solid red
        </div>

        <div class="box example2">
            <strong>虚线轮廓</strong><br>
            outline: 5px dashed blue
        </div>

        <div class="box example3">
            <strong>带偏移轮廓</strong><br>
            outline-offset: 10px
        </div>

        <div class="box example4">
            <strong>双线轮廓（向内）</strong><br>
            outline-offset: -5px
        </div>

        <div class="box example5">
            <strong>大偏移轮廓</strong><br>
            outline-offset: 15px
        </div>

        <div class="box example6">
            <strong>无轮廓</strong><br>
            outline: none
        </div>

        <div class="input-group">
            <h3>表单焦点轮廓效果</h3>
            <input type="text" placeholder="点击输入框查看聚焦效果">
            <button>点击按钮查看聚焦效果</button>
        </div>
    </div>
</body>
</html>

outline 与 border 的区别

特性borderoutline
布局空间占用不占用
圆角支持不支持
四边分开设置可以只能统一设置
偏移量无有 outline-offset
默认行为无表单元素聚焦时有轮廓

实际应用

/* 移除默认聚焦轮廓（不推荐，影响可访问性） */
input:focus {
    outline: none;
}

/* 自定义聚焦样式 */
input:focus {
    outline: 3px solid #667eea;
    outline-offset: 2px;
}

/* 鼠标悬停时的轮廓效果 */
.button:hover {
    outline: 2px dashed #667eea;
    outline-offset: 5px;
}

/* 图片选中效果 */
img.selected {
    outline: 4px solid #ff4757;
    outline-offset: 3px;
}

3. 溢出处理 (overflow)

overflow 属性用于控制当内容超出元素盒子时的显示方式。

语法

overflow: visible | hidden | scroll | auto | inherit;

属性值

值描述
visible默认值，内容溢出时不做处理，会显示在元素框外
hidden隐藏溢出的内容
scroll显示滚动条（无论是否溢出）
auto当内容溢出时显示滚动条
overlay滚动条覆盖在内容上，不占用空间（仅部分浏览器支持）

单独方向控制

overflow-x: visible | hidden | scroll | auto;  /* 水平方向 */
overflow-y: visible | hidden | scroll | auto;  /* 垂直方向 */

示例代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>溢出处理示例</title>
    <style>
        .container {
            padding: 30px;
            background: #f5f5f5;
        }

        h2 {
            text-align: center;
            color: #333;
            margin-bottom: 30px;
        }

        .box {
            width: 250px;
            height: 120px;
            margin: 15px;
            padding: 20px;
            background: white;
            border: 2px solid #333;
            display: inline-block;
            vertical-align: top;
        }

        .visible {
            overflow: visible;
            background: #ffe6e6;
        }

        .hidden {
            overflow: hidden;
            background: #e6ffe6;
        }

        .scroll {
            overflow: scroll;
            background: #e6e6ff;
        }

        .auto {
            overflow: auto;
            background: #fffbe6;
        }

        .overlay {
            overflow: overlay;
            background: #ffe6ff;
        }

        .content {
            width: 300px;
            height: 200px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 10px;
        }

        /* 水平溢出示例 */
        .horizontal-scroll {
            width: 300px;
            overflow-x: scroll;
            overflow-y: hidden;
            white-space: nowrap;
            border: 2px solid #333;
            padding: 15px;
            background: white;
            margin-top: 20px;
        }

        .horizontal-scroll div {
            display: inline-block;
            width: 100px;
            height: 80px;
            margin-right: 10px;
            line-height: 80px;
            text-align: center;
            color: white;
            border-radius: 5px;
        }

        /* 垂直溢出示例 */
        .vertical-scroll {
            width: 200px;
            height: 150px;
            overflow-y: auto;
            overflow-x: hidden;
            border: 2px solid #333;
            padding: 15px;
            background: white;
            margin-top: 20px;
        }

        .vertical-scroll p {
            margin: 10px 0;
            padding: 10px;
            background: #f0f0f0;
            border-radius: 4px;
        }

        .label {
            font-weight: bold;
            margin-bottom: 10px;
            display: block;
            color: #333;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>CSS 溢出处理演示</h2>

        <span class="label">visible (默认 - 内容溢出显示)</span>
        <div class="box visible">
            <div class="content">
                可见溢出内容<br>
                这段内容会溢出到盒子外部<br>
                overflow: visible
            </div>
        </div>

        <span class="label">hidden (隐藏溢出内容)</span>
        <div class="box hidden">
            <div class="content">
                隐藏溢出内容<br>
                溢出的部分会被裁剪<br>
                overflow: hidden
            </div>
        </div>

        <span class="label">scroll (始终显示滚动条)</span>
        <div class="box scroll">
            <div class="content">
                滚动溢出内容<br>
                始终显示滚动条<br>
                overflow: scroll
            </div>
        </div>

        <span class="label">auto (需要时显示滚动条)</span>
        <div class="box auto">
            <div class="content">
                自动滚动条<br>
                溢出时显示滚动条<br>
                overflow: auto
            </div>
        </div>

        <div style="clear: both; margin-top: 30px;">
            <h3>水平滚动示例</h3>
            <div class="horizontal-scroll">
                <div style="background: #ff6b6b;">项目 1</div>
                <div style="background: #4ecdc4;">项目 2</div>
                <div style="background: #45b7d1;">项目 3</div>
                <div style="background: #96ceb4;">项目 4</div>
                <div style="background: #ffeaa7;">项目 5</div>
                <div style="background: #dfe6e9;">项目 6</div>
            </div>
        </div>

        <div style="clear: both; margin-top: 30px;">
            <h3>垂直滚动示例</h3>
            <div class="vertical-scroll">
                <p>段落 1 - 垂直滚动内容</p>
                <p>段落 2 - 继续滚动</p>
                <p>段落 3 - 更多内容</p>
                <p>段落 4 - 不断向下</p>
                <p>段落 5 - 滚动查看</p>
                <p>段落 6 - 内容很多</p>
                <p>段落 7 - 继续滚动</p>
            </div>
        </div>
    </div>
</body>
</html>

实际应用场景

/* 固定高度的消息框 */
.message-box {
    height: 200px;
    overflow-y: auto;
}

/* 水平滚动卡片 */
.card-container {
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: thin;
}

/* 图片裁剪 - 正方形头像 */
.avatar {
    width: 150px;
    height: 150px;
    overflow: hidden;
    border-radius: 50%;
}

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 文本省略（单行） */
.text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 自定义滚动条样式（Webkit浏览器） */
.custom-scroll::-webkit-scrollbar {
    width: 8px;
}

.custom-scroll::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-scroll::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.custom-scroll::-webkit-scrollbar-thumb:hover {
    background: #555;
}

滚动条样式定制

/* 隐藏滚动条但保留滚动功能 */
.no-scrollbar {
    scrollbar-width: none;  /* Firefox */
    -ms-overflow-style: none;  /* IE 10+ */
}

.no-scrollbar::-webkit-scrollbar {
    display: none;  /* Chrome/Safari/Opera */
}

/* 轻量级滚动条 */
.thin-scrollbar {
    scrollbar-width: thin;
}

.thin-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.thin-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

4. 垂直对齐 (vertical-align)

vertical-align 属性用于设置元素的垂直对齐方式，主要影响行内元素、表格单元格等。

语法

vertical-align: 值;

属性值

关键字值

值描述
baseline默认值，元素放置在父元素的基线上
top元素的顶端与行框的顶端对齐
middle元素放置在父元素的中部
bottom元素的底部与行框的底部对齐
text-top元素的顶端与父元素字体的顶端对齐
text-bottom元素的底部与父元素字体的底部对齐
sub垂直对齐到下标位置
super垂直对齐到上标位置

长度值和百分比

值描述
length使用长度值（如 10px, 2em）升高或降低元素
%使用 line-height 百分比升高或降低元素

示例代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>垂直对齐示例</title>
    <style>
        .container {
            padding: 30px;
            background: #f5f5f5;
        }

        h2 {
            text-align: center;
            color: #333;
            margin-bottom: 30px;
        }

        .demo-box {
            background: white;
            padding: 20px;
            margin: 20px 0;
            border: 2px solid #ddd;
            border-radius: 8px;
        }

        .demo-title {
            font-weight: bold;
            color: #667eea;
            margin-bottom: 15px;
            font-size: 16px;
        }

        .inline-demo {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 5px;
            margin: 10px 0;
            font-size: 18px;
        }

        .inline-demo span {
            display: inline-block;
            padding: 5px 10px;
            margin: 0 5px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 4px;
            font-size: 14px;
        }

        .baseline { vertical-align: baseline; }
        .top { vertical-align: top; }
        .middle { vertical-align: middle; }
        .bottom { vertical-align: bottom; }
        .text-top { vertical-align: text-top; }
        .text-bottom { vertical-align: text-bottom; }
        .sub { vertical-align: sub; }
        .super { vertical-align: super; }
        .length { vertical-align: 10px; }
        .negative { vertical-align: -10px; }

        /* 图片对齐示例 */
        .image-demo {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 5px;
            margin: 10px 0;
        }

        .image-demo img {
            width: 40px;
            height: 40px;
            margin: 0 10px;
        }

        /* 表格对齐示例 */
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 10px 0;
        }

        td, th {
            padding: 12px;
            border: 1px solid #ddd;
            text-align: center;
        }

        th {
            background: #667eea;
            color: white;
        }

        .align-top { vertical-align: top; }
        .align-middle { vertical-align: middle; }
        .align-bottom { vertical-align: bottom; }

        .cell-content {
            padding: 20px;
            background: #f0f0f0;
            height: 60px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>CSS 垂直对齐演示</h2>

        <!-- 基线对齐 -->
        <div class="demo-box">
            <div class="demo-title">1. baseline (默认 - 基线对齐)</div>
            <div class="inline-demo">
                基线文本 <span class="baseline">baseline</span> 正常显示
            </div>
        </div>

        <!-- 顶部对齐 -->
        <div class="demo-box">
            <div class="demo-title">2. top (顶部对齐)</div>
            <div class="inline-demo">
                顶部文本 <span class="top">top</span> 顶部对齐
            </div>
        </div>

        <!-- 中部对齐 -->
        <div class="demo-box">
            <div class="demo-title">3. middle (中部对齐)</div>
            <div class="inline-demo">
                中部文本 <span class="middle">middle</span> 中部对齐
            </div>
        </div>

        <!-- 底部对齐 -->
        <div class="demo-box">
            <div class="demo-title">4. bottom (底部对齐)</div>
            <div class="inline-demo">
                底部文本 <span class="bottom">bottom</span> 底部对齐
            </div>
        </div>

        <!-- 文本顶部对齐 -->
        <div class="demo-box">
            <div class="demo-title">5. text-top (文本顶部对齐)</div>
            <div class="inline-demo">
                文本顶部 <span class="text-top">text-top</span> 对齐
            </div>
        </div>

        <!-- 文本底部对齐 -->
        <div class="demo-box">
            <div class="demo-title">6. text-bottom (文本底部对齐)</div>
            <div class="inline-demo">
                文本底部 <span class="text-bottom">text-bottom</span> 对齐
            </div>
        </div>

        <!-- 上标和下标 -->
        <div class="demo-box">
            <div class="demo-title">7. sub 和 super (下标和上标)</div>
            <div class="inline-demo">
                普通文本 <span class="sub">sub</span> 正常文本 <span class="super">super</span> 继续
            </div>
        </div>

        <!-- 长度值 -->
        <div class="demo-box">
            <div class="demo-title">8. 长度值 (像素偏移)</div>
            <div class="inline-demo">
                正常文本 <span class="length">+10px</span> 正常文本 <span class="negative">-10px</span> 继续
            </div>
        </div>

        <!-- 图片对齐示例 -->
        <div class="demo-box">
            <div class="demo-title">9. 图片与文本的对齐</div>
            <div class="image-demo">
                <span>baseline: </span>
                <img src="https://via.placeholder.com/40" style="vertical-align: baseline;">
                <span>middle: </span>
                <img src="https://via.placeholder.com/40" style="vertical-align: middle;">
                <span>top: </span>
                <img src="https://via.placeholder.com/40" style="vertical-align: top;">
            </div>
        </div>

        <!-- 表格对齐示例 -->
        <div class="demo-box">
            <div class="demo-title">10. 表格单元格垂直对齐</div>
            <table>
                <tr>
                    <th>列 1</th>
                    <th>列 2 (top)</th>
                    <th>列 3 (middle)</th>
                    <th>列 4 (bottom)</th>
                </tr>
                <tr>
                    <td class="align-middle">
                        <div class="cell-content" style="height: 80px;">中间</div>
                    </td>
                    <td class="align-top">
                        <div class="cell-content">顶部</div>
                    </td>
                    <td class="align-middle">
                        <div class="cell-content">中间</div>
                    </td>
                    <td class="align-bottom">
                        <div class="cell-content">底部</div>
                    </td>
                </tr>
            </table>
        </div>

        <!-- 实际应用：图标与文本 -->
        <div class="demo-box">
            <div class="demo-title">11. 实际应用：图标与文本对齐</div>
            <div class="inline-demo">
                <span style="font-size: 24px;">★</span>
                <span style="vertical-align: middle; background: #667eea; padding: 5px 15px;">
                    按钮文本
                </span>
            </div>
        </div>
    </div>
</body>
</html>

实际应用场景

/* 图标与文本对齐 */
.icon-text {
    font-size: 16px;
}

.icon-text i {
    vertical-align: middle;
    margin-right: 5px;
}

/* 输入框前的图标 */
.input-group {
    display: inline-block;
}

.input-group i {
    vertical-align: middle;
    margin-right: 5px;
    color: #999;
}

/* 表格单元格对齐 */
table td {
    vertical-align: middle;
}

/* 图片和文字居中 */
.image-with-text img {
    vertical-align: middle;
    margin-right: 10px;
}

/* 单选框和复选框对齐 */
input[type="checkbox"],
input[type="radio"] {
    vertical-align: middle;
    margin-right: 5px;
}

/* 上下标 */
sub, sup {
    font-size: 0.8em;
    line-height: 0;
    position: relative;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

/* 清除图片底部间隙（经典问题） */
img {
    vertical-align: top;  /* 或 display: block; */
}

/* 按钮内图标对齐 */
.button-icon {
    vertical-align: middle;
}

常见问题解决

/* 问题：图片底部有空白间隙 */
/* 解决方案 1：使用 vertical-align */
img {
    vertical-align: bottom;
}

/* 解决方案 2：使用 display */
img {
    display: block;
}

/* 解决方案 3：使用 font-size: 0 */
.parent {
    font-size: 0;
}

.parent img {
    vertical-align: middle;
}

/* 问题：图标和文字不对齐 */
.icon-text {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* 或者使用 vertical-align */
.icon-with-text {
    line-height: 1.5;
}

.icon-with-text::before {
    content: "★";
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
}

5. 综合示例

示例：卡片组件

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>综合示例</title>
    <style>
        .card {
            width: 300px;
            padding: 20px;
            background: white;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
            outline: 2px solid #667eea;
            outline-offset: 3px;
        }

        .card-image {
            width: 100%;
            height: 150px;
            overflow: hidden;
            margin-bottom: 15px;
        }

        .card-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .card-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
        }

        .card-title i {
            margin-right: 8px;
            vertical-align: middle;
        }

        .card-content {
            height: 80px;
            overflow-y: auto;
            font-size: 14px;
            color: #666;
            line-height: 1.6;
        }

        .card-actions {
            margin-top: 15px;
            padding-top: 15px;
            border-top: 1px solid #eee;
        }

        .btn {
            display: inline-block;
            padding: 8px 16px;
            background: #667eea;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            vertical-align: middle;
            margin-right: 10px;
        }

        .btn:hover {
            background: #5568d3;
        }

        .btn-secondary {
            background: #e0e0e0;
            color: #333;
        }

        .btn-secondary:hover {
            background: #d0d0d0;
        }

        .disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }

        .container {
            padding: 40px;
            background: #f5f5f5;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            flex-wrap: wrap;
            gap: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="card">
            <div class="card-image">
                <img src="https://via.placeholder.com/300x150" alt="Card Image">
            </div>
            <div class="card-title">
                <span>★</span> 卡片标题
            </div>
            <div class="card-content">
                这是一个综合示例卡片，展示了 cursor、outline、overflow 和 vertical-align 属性的实际应用效果。内容可以滚动显示...
            </div>
            <div class="card-actions">
                <button class="btn">主要操作</button>
                <button class="btn btn-secondary">次要操作</button>
                <button class="btn btn-secondary disabled">禁用按钮</button>
            </div>
        </div>
    </div>
</body>
</html>

学习总结

属性主要用途常用场景记忆要点
cursor设置鼠标指针样式按钮、链接、拖拽、禁用状态不同交互状态用不同鼠标样式
outline绘制元素外轮廓表单聚焦、选中状态、悬停效果不占用布局空间，可设置偏移
overflow控制内容溢出滚动区域、图片裁剪、文本省略可分别控制水平和垂直方向
vertical-align控制垂直对齐图标文本、表格单元格、表单元素主要用于行内元素和表格

关键点提示

  1. cursor: 增强用户体验，提供直观的交互反馈
  2. outline: 不影响布局，适合做聚焦和悬停效果
  3. overflow: 处理内容溢出的核心属性，常与 white-space 和 text-overflow 配合
  4. vertical-align: 只影响行内元素和表格单元格，对块级元素无效

常见错误

  1. ❌ 忽略可访问性，直接 outline: none（应该用 outline-offset 或 box-shadow 替代）
  2. ❌ 对块级元素使用 vertical-align（无效，应该用 Flexbox 或 Grid）
  3. ❌ 滚动条样式兼容性未处理（需要加浏览器前缀）
  4. ❌ overflow: hidden 后没有考虑溢出内容的访问方式

最佳实践

/* 可访问的焦点样式 */
:focus-visible {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

/* 响应式滚动 */
.scroll-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* iOS 平滑滚动 */
}

/* 图标与文本对齐 */
.icon-text {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
}

相关资源

本学习笔记记录了 CSS 中四个常用的辅助属性，通过丰富的示例和实际应用场景帮助理解和记忆。

猜你喜欢