CSS笔记CSS用于网页样式与布局，含选择器、优先级、文本/背景等；盒模型是布局基础，文档流控制含浮动、定位、Flex、

3.3.1、背景渐变技巧

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>明显的背景渐变示例</title>
    <style>
        body {
            margin: 0;
            padding: 20px;
            font-family: Arial, sans-serif;
        }

        .gradient-container {
            margin-bottom: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        /* 对角线性渐变（高对比） */
        .linear-gradient-45 {
            width: 100%;
            height: 200px;
            background: linear-gradient(45deg, #ff0000, #0000ff, #00ff00);
        }

        /* 径向渐变（中心扩散） */
        .radial-gradient {
            width: 100%;
            height: 200px;
            background: radial-gradient(ellipse at center, #ffff00 0%, #800080 100%);
        }

        /* 水平多色渐变 */
        .horizontal-multi-color {
            width: 100%;
            height: 200px;
            background: linear-gradient(to right, #ff7f00, #ff0080, #9900ff, #00ffff);
        }
    </style>
</head>

<body>
    <h2>对角线性渐变（红→蓝→绿）</h2>
    <div class="gradient-container linear-gradient-45"></div>

    <h2>径向渐变（黄→紫）</h2>
    <div class="gradient-container radial-gradient"></div>

    <h2>水平多色渐变（橙→粉→紫→青）</h2>
    <div class="gradient-container horizontal-multi-color"></div>
</body>

</html>

3.3.2、文字镂空技巧

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>CSS 文字裁剪（background-clip: text）- 优化版</title>
    <style>
        /* 全局样式：重置默认边距，统一字体 */
        * {
            margin: 0;
            padding: 0;
            font-family: "微软雅黑", sans-serif;
        }

        /* 容器通用样式 */
        .container {
            width: 80%;
            margin: 40px auto;
            padding: 20px;
            border: 1px solid #eee;
            border-radius: 8px;
            background-color: #f9f9f9;
        }

        /* 标题样式 */
        .demo-title {
            font-size: 20px;
            color: #333;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px dashed #ccc;
        }

        /* ========== 核心：图片文字裁剪 ========== */
        .text-clip-img {
            font-size: 90px;
            font-weight: 900;    /* 加粗文字，让裁剪范围更明显 */
            text-align: center;

            /* 1. 设置背景图（核心素材） */
            background: url('https://picsum.photos/1000/500') no-repeat center/cover;

            /* 2. 背景裁剪到文字（核心属性） */
            background-clip: text;
            -webkit-background-clip: text;    /* 兼容Chrome/Safari */

            /* 3. 文字透明（必加，否则遮挡背景） */
            color: transparent;

            /* 可选：加文字描边，增强文字轮廓（避免背景太淡看不清） */
            -webkit-text-stroke: 1px rgba(0, 0, 0, 0.2);
        }

        /* ========== 拓展：渐变文字裁剪 ========== */
        .text-clip-gradient {
            font-size: 90px;
            font-weight: 900;
            text-align: center;
            margin-top: 30px;

            /* 1. 渐变背景（替代图片） */
            background: linear-gradient(135deg,
                    #ff6b6b, #4ecdc4, #f9c74f);

            /* 2. 背景裁剪到文字 */
            background-clip: text;
            -webkit-background-clip: text;

            /* 3. 文字透明 */
            color: transparent;
        }

        /* 普通文字对比项 */
        .normal-text {
            font-size: 90px;
            font-weight: 900;
            text-align: center;
            color: #333;
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <div class="container">
        <h3 class="demo-title">1. 图片文字裁剪（背景仅显示在文字内）</h3>
        <div class="text-clip-img">CSS文字裁剪</div>

        <h3 class="demo-title">2. 渐变文字裁剪（更常用）</h3>
        <div class="text-clip-gradient">渐变文字效果</div>

        <h3 class="demo-title">3. 普通文字（对比参考）</h3>
        <div class="normal-text">普通加粗文字</div>
    </div>
</body>

</html>

3.3.3、精灵图（CSS Sprite）技巧

CSS 精灵图是一种将多个小图标或图像合并到一张大图中，通过调整 background-position 属性来显示特定部分图像的前端优化技术。

核心原理：

合并图像：把多个小图标（如导航菜单、按钮图标）合并成一张大图，便于统一管的同时，还可以减少 HTTP 请求次数，提升性能。
定位显示：通过 background-position 精确控制背景图的位置，只显示大图中对应小图标的那一部分。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>真实项目精灵图使用示例</title>
    <style>
        /* 精灵图基础样式：核心是匹配单个图标尺寸+背景图路径 */
        .sprite-icon {
            width: 40px;          /* 单个图标的宽度 */
            height: 40px;         /* 单个图标的高度 */
            background-image: url("./images/my-sprite.png"); /* 本地精灵图路径 */
            background-repeat: no-repeat; /* 禁止背景重复 */
            display: inline-block; /* 让图标横向排列 */
            margin: 10px;          /* 图标间距 */
        }

        /* 定位显示不同图标（核心：负数偏移） */
        .icon-home {
            background-position: 0 0;        /* 显示第一个图标（红色） */
        }
        .icon-cart {
            background-position: -40px 0;    /* 显示第二个图标（蓝色） */
        }
        .icon-user {
            background-position: -80px 0;    /* 显示第三个图标（绿色） */
        }
    </style>
</head>
<body>
    <!-- 直接使用类名即可显示对应图标 -->
    <div class="sprite-icon icon-home"></div>
    <div class="sprite-icon icon-cart"></div>
    <div class="sprite-icon icon-user"></div>
</body>
</html>

3.8.1、溢出显示省略号技巧

/* 单行文字省略号（推荐完整版，兼容中文/英文/URL） */
.text-ellipsis-single {
  /* 核心必写：实现省略号的基础 */
  white-space: nowrap;        /* 强制文本单行显示，不换行 */
  overflow: hidden;           /* 隐藏超出容器的内容 */
  text-overflow: ellipsis;    /* 溢出部分显示省略号 */
  
  /* 兼容优化：处理长单词/URL/无空格字符，避免撑破容器 */
  word-break: break-all;      /* 兜底：允许任意字符处强制换行 */
  overflow-wrap: break-word;  /* 优先：长单词/URL内部换行，更友好 */
  
  /* 必选：固定容器宽度（省略号生效的核心前提） */
  width: 200px; /* 可改为100%、max-width等，根据布局调整 */
}

多行文字溢出显示省略号技巧

生效前提：必须给容器设置固定宽度；webkit 内核（Chrome/Safari/ 移动端）兼容，Firefox/IE 需用伪元素兜底

/* 多行文字省略号（主流浏览器兼容，webkit内核优先） */
.text-ellipsis-multi {
  /* 核心必写：控制行数和溢出 */
  display: -webkit-box;       /* 弹性盒模型（webkit内核） */
  -webkit-line-clamp: 3;      /* 显示的最大行数（可改为2/4等） */
  -webkit-box-orient: vertical; /* 垂直排列，配合line-clamp生效 */
  overflow: hidden;           /* 隐藏超出行数的内容 */
  
  /* 兼容优化：处理长文本换行 */
  word-break: break-all;
  overflow-wrap: break-word;
  
  /* 可选：固定容器宽度 + 行高（保证行数精准） */
  width: 200px;
  line-height: 1.5; /* 行高影响最终高度，建议设置 */
}

3.8.2、行内垂直对齐技巧

3.8.3、图片、视频等比缩放技巧

3.8.4、滚动技巧

3.9、样式初始化

文件地址下载 或者使用下面精简版：


* {
    /* 核心：盒模型统一为border-box，尺寸计算更直观 */
    box-sizing: border-box;
    /* 清除默认内外边距 */
    margin: 0;
    padding: 0;
    /* 防止文本溢出时出现滚动条 */
    word-wrap: break-word;
}

/* 清除列表默认样式（ul/ol） */
ul,
ol {
    list-style: none;
}

/* 清除链接默认样式 */
a {
    text-decoration: none;
    color: inherit;    /* 继承父元素文字颜色 */
    /* 去掉点击高亮（移动端） */
    -webkit-tap-highlight-color: transparent;
}

/* 清除表格默认边框 */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* 图片自适应，去掉默认边框 */
img {
    max-width: 100%;
    height: auto;
    border: none;
    /* 解决图片与文字基线对齐的间隙问题 */
    vertical-align: middle;
}

/* 表单元素统一样式 */
input,
button,
textarea,
select {
    font: inherit;    /* 继承全局字体样式 */
    outline: none;    /* 清除默认焦点轮廓 */
    border: none;
    background: transparent;
}

/* 清除textarea默认滚动条（可选） */
textarea {
    resize: vertical;    /* 仅允许垂直拉伸 */
    overflow: auto;
}

/* 清除button默认样式 */
button {
    cursor: pointer;
    /* 去掉点击高亮（移动端） */
    -webkit-tap-highlight-color: transparent;
}

/* 清除浮动通用类（解决高度塌陷） */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* 隐藏元素通用类 */
.hide {
    display: none !important;
}

/* 清除浮动兼容（低版本浏览器） */
.clear {
    clear: both;
    height: 0;
    overflow: hidden;
}

四、字体图标（Icon Fonts）

字体图标是一种将网页图标以字体文件形式嵌入开发的前端技术，其本质是特殊的字体，因此开发者可像控制普通文字一样，通过 CSS 灵活调整图标的颜色、大小、阴影、透明度等样式，是网页开发中主流的图标解决方案。

区别于图片图标和精灵图，字体图标以 “矢量字体” 为载体，完美解决了图片图标放大模糊、精灵图定位复杂的痛点，是兼顾性能与灵活性的图标实现方式。
使用步骤：
- 下载字体图标文件：从官网或设计师处获取字体图标压缩包（下载代码），解压后保存到项目目录中。
- 引入 HTML 文件：在 HTML 中通过 <link> 标签引入压缩包内的 CSS 文件，完成字体图标的加载。
- 使用字体图标：通过在 HTML 标签上添加对应类名来调用图标，之后可直接用 CSS 属性（如 color、font-size）调整图标的颜色、大小、位置等样式。

字体图标.png

推荐网站
- iconfont（阿里字体库）：阿里官方推出的字体图标库，整合了淘宝图标库与阿里妈妈图标库资源，核心优势为免费可用
- IcoMoon：行业内最早推出自定义图标字体生成器的图标库，支持开发者按需筛选、生成专属字体图标包
- Bootstrap Icons：隶属于 Bootstrap 生态的专属图标库，设计风格与 Bootstrap 框架高度适配，使用方式简单便捷
- Font Awesome：目前市面上图标资源最全面的字体图标库，分为免费版和 Pro 付费版两个版本，满足不同开发需求

六、文档流

6.3、弹性布局（Flexbox）

6.3.1、Flexbox 核心概念

Flexbox（弹性盒子布局）是 CSS 专为一维布局设计的核心方案，通过 “父容器控制子元素” 的模式，无需脱离文档流就能实现元素的对齐、分布和空间分配，完美解决了浮动布局需清除浮动、定位布局需手动计算位置的痛点，是现代响应式开发中最常用的布局方式。

其核心优势在于灵活性和简洁性：不管是横向还是纵向排列、元素对齐、自适应空间分配，只需通过少量属性就能实现，且天然适配不同屏幕尺寸，无需复杂的计算和兼容处理。

关键术语理解：

容器（Container）：设置 display: flex 的父元素，所有直接子元素会自动成为弹性项目，容器的属性将统一控制子元素的布局；
项目（Item）：容器内的直接子元素，不再遵循块级 / 行内元素的默认排列规则，而是受容器属性约束；
主轴（Main Axis）：子元素的排列方向，默认是水平向左（可通过 flex-direction 修改）；
交叉轴（Cross Axis）：与主轴垂直的方向，默认是垂直向下，随主轴方向同步变化。

6.3.2、容器核心属性

display：定义弹性容器，开启弹性布局模式
- flex（块级弹性容器，独占一行，默认）、inline-flex（行内弹性容器，与其他元素同行显示）
flex-flow：flex-direction 和 flex-wrap 的简写属性
- flex-direction：控制主轴方向，决定子元素的排列方向
  - row（水平向左，默认）、row-reverse（水平向右）、column（垂直向下）、column-reverse（垂直向上）
- flex-wrap：控制子元素是否换行，处理空间不足时的布局
  - nowrap（不换行，子元素压缩适配，默认）、wrap（自动换行，交叉轴方向扩展）、wrap-reverse（反向换行，新行在上方 / 左侧）
justify-content：控制子元素在主轴方向的对齐和分布
- flex-start（靠主轴起点对齐，默认）、flex-end（靠主轴终点对齐）、center（主轴居中对齐）、space-between（两端对齐，子元素间距相等）、space-around（子元素两侧间距相等）、space-evenly（所有间距含首尾与容器间距完全相等）
align-items：控制子元素在交叉轴方向的对齐（单行场景）
- stretch（子元素拉伸至与容器交叉轴高度一致，默认，子元素无固定高度时生效）、flex-start（靠交叉轴起点对齐）、flex-end（靠交叉轴终点对齐）、center（交叉轴居中对齐）、baseline（按子元素文字基线对齐）
align-content：控制多行子元素在交叉轴的整体对齐（仅换行后生效）
- flex-start、flex-end、center、space-between、space-around、space-evenly、stretch（默认）
gap：控制子元素之间的间距，无需通过 margin 计算
- 单值（如 15px，行间距和列间距均为 15px）、双值（如 10px 20px，行间距 10px，列间距 20px）
- row-gap：单独控制弹性项目的行间距（纵向间距）
  - 取值：10px、1em、2% 等长度 / 百分比值
- column-gap：单独控制弹性项目的列间距（横向间距）
  - 取值：15px、2em、3% 等长度 / 百分比值

6.3.3、项目核心属性

flex：flex-grow/flex-shrink/flex-basis 简写属性
- flex-grow：定义子元素的放大比例，分配剩余空间
  - 0（不放大，默认）、1（平均分配剩余空间）、2（分配 2 倍于1的剩余空间）等非负整数
- flex-shrink：定义子元素的缩小比例，处理空间不足场景
  - 1（自动缩小，默认）、0（不缩小，固定宽度元素常用）等非负整数
- flex-basis：定义子元素在主轴上的初始大小
  - auto（由内容决定，默认）、200px（固定宽度）、50%（相对父容器宽度）、content（根据内容自动调整）等
align-self：单独控制某个子元素的交叉轴对齐方式，覆盖容器 align-items
- auto（继承容器属性，默认）、stretch、flex-start、flex-end、center、baseline
order：控制子元素的排列顺序
- 0（默认）、-1（排在最前）、1（排在最后）等整数，数值越小越靠前

6.3.4、Flexbox 空间分配核心逻辑

案例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox 核心属性&实战避坑完整示例</title>
    <style>
        /* 通用样式重置 - 消除默认样式干扰 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            padding: 2rem;
            font-family: "Microsoft Yahei", "PingFang SC", sans-serif;
            line-height: 1.8;
            color: #333;
            background-color: #f8f9fa;
        }
        .demo-container {
            max-width: 1200px;
            margin: 0 auto;
        }
        h2 {
            margin: 2.5rem 0 1rem;
            color: #2c3e50;
            border-left: 4px solid #3498db;
            padding-left: 1rem;
        }
        .demo-box {
            margin: 1.5rem 0;
            padding: 1.5rem;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }
        .flex-item {
            background-color: #3498db;
            color: white;
            padding: 1.2rem;
            border-radius: 6px;
            text-align: center;
            font-size: 1rem;
            /* 方便观察尺寸变化 */
            transition: all 0.2s ease;
        }
        .flex-item.warning {
            background-color: #e74c3c;
            border-color: #c0392b;
        }
        .flex-item.success {
            background-color: #2ecc71;
            border-color: #27ae60;
        }
        .desc {
            margin-top: 1rem;
            padding: 1rem;
            background-color: #f5f7fa;
            border-radius: 4px;
            font-size: 0.95rem;
            color: #555;
        }
        .desc strong {
            color: #e74c3c;
        }

        /* ==================== 核心场景样式 ==================== */

        /* 1. 基础Flex布局 - 主轴/交叉轴对齐 */
        .flex-basic {
            display: flex; /* 核心：开启Flex布局 */
            width: 100%;
            height: 200px; /* 固定交叉轴尺寸，验证align-items */
            gap: 15px; /* 替代margin，无首尾间距问题 */
            /* 主轴对齐：剩余空间均匀分布在项目之间 */
            justify-content: space-between;
            /* 交叉轴对齐：项目垂直居中 */
            align-items: center;
            border: 1px solid #eee;
        }
        .flex-basic .item1 {
            /* 固定尺寸：flex-grow:0 不放大, flex-shrink:0 不缩小, flex-basis:100px 基础尺寸 */
            flex: 0 0 100px;
        }
        .flex-basic .item2 {
            /* 自适应填充：flex:1 等价于 flex-grow:1; flex-shrink:1; flex-basis:0% */
            flex: 1;
        }
        .flex-basic .item3 {
            flex: 0 0 120px;
            /* 单独覆盖交叉轴对齐：优先级高于align-items */
            align-self: flex-end;
        }

        /* 2. 空间不足 - 不换行 + flex-shrink 缩小（含min-width限制） */
        .flex-shrink-demo {
            display: flex;
            width: 300px; /* 容器尺寸不足 */
            flex-wrap: nowrap; /* 默认不换行 */
            gap: 10px;
            border: 1px solid #eee;
            overflow-x: auto; /* 溢出时显示滚动条 */
        }
        .flex-shrink-demo .item1 {
            flex-basis: 200px;
            flex-shrink: 1; /* 允许缩小，权重1 */
            min-width: 150px; /* 最小宽度限制：缩小到150px后不再缩小 */
        }
        .flex-shrink-demo .item2 {
            flex-basis: 150px;
            flex-shrink: 2; /* 允许缩小，权重2（缩小幅度更大） */
        }

        /* 3. 空间不足 - 换行 + 多行对齐（align-content） */
        .flex-wrap-demo {
            display: flex;
            width: 400px;
            flex-wrap: wrap; /* 换行核心属性 */
            gap: 20px;
            height: 350px; /* 固定交叉轴尺寸，让align-content生效 */
            justify-content: center; /* 单行内主轴居中 */
            align-items: center; /* 单行内交叉轴居中 */
            align-content: space-around; /* 多行之间分配剩余空间 */
            border: 1px solid #eee;
        }
        .flex-wrap-demo .item {
            flex-basis: 150px;
            /* 单个项目超容器尺寸时，会独占一行并拉伸至容器宽度 */
            /* flex-basis: 450px; */
        }

        /* 4. 实战避坑 - min-width:0 解决文本过长不缩小 */
        .flex-text-fix {
            display: flex;
            width: 250px;
            border: 1px solid #eee;
            margin-top: 1rem;
        }
        .flex-text-fix .bad {
            flex-shrink: 1;
            /* 默认min-width:auto，文本过长时无法缩小，导致容器溢出 */
            background-color: #e67e22;
        }
        .flex-text-fix .good {
            flex-shrink: 1;
            min-width: 0; /* 关键：允许缩小到0 */
            word-break: break-all; /* 文本换行 */
            background-color: #9b59b6;
        }

        /* 5. 响应式布局 - 无媒体查询的自适应换行 */
        .flex-responsive {
            display: flex;
            flex-wrap: wrap; /* 核心：宽度不足时自动换行 */
            gap: 1rem;
            margin-top: 1rem;
        }
        .flex-responsive .card {
            /* 基础尺寸：每行至少显示2个，不足时换行 */
            flex-basis: calc(50% - 0.5rem);
            /* 自适应填充：空间充足时均分 */
            flex-grow: 1;
            padding: 1rem;
            background-color: #1abc9c;
            color: white;
            border-radius: 6px;
        }
        /* 移动端适配（可选）- 演示媒体查询结合flex */
        @media (max-width: 480px) {
            .flex-responsive .card {
                flex-basis: 100%; /* 移动端独占一行 */
            }
        }

        /* 6. 经典布局 - 头部+侧边栏+主内容+底部 */
        .flex-layout {
            display: flex;
            flex-direction: column; /* 主轴改为垂直方向 */
            width: 100%;
            height: 400px; /* 固定容器高度 */
            border: 1px solid #eee;
            margin-top: 1rem;
        }
        .flex-layout .header {
            flex: 0 0 60px; /* 固定高度 */
            background-color: #34495e;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .flex-layout .main {
            display: flex; /* 嵌套Flex */
            flex: 1; /* 自适应填充剩余高度 */
        }
        .flex-layout .sidebar {
            flex: 0 0 200px; /* 固定宽度 */
            background-color: #2980b9;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .flex-layout .content {
            flex: 1; /* 自适应填充剩余宽度 */
            background-color: #ecf0f1;
            color: #333;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .flex-layout .footer {
            flex: 0 0 60px; /* 固定高度 */
            background-color: #34495e;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>
<body>
    <div class="demo-container">
        <h1>Flexbox 核心属性&实战避坑完整示例</h1>

        <!-- 1. 基础Flex布局 - 主轴/交叉轴对齐 + flex简写 -->
        <h2>1. 基础布局：主轴/交叉轴对齐 + flex简写</h2>
        <div class="demo-box">
            <div class="flex-basic">
                <div class="flex-item item1">固定100px</div>
                <div class="flex-item item2">自适应填充</div>
                <div class="flex-item item3">单独对齐</div>
            </div>
            <div class="desc">
                核心属性：<strong>justify-content（主轴对齐）</strong>、<strong>align-items（交叉轴对齐）</strong>、<strong>align-self（单独对齐）</strong>、<strong>flex:0 0 固定值（固定尺寸）</strong>、<strong>flex:1（自适应填充）</strong>
            </div>
        </div>

        <!-- 2. 空间不足 - 不换行 + flex-shrink 缩小 -->
        <h2>2. 空间不足：不换行 + flex-shrink 缩小（含min-width限制）</h2>
        <div class="demo-box">
            <div class="flex-shrink-demo">
                <div class="flex-item item1">min-width:150px</div>
                <div class="flex-item item2">flex-shrink:2</div>
            </div>
            <div class="desc">
                核心逻辑：容器宽300px < 项目总占用(200+150+10=360px) → 按 <strong>flex-shrink × flex-basis</strong> 权重缩小；<strong>min-width</strong> 限制项目最小尺寸，缩小到限制后不再缩小，剩余缩减量由其他项目承担
            </div>
        </div>

        <!-- 3. 空间不足 - 换行 + 多行对齐 -->
        <h2>3. 空间不足：换行 + 多行对齐（align-content）</h2>
        <div class="demo-box">
            <div class="flex-wrap-demo">
                <div class="flex-item item">项目1</div>
                <div class="flex-item item">项目2</div>
                <div class="flex-item item">项目3</div>
                <div class="flex-item item">项目4</div>
            </div>
            <div class="desc">
                核心属性：<strong>flex-wrap: wrap（换行）</strong>、<strong>align-content（多行交叉轴对齐）</strong>；注意：容器无固定高度时，align-content 失效，仅 align-items 生效
            </div>
        </div>

        <!-- 4. 实战避坑 - min-width:0 解决文本过长不缩小 -->
        <h2>4. 实战避坑：min-width:0 解决文本过长不缩小</h2>
        <div class="demo-box">
            <div class="flex-text-fix">
                <div class="flex-item bad">未设置min-width:0：这是一段超长文本导致容器溢出这是一段超长文本导致容器溢出</div>
            </div>
            <div class="flex-text-fix">
                <div class="flex-item good">设置min-width:0：这是一段超长文本可换行不溢出这是一段超长文本可换行不溢出</div>
            </div>
            <div class="desc">
                避坑要点：部分浏览器默认 <strong>min-width: auto</strong>，文本过长时项目无法缩小 → 设置 <strong>min-width: 0 + word-break: break-all</strong> 解决
            </div>
        </div>

        <!-- 5. 响应式布局 - 无媒体查询的自适应换行 -->
        <h2>5. 响应式布局：无媒体查询的自适应换行</h2>
        <div class="demo-box">
            <div class="flex-responsive">
                <div class="card">卡片1</div>
                <div class="card">卡片2</div>
                <div class="card">卡片3</div>
                <div class="card">卡片4</div>
            </div>
            <div class="desc">
                实战技巧：<strong>flex-wrap: wrap + flex-basis: 百分比</strong> 实现无媒体查询自适应；移动端可结合媒体查询设置 flex-basis:100% 独占一行
            </div>
        </div>

        <!-- 6. 经典布局 - 头部+侧边栏+主内容+底部 -->
        <h2>6. 经典布局：垂直Flex + 嵌套Flex实现页面布局</h2>
        <div class="demo-box">
            <div class="flex-layout">
                <div class="header">头部（60px）</div>
                <div class="main">
                    <div class="sidebar">侧边栏（200px）</div>
                    <div class="content">主内容（自适应）</div>
                </div>
                <div class="footer">底部（60px）</div>
            </div>
            <div class="desc">
                核心技巧：<strong>flex-direction: column</strong> 实现垂直布局；嵌套Flex实现侧边栏+主内容的水平布局；flex:1 让主内容自适应填充剩余空间
            </div>
        </div>
    </div>
</body>
</html>

6.4、网格布局（Grid）

6.4.1、Grid 核心概念

Grid（网格布局）是 CSS 专为二维布局设计的核心方案，通过“行+列”的二维网格系统，精准控制元素在水平和垂直两个维度的位置与尺寸，解决了 Flexbox 一维布局难以实现的复杂排版（如固定行列数、跨行跨列、不规则网格）痛点，是现代复杂页面布局的首选方案。

其核心优势在于精准性和二维可控性：不管是固定行列的商品网格、不规则的卡片布局，还是页面整体的“头部+侧边栏+主内容+底部”布局，只需定义网格行列规则，就能让元素自动填充到指定位置，无需嵌套多层容器。

关键术语理解：

容器（Container）：设置 display: grid 的父元素，所有直接子元素会自动成为网格项目，容器的属性定义网格的行列结构；
项目（Item）：容器内的直接子元素，可通过属性指定自己占据的行/列位置和尺寸；
网格线（Grid Line）：划分网格的分界线，如 3 列网格有 4 条垂直网格线，3 行网格有 4 条水平网格线；
网格轨道（Grid Track）：相邻两条网格线之间的区域，即“行”或“列”的整体；
网格单元格（Grid Cell）：行和列交叉形成的最小单位，类似表格的单元格；
网格区域（Grid Area）：由多个相邻单元格组成的矩形区域，可通过名称或网格线定位。

6.4.2、容器核心属性

display ：定义网格容器，开启网格布局模式
- grid（块级网格容器，独占一行，默认）、inline-grid（行内网格容器，与其他元素同行显示）
grid-template ：grid-template-rows/grid-template-columns/grid-template-areas 的简写属性
- 示例：grid-template: "header header" 100px "sidebar main" 1fr "footer footer" 80px / 200px 1fr;（定义3行2列，行高分别为100px、1fr、80px，列宽分别为200px、1fr，同时命名区域）
- grid-template-rows ：定义网格容器的行轨道尺寸，控制行数和每行高度
  - 取值：100px 200px（2行，第一行100px，第二行200px）、repeat(3, 1fr)（3行，每行等分剩余空间）、minmax(50px, auto)（行高最小50px，最大自适应内容）、auto（行高自适应内容）
- grid-template-columns ：定义网格容器的列轨道尺寸，控制列数和每列宽度
  - 取值：与 grid-template-rows 一致，如 repeat(4, calc(25% - 12px))（4列，每列宽度均等）、1fr 2fr 1fr（3列，宽度比例1:2:1）
- grid-template-areas ：通过命名网格区域定位项目，简化跨行跨列布局
  - 取值："header header" "sidebar main" "footer footer"（3行2列，header占第一行2列，sidebar占第二行1列，main占第二行2列，footer占第三行2列），. 表示空单元格
gap ：row-gap 和 column-gap 的简写属性（与 Flex 通用，无需重复说明）
- 单值（如 15px）、双值（如 10px 20px）
- row-gap ：控制网格行之间的间距（纵向间距）
  - 取值：10px、1em、2% 等长度/百分比值
- column-gap ：控制网格列之间的间距（横向间距）
  - 取值：15px、2em、3% 等长度/百分比值
grid-auto-rows ：定义超出 grid-template-rows 定义的行的默认高度
- 取值：100px、minmax(80px, auto) 等，适配动态新增行的场景
grid-auto-columns ：定义超出 grid-template-columns 定义的列的默认宽度
- 取值：与 grid-auto-rows 一致
grid-auto-flow ：控制网格项目的自动填充顺序
- row（按行优先填充，默认）、column（按列优先填充）、row dense/column dense（密集填充，填补空单元格）
place-items ：justify-items 和 align-items 的简写属性
- 示例：place-items: center start;（垂直居中，水平靠左）
- justify-items ：控制网格项目在单元格内的水平对齐（替代 Flex 的 justify-content 单元格内对齐）
  - stretch（拉伸至单元格宽度，默认）、start（靠左）、center（居中）、end（靠右）
- align-items ：控制网格项目在单元格内的垂直对齐（与 Flex 同名属性逻辑一致，作用范围为单元格）
  - stretch（默认）、start、center、end、baseline
place-content ：justify-content 和 align-content 的简写属性
- 示例：place-content: center space-between;
- justify-content ：控制整个网格在容器内的水平对齐（网格总尺寸 < 容器尺寸时生效，与 Flex 同名属性逻辑一致）
  - flex-start、flex-end、center、space-between、space-around、space-evenly
- align-content ：控制整个网格在容器内的垂直对齐（网格总尺寸 < 容器尺寸时生效，与 Flex 同名属性逻辑一致）
  - 取值与 justify-content 一致

6.4.3、项目核心属性

grid-area ：指定项目归属的命名网格区域（对应容器 grid-template-areas），也可作为 grid-row/grid-column 的简写
- 取值1（命名）：header（对应容器定义的 header 区域）
- 取值2（简写）：grid-area: 2 / 1 / 4 / 3;（依次为 row-start / column-start / row-end / column-end）
- grid-row ：grid-row-start/grid-row-end 的简写属性
  - 示例：grid-row: 2 / 4;（占据第2到第4条水平网格线，即2行）、grid-row: 1 / span 2;（从第1行开始跨越2行）
  - grid-row-start / grid-row-end ：指定项目占据的水平网格线范围（跨行）
    - 取值：网格线编号（如 1/3）、span 2（跨越2行）
- grid-column ：grid-column-start/grid-column-end 的简写属性
  - 示例：grid-column: 1 / 3;（占据2列）、grid-column: span 4;（跨越4列）
  - grid-column-start / grid-column-end ：指定项目占据的垂直网格线范围（跨列）
    - 取值：与 grid-row-start 一致，如 span 3（跨越3列）
place-self ：justify-self 和 align-self 的简写属性
- 示例：place-self: end center;（水平靠右，垂直居中）
- justify-self ：单独控制某个项目在单元格内的水平对齐，覆盖容器 justify-items
  - auto（默认）、stretch、start、center、end
- align-self ：单独控制某个项目在单元格内的垂直对齐，覆盖容器 align-items（与 Flex 同名属性逻辑一致）
  - auto（默认）、stretch、start、center、end、baseline

6.4.4、Grid 空间分配核心逻辑

案例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid 布局核心属性与技巧示例</title>
    <style>
        /* 通用样式重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            padding: 20px;
            font-family: "Microsoft Yahei", sans-serif;
            line-height: 1.6;
        }
        h2 {
            margin: 30px 0 15px;
            color: #2c3e50;
            border-bottom: 2px solid #3498db;
            padding-bottom: 8px;
        }
        .demo-box {
            margin: 20px 0;
            padding: 20px;
            border: 1px solid #eee;
            border-radius: 8px;
        }
        .grid-item {
            background-color: #3498db;
            color: white;
            padding: 20px;
            border-radius: 4px;
            text-align: center;
            font-size: 16px;
        }
        /* 不同场景的Grid容器样式 */

        /* 1. 基础固定行列布局（容器+项目核心属性） */
        .grid-basic {
            display: grid; /* 定义块级网格容器 */
            /* 定义3行2列：行高100px、1fr、80px；列宽200px、1fr */
            grid-template: 
                "header header" 100px 
                "sidebar main" 1fr 
                "footer footer" 80px / 200px 1fr;
            gap: 15px; /* 行+列间距统一15px，等价于row-gap:15px + column-gap:15px */
            height: 500px; /* 固定容器高度，方便看对齐效果 */
        }
        /* 命名区域对应 */
        .grid-basic .header {
            grid-area: header; /* 对应grid-template-areas的header区域 */
            background-color: #e74c3c;
        }
        .grid-basic .sidebar {
            grid-area: sidebar; /* 对应sidebar区域 */
            background-color: #2ecc71;
        }
        .grid-basic .main {
            grid-area: main; /* 对应main区域 */
            background-color: #9b59b6;
        }
        .grid-basic .footer {
            grid-area: footer; /* 对应footer区域 */
            background-color: #f39c12;
        }

        /* 2. 响应式自动换行布局（auto-fit + minmax） */
        .grid-responsive {
            display: grid;
            width: 100%; /* 自适应容器（核心：只有自适应容器才会换行） */
            /* 自动适配列数：最小240px，最大等分剩余空间，列间距16px */
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 16px;
            margin-top: 20px;
        }
        /* 3. 固定容器+溢出场景（验证滚动条规则） */
        .grid-fixed {
            display: grid;
            width: 800px; /* 固定容器宽度 */
            grid-template-columns: 300px 300px 300px; /* 列总宽900px > 容器800px */
            column-gap: 20px; /* 列+间距总宽=900+40=940px */
            row-gap: 15px;
            margin-top: 20px;
            border: 1px solid #ccc; /* 显示容器边界，方便看溢出 */
        }

        /* 4. 隐式轨道+跨行跨列示例 */
        .grid-implicit {
            display: grid;
            width: 800px;
            grid-template-columns: 200px 1fr; /* 显式2列 */
            grid-auto-columns: 200px; /* 显式定义隐式列宽度（避坑：默认auto易失控） */
            grid-auto-rows: 100px; /* 显式定义隐式行高度 */
            gap: 16px;
            margin-top: 20px;
        }
        /* 跨列并触发隐式轨道 */
        .grid-implicit .item-3 {
            grid-column: 3 / span 1; /* 超出显式2列，创建第3列（隐式轨道） */
            background-color: #1abc9c;
        }
        /* 跨行示例 */
        .grid-implicit .item-4 {
            grid-row: 2 / span 2; /* 从第2行开始跨2行 */
            grid-column: 1 / 2;
            background-color: #e67e22;
        }

        /* 5. 对齐方式示例（容器级+项目级） */
        .grid-align {
            display: grid;
            width: 100%;
            grid-template-columns: repeat(3, 200px); /* 固定列宽，总宽600px < 窗口宽度 */
            gap: 15px;
            height: 300px; /* 固定容器高度，让align-content生效 */
            /* 容器级对齐：整个网格在容器内水平居中、垂直均匀分布 */
            justify-content: center;
            align-content: space-around;
            /* 项目在单元格内的默认对齐：水平居中、垂直居中 */
            justify-items: center;
            align-items: center;
            border: 1px solid #eee;
            margin-top: 20px;
        }
        /* 单独覆盖某个项目的对齐方式 */
        .grid-align .item-special {
            justify-self: end; /* 水平靠右 */
            align-self: start; /* 垂直靠上 */
            background-color: #8e44ad;
            width: 150px; /* 缩小宽度，让对齐效果更明显 */
            height: 80px;
        }

        /* 6. dense密集填充示例 */
        .grid-dense {
            display: grid;
            width: 100%;
            grid-template-columns: repeat(4, 1fr);
            grid-auto-flow: row dense; /* 行优先+密集填充 */
            gap: 10px;
            margin-top: 20px;
        }
        .grid-dense .item-2 {
            grid-column: span 2; /* 跨2列 */
        }
        .grid-dense .item-5 {
            grid-column: span 2; /* 跨2列 */
        }
    </style>
</head>
<body>
    <h1>Grid 布局核心属性与实战技巧</h1>

    <!-- 1. 基础固定行列布局（grid-template/grid-area） -->
    <h2>1. 基础布局：命名区域+固定行列</h2>
    <div class="demo-box">
        <div class="grid-basic">
            <div class="grid-item header">头部（header）</div>
            <div class="grid-item sidebar">侧边栏（sidebar）</div>
            <div class="grid-item main">主内容（main）</div>
            <div class="grid-item footer">底部（footer）</div>
        </div>
        <p>核心属性：grid-template（行列+区域简写）、grid-area（项目区域定位）、gap（间距）</p>
    </div>

    <!-- 2. 响应式自动换行布局（auto-fit + minmax） -->
    <h2>2. 响应式布局：auto-fit + minmax 自动换行</h2>
    <div class="demo-box">
        <div class="grid-responsive">
            <div class="grid-item">项目1</div>
            <div class="grid-item">项目2</div>
            <div class="grid-item">项目3</div>
            <div class="grid-item">项目4</div>
            <div class="grid-item">项目5</div>
        </div>
        <p>核心技巧：缩小窗口宽度，列数自动减少（仅自适应容器生效），无滚动条</p>
    </div>

    <!-- 3. 固定容器+溢出场景 -->
    <h2>3. 固定容器：网格溢出+全局滚动条</h2>
    <div class="demo-box">
        <div class="grid-fixed">
            <div class="grid-item">项目1</div>
            <div class="grid-item">项目2</div>
            <div class="grid-item">项目3</div>
            <div class="grid-item">项目4</div>
            <div class="grid-item">项目5</div>
            <div class="grid-item">项目6</div>
        </div>
        <p>核心规则：容器宽800px < 列+间距总宽940px → 网格溢出；窗口宽<800px时显示全局滚动条（范围=940px）</p>
    </div>

    <!-- 4. 隐式轨道+跨行跨列 -->
    <h2>4. 隐式轨道：跨行跨列触发新增轨道</h2>
    <div class="demo-box">
        <div class="grid-implicit">
            <div class="grid-item item-1">项目1</div>
            <div class="grid-item item-2">项目2</div>
            <div class="grid-item item-3">项目3（隐式列）</div>
            <div class="grid-item item-4">项目4（跨2行）</div>
            <div class="grid-item item-5">项目5</div>
            <div class="grid-item item-6">项目6</div>
        </div>
        <p>核心技巧：显式定义grid-auto-columns/rows，避免隐式轨道尺寸失控；跨列会增加列+间距总宽</p>
    </div>

    <!-- 5. 对齐方式示例 -->
    <h2>5. 对齐规则：容器级+项目级</h2>
    <div class="demo-box">
        <div class="grid-align">
            <div class="grid-item">项目1</div>
            <div class="grid-item item-special">项目2（自定义对齐）</div>
            <div class="grid-item">项目3</div>
            <div class="grid-item">项目4</div>
            <div class="grid-item">项目5</div>
            <div class="grid-item">项目6</div>
        </div>
        <p>核心区别：justify-content/align-content（网格整体对齐）、justify-items/align-items（项目在单元格内对齐）</p>
    </div>

    <!-- 6. dense密集填充 -->
    <h2>6. 填充规则：dense 密集填充</h2>
    <div class="demo-box">
        <div class="grid-dense">
            <div class="grid-item item-1">1</div>
            <div class="grid-item item-2">2（跨2列）</div>
            <div class="grid-item item-3">3</div>
            <div class="grid-item item-4">4</div>
            <div class="grid-item item-5">5（跨2列）</div>
            <div class="grid-item item-6">6</div>
            <div class="grid-item item-7">7</div>
        </div>
        <p>注意：dense仅调整视觉位置，DOM顺序不变，无障碍场景慎用</p>
    </div>
</body>
</html>

七、变换

7.1、2D变换

transform (2D) ：对元素做二维变形，不破坏文档流，仅视觉变化，百分比参数相对于元素自身尺寸（非父容器）
- translate(x,y)/translateX(x)/translateY(y)：平移，搭配top:50%;left:50%实现元素精准居中，性能优于left/top位移
- rotate(deg)：绕基点旋转，正值顺时针、负值逆时针，行内元素需转块/行内块才生效
- scale(x,y)/scaleX(x)/scaleY(y)：缩放，单参数等比缩放，>1放大、<1缩小，不改变元素原始占位
- skew(x-deg,y-deg)/skewX(deg)/skewY(deg)：倾斜，单参数Y轴默认为0，可实现斜切造型
- none：取消所有变换（默认）
transform-origin ：设置2D/3D变换的基点（旋转/倾斜/缩放的中心），2D默认50% 50%（元素中心）
- left top/center bottom/10px 20px：方位词/像素定位基点
- 20% 80%：百分比定位基点（相对于元素自身尺寸）

7.2、3D变换

7.2.1、3D 基础变换属性

transform (3D) ：在2D基础上扩展三维空间，translate3d可强制启用GPU加速提升动画流畅度
- translate3d(x,y,z)/translateZ(z)：3D平移，Z轴正值靠近屏幕（放大）、负值远离（缩小），需配合perspective才显效果
- rotate3d(x,y,z,deg)/rotateX(deg)/rotateY(deg)/rotateZ(deg)：3D旋转，rotateZ与2Drotate完全一致，旋转方向可通过左手法则记忆
- scale3d(x,y,z)/scaleZ(z)：3D缩放，需结合3D空间才显立体效果

7.2.2、3D 空间核心容器属性（父元素必设，开启真3D关键）

transform-style ：控制子元素是否保留3D空间，默认值会压平子元素
- flat（默认）：子元素扁平化，无3D效果
- preserve-3d：保留3D空间，子元素可做独立3D变换（卡片翻转、3D导航必设）
perspective ：设置3D透视距离，模拟人眼到元素的距离，实现近大远小效果
- none（默认）：无透视
- 800px/1000px（常用值）：数值越小，透视效果越强；给父元素设置，所有子元素继承透视
- 行内写法：transform: perspective(1000px) rotateX(45deg)，必须作为transform第一个函数才生效
perspective-origin ：设置3D透视的观察视角原点，默认50% 50%
- left top/center bottom：方位词调整视角
- 20% 80%：百分比自定义视角
backface-visibility ：控制元素3D翻转后背面可见性，卡片翻转核心属性
- visible（默认）：背面可见（镜像显示）
- hidden：背面隐藏，避免翻转时穿透显示背面内容

transform支持多函数组合，执行顺序为从右到左，
例：transform: scale(1.1) rotate(5deg) translate(10px)  先平移→再旋转→最后缩放

/* ========== 2D 核心实战 ========== */
/* 1. 元素水平垂直居中（文档高频用法） */
.center-2d {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 基于自身尺寸平移，精准居中 */
}
/* 2. 悬停缩放+旋转（带过渡，图标/卡片交互） */
.hover-effect {
    transition: transform 0.3s ease;
    transform-origin: center center; /* 显式设置旋转基点，可选 */
}
.hover-effect:hover {
    transform: scale(1.1) rotate(5deg); /* 复合变换：先旋转后缩放 */
}
/* 3. 斜切导航栏（skew实战） */
.skew-nav {
    transform: skewX(10deg);
}


/* ========== 3D 核心实战：卡片翻转（文档经典案例） ========== */
/* 父容器：设置透视，开启3D观察视角 */
.card-wrap {
    perspective: 1000px; /* 常用值，透视适中 */
    width: 300px;
    height: 200px;
}
/* 卡片容器：保留3D空间，核心必设 */
.card {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d; /* 开启3D空间 */
  transition: transform 0.6s linear;
}
/* 卡片正反两面：隐藏背面，避免穿透 */
.card-front, .card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden; /* 核心：隐藏背面 */
}
/* 背面默认翻转180度，初始不可见 */
.card-back {
    transform: rotateY(180deg);
}
/* 悬停翻转卡片，显示背面 */
.card-wrap:hover .card {
    transform: rotateY(180deg);
}


/* ========== 3D 平移：GPU加速（文档性能优化点） ========== */
/* 即使仅2D平移，用translate3d强制GPU加速，动画更流畅 */
.gpu-speed {
    transform: translate3d(20px, 0, 0);
    transition: transform 0.3s;
}