CSS 入门到精通全章节学习笔记（含 CSS3 核心特性）

一定要AK2026-04-09 9:37

一、CSS 基础认知

1. CSS 的简单介绍

CSS（Cascading Style Sheets，层叠样式表）是用来美化网页、控制网页布局的样式语言，HTML 负责网页结构，CSS 负责网页的 "外观与展示"，二者结合才能实现美观、交互友好的前端页面。

2. 什么是 CSS 和发展史

  • 核心定义：层叠样式表，通过样式规则定义 HTML 元素的显示效果（如颜色、尺寸、位置、字体等）。
  • 发展历程 ：
    1. CSS1.0（1996）：推出基础样式规范，涵盖字体、颜色、文本等基础属性；
    2. CSS2.0（1998）：新增盒模型、定位、浮动等核心布局属性，成为网页布局的基础；
    3. CSS3.0（2012 至今）：模块化拆分规范，新增圆角、阴影、动画、弹性盒、网格布局等特性，是当前主流版本；
    4. 未来趋势：CSS Houdini、CSS Container Queries 等新特性逐步落地，进一步提升前端布局与渲染能力。

3. CSS 的快速入门及优势

（1）快速入门核心语法

CSS 规则由选择器 和声明块组成，基础格式：

复制代码 
选择器 {
    属性1: 值1;
    属性2: 值2;
}

示例：给所有 <p> 标签设置红色字体、16 号字号

复制代码 
p {
    color: red;
    font-size: 16px;
}
（2）核心优势
  1. 结构与样式分离：HTML 只写结构，CSS 单独写样式，代码更易维护、复用；
  2. 提升开发效率：一套 CSS 样式可控制多个页面，批量修改样式更便捷；
  3. 丰富的样式效果：支持颜色、字体、布局、动画等多样化展示，适配不同设备（PC / 移动端）；
  4. 搜索引擎友好：清晰的结构分离，利于搜索引擎抓取页面内容。

4. 四种 css 导入方式

CSS 与 HTML 的关联方式有 4 种，优先级从低到高为：行内样式 < 内部样式 < 外部样式 < !important 重要声明。

导入方式 语法 / 示例 特点 适用场景
行内样式 在 HTML 标签内加 style 属性 <p style="color:red;">文字</p> 优先级最高，但耦合性强，仅控制单个元素 临时修改单个元素样式（不推荐常规使用）
内部样式 在<head>内写<style>标签 <style>p{color:red;}</style> 仅当前页面生效，代码集中 小型页面、测试 demo
外部样式 新建.css 文件，通过<link>引入 <link rel="stylesheet" href="style.css"> 多页面复用，完全分离结构与样式 中大型项目、正式开发（推荐）
导入样式 在<style>内用@import引入 <style>@import "style.css";</style> 需加载完 CSS 后渲染，存在性能问题 不推荐正式使用（仅了解）

二、CSS 核心选择器

选择器是 CSS 找到要设置样式的 HTML 元素的关键，以下是各阶段核心选择器，标 * 为重点掌握。

5. 三种基本选择器 - 重要*

（1）标签选择器

  • 语法：HTML 标签名（如 p、div、h1）

  • 作用：匹配页面中所有同名标签，批量设置样式

  • 示例：

    复制代码 
    /* 所有div标签字体设为蓝色 */
div {
    color: blue;
}
（2）类选择器

  • 语法：.类名，HTML 标签通过class="类名"调用

  • 作用：精准匹配指定类名的元素，一个类可被多个元素调用，一个元素可多个类

  • 示例：

    复制代码 
    /* 定义类 */
.title {
    font-size: 20px;
    font-weight: bold;
}
/* 调用 */
<h3 class="title">标题</h3>
（3）ID 选择器

  • 语法：#ID名，HTML 标签通过id="ID名"调用

  • 作用：匹配唯一 ID 的元素，页面中 ID 唯一，不可重复

  • 示例：

    复制代码 
    #header {
    width: 100%;
    height: 80px;
}
<div id="header"></div>

6. 层次选择器

通过 HTML 元素的嵌套关系匹配目标元素，核心 4 种：

选择器 名称 语法 匹配规则
后代选择器 空格 父选择器 子选择器 匹配父元素下所有层级的子元素
子选择器 > 父选择器 > 子选择器 仅匹配父元素下直接子元素（一级子元素）
相邻兄弟选择器 + 元素1 + 元素2 匹配元素 1紧挨着的下一个同级元素 2
通用兄弟选择器 ~ 元素1 ~ 元素2 匹配元素 1 之后所有同级的元素 2

示例：

复制代码 
/* 后代选择器：div下所有p标签（包括嵌套的） */
div p {
    color: #333;
}
/* 子选择器：div下直接子元素p，不匹配嵌套的 */
div > p {
    font-size: 14px;
}

7. 结构伪类选择器

基于元素在 DOM 树中的结构位置匹配，CSS3 核心选择器，常用如下：

选择器 作用 示例
:first-child 匹配父元素的第一个子元素 ul li:first-child（ul 下第一个 li）
:last-child 匹配父元素的最后一个子元素 ul li:last-child（ul 下最后一个 li）
:nth-child(n) 匹配父元素的第 n 个子元素 p:nth-child(2)（父元素下第二个 p）
:nth-of-type(n) 匹配同类型元素的第 n 个 div p:nth-of-type(1)（div 下第一个 p）
:only-child 匹配父元素唯一的子元素 ul li:only-child（仅一个 li 的 ul）

8. 属性选择器 - 重要*

通过 HTML 标签的属性匹配元素，常用且灵活，核心语法：

选择器 作用 示例
[属性名] 匹配包含该属性的元素 a[href]（所有带 href 的 a 标签）
[属性名=值] 匹配属性等于指定值的元素 input[type=text]（文本框）
[属性名^=值] 匹配属性以指定值开头的元素 a[href^=https]（https 链接）
[属性名$=值] 匹配属性以指定值结尾的元素 a[href$=jpg]（图片链接）
[属性名*=值] 匹配属性包含指定值的元素 div[class*=box]（class 含 box 的 div）

三、CSS 样式基础应用

9. CSS 的作用及字体样式

（1）CSS 核心作用
  1. 美化网页外观（颜色、字体、间距）；
  2. 控制网页布局（居中、浮动、定位）；
  3. 实现交互效果（hover、动画、过渡）；
  4. 适配多设备（响应式布局、移动端适配）。
（2）字体样式核心属性
属性 作用 取值示例
font-family 设置字体类型 font-family: "微软雅黑", Arial, sans-serif;
font-size 设置字体大小 font-size: 16px;（默认 16px）
font-weight 设置字体粗细 normal/bold/bolder/ 数值 100-900
font-style 设置字体样式 normal/italic（斜体）/oblique
color 设置字体颜色 red/#ff0000/rgb(255,0,0)

10. 文本样式

控制文本的排版、间距、装饰，核心属性：

属性 作用 取值示例
text-align 文本水平对齐 left/center/right/justify
line-height 行高（垂直居中关键） 20px/1.5（倍数）
text-decoration 文本装饰 none（无）/underline（下划线）/line-through（删除线）
text-indent 首行缩进 2em（2 个字符）
letter-spacing 字符间距 2px
word-spacing 单词间距 5px（仅英文）

11. 文本阴影和超链接伪类

（1）文本阴影（CSS3）

text-shadow: 水平偏移 垂直偏移 模糊程度 颜色;示例：

复制代码 
.text-shadow {
    text-shadow: 2px 2px 4px #666;
}
（2）超链接伪类（LVHA 原则）

超链接的状态分为 4 种，需按LVHA 顺序书写，否则样式失效：

伪类 作用 示例
a:link 未访问的链接 a:link {color: blue;}
a:visited 已访问的链接 a:visited {color: purple;}
a:hover 鼠标悬浮时 a:hover {color: red;}
a:active 点击未松开时 a:active {color: green;}

12. 列表样式练习

控制 HTML 列表（ul/ol/dl）的样式，核心属性：

属性 作用 取值示例
list-style-type 列表标记类型 none（无标记）/disc（圆点）/decimal（数字）
list-style-image 自定义标记图片 list-style-image: url("img/li.png");
list-style-position 标记位置 inside（内）/outside（外）

简写：list-style: 类型 图片 位置;示例：

复制代码 
/* 去除列表默认标记 */
ul {
    list-style: none;
}

13. 背景图像应用及渐变

（1）背景图像属性
属性 作用 取值示例
background-image 设置背景图 background-image: url("img/bg.jpg");
background-repeat 背景平铺 repeat/no-repeat/repeat-x/repeat-y
background-position 背景图位置 center top/10px 20px/50% 50%
background-size 背景图尺寸（CSS3） cover/contain/100% 100%
background-attachment 背景附着 scroll（随滚动）/fixed（固定）
（2）背景渐变（CSS3）

无需图片即可实现渐变背景，分线性渐变 和径向渐变：

  1. 线性渐变：background: linear-gradient(方向, 颜色1, 颜色2,...);示例：

    复制代码 
    /* 从上到下红色到蓝色 */
.linear-bg {
    background: linear-gradient(to bottom, red, blue);
}
/* 45度角 黄色到绿色 */
.linear-bg-2 {
    background: linear-gradient(45deg, yellow, green);
}

  2. 径向渐变：background: radial-gradient(形状, 颜色1, 颜色2,...);示例：

    复制代码 
    .radial-bg {
    background: radial-gradient(circle, pink, purple);
}

14. 盒子模型及边框使用

CSS 盒子模型是网页布局的核心，所有 HTML 元素都被视为盒子，由内容、内边距、边框、外边距组成。

（1）盒子模型组成
复制代码 
盒子总宽度 = 内容宽度(width) + 左内边距(padding-left) + 右内边距(padding-right) + 左边框(border-left) + 右边框(border-right) + 左外边距(margin-left) + 右外边距(margin-right)
（2）边框属性（border）
  • 简写：border: 宽度 样式 颜色;示例：border: 1px solid red;
  • 单边边框：border-top/border-bottom/border-left/border-right
  • 常用边框样式：solid（实线）/dashed（虚线）/dotted（点线）/double（双线）

15. 内外边距及 div 居中

（1）内边距（padding）

控制内容与边框的距离，padding 会撑大盒子，属性：

  • 简写：padding: 上 右 下 左;（顺时针）示例：padding: 10px;（四边都是 10px）；padding: 10px 20px;（上下 10px，左右 20px）
  • 单边内边距：padding-top/padding-right/padding-bottom/padding-left
（2）外边距（margin）

控制盒子与其他盒子的距离，margin 不会撑大盒子，属性：

  • 简写：margin: 上 右 下 左;

  • 常用技巧：margin: 0 auto; 实现块级盒子水平居中 （需指定宽度）示例：

    复制代码 
    .box {
    width: 300px;
    margin: 0 auto; /* 水平居中 */
}

  • 外边距合并：上下相邻的块级盒子，外边距会取最大值（而非叠加），需注意布局问题。

16. 圆角边框及阴影和经验分享

（1）圆角边框（CSS3）

border-radius: 水平半径 垂直半径;（CSS3 核心属性，实现圆形、椭圆角）

  • 简写：border-radius: 数值;（四边圆角）示例：

    复制代码 
    /* 圆形盒子（宽高相等） */
.circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
}
/* 圆角矩形 */
.round-box {
    border-radius: 10px;
}

  • 单独圆角：border-top-left-radius/border-top-right-radius等

（2）盒子阴影（CSS3）

box-shadow: 水平偏移 垂直偏移 模糊程度 扩散程度 颜色 内外阴影;示例：

复制代码 
.box-shadow {
    box-shadow: 3px 3px 10px 2px #999;
}
（3）经验分享
  1. 盒子模型计算：开发时需注意box-sizing属性，box-sizing: border-box; 让width/height包含内边距和边框，避免布局错乱；
  2. 圆角 + 阴影组合：常用于按钮、卡片设计，提升页面质感；
  3. 背景图 + 圆角：注意背景图的裁剪，避免圆角处显示边框

四、CSS 核心布局与定位

17. display 和浮动

（1）display 属性

display 用于修改元素的默认显示类型，是布局的核心属性，核心取值如下：

取值 作用 适用场景
block 将元素转为块级元素，独占一行，可设置宽高 让行内元素（如<a>、<span>）支持宽高设置
inline 将元素转为行内元素，不独占一行，不可设置宽高 让块级元素在一行显示（不推荐，常用inline-block替代）
inline-block 转为行内块元素，不独占一行，可设置宽高 导航栏、按钮等需要一行排列且可设置尺寸的元素
none 隐藏元素，不占据页面空间 元素的显示 / 隐藏切换（与visibility: hidden区分）
flex 开启弹性盒布局（CSS3） 现代网页主流布局，替代浮动实现响应式
（2）浮动（float）

浮动是传统网页布局的核心方式，用于让块级元素脱离标准流，在一行内排列，核心属性：

  • 取值：left（左浮动）、right（右浮动）、none（默认，不浮动）
  • 核心特点：
    1. 浮动元素会脱离标准普通流，不再占据原位置，后续元素会向上移动；
    2. 浮动元素会在父元素内一行排列，空间不足则自动换行；
    3. 浮动元素会具备行内块特性，可设置宽高，且默认宽度由内容撑开；
    4. 浮动元素不会覆盖文字，文字会环绕浮动元素（图文混排的原生特性）

示例：实现三个盒子一行排列

复制代码 
.box {
  float: left;
  width: 200px;
  height: 200px;
  margin: 10px;
}

18. overflow 及父级边框塌陷问题

（1）overflow 属性

overflow 用于控制内容超出盒子时的显示方式，核心取值：

取值 作用 适用场景
visible 默认值，内容超出盒子时直接显示 无需特殊处理的场景
hidden 超出部分隐藏，裁剪内容 清除浮动、隐藏溢出内容、实现单行 / 多行文本省略
scroll 始终显示滚动条，超出可滚动 固定尺寸容器的内容滚动
auto 内容超出时显示滚动条，否则不显示 自适应滚动容器（推荐）
（2）父级边框塌陷（高度塌陷）问题

问题原因 ：子元素全部设置浮动后，会脱离标准流，导致父元素无法感知子元素高度，出现高度为 0、边框塌陷的问题。4 种常用清除浮动方案（按推荐度排序）：

  1. 额外标签法（隔墙法） ：在浮动元素末尾添加空块级标签，设置clear: both

    复制代码 
    <div class="parent">
  <div class="float-child"></div>
  <div style="clear: both;"></div>
</div>

    ✅ 优点：简单易懂；❌ 缺点：添加无意义标签，结构冗余

  2. 父元素设置 overflow ：给父元素添加overflow: hidden（或auto/scroll）

    复制代码 
    .parent {
  overflow: hidden;
}

    ✅ 优点：代码简洁；❌ 缺点：可能隐藏超出父元素的内容

  3. 伪元素清除法（推荐，企业主流方案） ：给父元素添加::after伪元素

    复制代码 
    .clearfix::after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  /* 兼容IE6/7 */
  *zoom: 1;
}

    ✅ 优点：不破坏结构，复用性强；❌ 需兼容旧浏览器

  4. 双伪元素清除法 ：同时添加::before和::after，进一步兼容

    复制代码 
    .clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}
.clearfix::after {
  clear: both;
}
.clearfix {
  *zoom: 1;
}

19. 相对定位的使用及练习

定位（position）是 CSS 中用于精准控制元素位置的核心属性，相对定位是基础定位类型。

（1）定位基础

定位的核心属性：position + top/bottom/left/right（偏移量）

（2）相对定位（relative）
  • 语法：position: relative;
  • 核心特点：
    1. 不脱离标准流：元素仍占据原位置，不会影响其他元素布局；
    2. 以自身原来的位置为参考点进行偏移；
    3. 偏移量可正可负，正数向反方向移动（如left: 10px向右移动 10px）；
    4. 常用于绝对定位的父级参考（子绝父相），或元素的微调位置。

示例：元素相对自身位置向右下偏移

复制代码 
.box {
  position: relative;
  left: 20px;
  top: 20px;
}

20. 方块定位练习讲解

本章节核心是定位的实战应用，通过方块布局练习掌握定位的核心逻辑，常见练习场景与技巧：

  1. 子绝父相布局 ：最常用的定位组合，子元素设置绝对定位，父元素设置相对定位，实现子元素在父元素内精准定位

    复制代码 
    .parent {
  position: relative; /* 父元素相对定位，作为子元素参考 */
  width: 400px;
  height: 400px;
  border: 1px solid #000;
}
.child {
  position: absolute; /* 子元素绝对定位 */
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  background: red;
}

  2. 方块堆叠与对齐 ：通过定位实现方块的居中、堆叠、悬浮效果，如：

    • 绝对定位 +margin: auto 实现元素水平垂直居中
    • 多个方块的层级控制（配合z-index）

  3. 练习核心要点 ：

    • 明确定位的参考点，区分相对 / 绝对定位的差异；
    • 掌握偏移量的计算，避免布局错乱；
    • 结合浮动、display 实现复杂布局。

21. 绝对定位和固定定位

（1）绝对定位（absolute）
  • 语法：position: absolute;
  • 核心特点：
    1. 完全脱离标准流：不占据原位置，后续元素会向上移动；
    2. 参考点规则：
      • 若父级 / 祖先元素设置了position: relative/absolute/fixed（非 static），则以最近的定位祖先元素为参考；
      • 若父级无定位，则以 ** 浏览器可视区（文档根元素）** 为参考；
    3. 具备块级元素特性，可设置宽高，默认宽度由内容撑开；
    4. 常用于弹窗、悬浮元素、子元素在父元素内的精准定位。
（2）固定定位（fixed）
  • 语法：position: fixed;
  • 核心特点：
    1. 完全脱离标准流，不占据原位置；
    2. 以浏览器可视窗口为参考点，固定在页面指定位置，页面滚动时位置不变；
    3. 常用于固定导航栏、回到顶部按钮、侧边悬浮广告等。

示例：固定在页面右下角的回到顶部按钮

复制代码 
.back-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  background: #333;
  color: #fff;
  text-align: center;
  line-height: 50px;
}
（3）定位类型对比表
定位类型 是否脱离标准流 参考点 核心用途
静态定位（static，默认） 否 标准流位置 无特殊定位需求
相对定位（relative） 否 自身原位置 元素微调、子绝父相的父级
绝对定位（absolute） 是 最近的定位祖先 / 浏览器 弹窗、悬浮元素、精准布局
固定定位（fixed） 是 浏览器可视窗口 固定导航、悬浮按钮
粘性定位（sticky，CSS3 补充） 否（滚动到阈值后脱离） 最近的滚动祖先 吸顶导航、滚动吸附

22. z-index 及透明度

（1）z-index 属性

z-index 用于控制定位元素的堆叠顺序 ，仅对设置了position（非 static）的元素生效：

  • 取值：整数（可正可负，默认auto=0）
  • 核心规则：
    1. z-index 值越大，元素越靠上，会覆盖值小的元素；
    2. 父元素z-index 会限制子元素的堆叠顺序，子元素z-index 再大也不会超过父元素；
    3. 未设置z-index 时，后写的元素会覆盖先写的元素。

示例：让悬浮元素在最上层显示

复制代码 
.modal {
  position: fixed;
  z-index: 9999; /* 大数值确保在最上层 */
}
（2）透明度

CSS 中实现元素透明的两种核心方式：

  1. opacity 属性：
    • 取值：0（完全透明）~ 1（完全不透明）
    • 特点：元素本身和所有子元素都会透明，包括文字、边框等
    • 示例：opacity: 0.5;（半透明）
  2. rgba() 颜色值：
    • 语法：rgba(红, 绿, 蓝, 透明度)，透明度取值 0~1
    • 特点：仅当前样式透明，子元素不受影响，常用于背景透明
    • 示例：background: rgba(0,0,0,0.5);（半透明黑色背景）

五、CSS3 动画与进阶

23. 动画及视野拓展

CSS3 新增了强大的动画特性，无需 JavaScript 即可实现流畅的网页动画，核心包含过渡、变换、动画三大模块。

（1）过渡（transition）

过渡用于实现元素状态变化的平滑动画，是最简单的 CSS3 动画：

  • 核心属性：

    复制代码 
    transition: 过渡属性 过渡时间 过渡曲线 延迟时间;
    • transition-property：指定参与过渡的属性（如all、width、background）
    • transition-duration：过渡持续时间（单位s/ms，必填）
    • transition-timing-function：过渡速度曲线（如ease、linear、cubic-bezier）
    • transition-delay：延迟时间（可选）

  • 示例：按钮 hover 时背景色平滑过渡

    复制代码 
    .btn {
  background: blue;
  transition: all 0.3s ease;
}
.btn:hover {
  background: red;
}
（2）2D/3D 变换（transform）

transform 用于对元素进行位移、旋转、缩放、倾斜等变换，支持 2D 和 3D 效果：

  • 2D 变换核心函数：

    • translate(x,y)：位移，如translate(50px, 50px)
    • rotate(deg)：旋转，如rotate(45deg)
    • scale(x,y)：缩放，如scale(1.2)（放大 1.2 倍）
    • skew(x,y)：倾斜，如skew(30deg, 0)

  • 3D 变换核心属性：

    • perspective：给父元素设置透视，开启 3D 空间
    • transform-style: preserve-3d：让子元素保留 3D 位置
    • rotateX()/rotateY()/rotateZ()：3D 旋转

  • 示例：元素 hover 时放大并旋转

    复制代码 
    .box:hover {
  transform: scale(1.1) rotate(5deg);
}
（3）关键帧动画（@keyframes）

@keyframes 用于定义自定义多阶段动画，实现更复杂的动画效果：

  • 语法：

    复制代码 
    /* 定义动画 */
@keyframes 动画名 {
  0% { /* 初始状态 */
    transform: translateX(0);
  }
  50% { /* 中间状态 */
    transform: translateX(100px);
  }
  100% { /* 结束状态 */
    transform: translateX(0);
  }
}
/* 调用动画 */
.box {
  animation: 动画名 持续时间 速度曲线 次数 方向;
}

  • 核心动画属性：

    • animation-duration：动画持续时间
    • animation-iteration-count：播放次数（infinite 无限循环）
    • animation-direction：播放方向（alternate 往返播放）
    • animation-fill-mode：动画结束后的状态（forwards 保持结束状态）

  • 示例：无限循环的左右摆动动画

    复制代码 
    @keyframes swing {
  0% { transform: rotate(-5deg); }
  50% { transform: rotate(5deg); }
  100% { transform: rotate(-5deg); }
}
.logo {
  animation: swing 2s ease-in-out infinite;
}
（4）视野拓展（CSS3 进阶特性）
  • 弹性盒布局（Flexbox）：现代网页主流布局，替代浮动，完美实现响应式布局
  • 网格布局（Grid）：二维布局系统，同时控制行和列，适合复杂页面布局
  • CSS 变量（Custom Properties） ：--变量名 定义变量，实现样式的动态修改
  • 媒体查询（Media Query）：响应式布局核心，根据设备尺寸适配不同样式
  • CSS Houdini：浏览器渲染引擎的 API，可自定义 CSS 属性，实现更灵活的样式

六、CSS 总结

24. CSS 小结

（1）CSS 核心知识体系梳理
模块 核心知识点
基础语法 CSS 规则、4 种导入方式、优先级
选择器 基本选择器、层次选择器、伪类选择器、属性选择器
样式应用 字体样式、文本样式、背景、盒子模型、边框、圆角、阴影
布局核心 display、浮动、清除浮动、overflow
定位系统 相对定位、绝对定位、固定定位、z-index
CSS3 特性 过渡、变换、动画、弹性盒、网格布局、媒体查询
（2）CSS 学习与开发核心原则
  1. 结构与样式分离：HTML 仅负责结构，CSS 单独写样式，避免行内样式泛滥；
  2. 选择器优先级 ：!important > 行内样式 > ID 选择器 > 类选择器 > 标签选择器；
  3. 盒子模型计算 ：优先使用box-sizing: border-box，避免布局错乱；
  4. 浮动与定位的选择：现代布局优先用 Flex/Grid，传统布局用浮动，精准定位用定位；
  5. 兼容性处理 ：针对不同浏览器添加前缀（如-webkit-、-moz-），使用 Autoprefixer 自动补全；
  6. 性能优化：减少 CSS 重排重绘，避免过度使用动画，压缩 CSS 文件。
（3）后续学习方向
  1. CSS 预处理器：Sass/Less/Stylus，提升 CSS 开发效率；
  2. CSS 框架：Tailwind CSS、Bootstrap，快速搭建页面；
  3. 响应式布局：媒体查询、Flex/Grid、移动端适配；
  4. CSS 动画进阶：复杂动画、交互动画、性能优化；
  5. CSS 新特性：CSS Container Queries、CSS Subgrid、CSS View Transitions 等。
相关推荐
GLDbalala2 小时前
GPU PRO 5 - 1.3 Particle-Based Simulation of Material Aging 笔记
笔记
red_redemption2 小时前
自由学习记录（157）
学习·pyenv管理python
艾莉丝努力练剑2 小时前
【Linux线程】Linux系统多线程（三）：Linux线程 VS 进程，线程控制
java·linux·运维·服务器·c++·学习·ubuntu
徒 花2 小时前
Python知识学习07
windows·python·学习
浮芷.2 小时前
Flutter 框架跨平台鸿蒙开发 - 急救指南应用
学习·flutter·华为·harmonyos·鸿蒙
航Hang*2 小时前
网络安全技术基础——第3章:网络攻击技术
运维·网络·笔记·安全·web安全·php
嵌入式×边缘AI：打怪升级日志2 小时前
Linux 常用命令学习笔记（续）：查找、压缩、vi 编辑器与其他命令
linux·笔记·学习
AI成长日志2 小时前
【笔面试算法学习专栏】链表操作·基础三题精讲（206.反转链表、141.环形链表、21.合并两个有序链表）
学习·算法·面试
JasmineX-12 小时前
数据结构(笔记）——单向循环链表
c语言·数据结构·笔记·链表
热门推荐
01GitHub 镜像站点02一周AI热点速览（2026.03.31-04.06）：GPT-6曝光、谷歌开源Gemma 4、资本狂飙与模型军备竞赛03OpenClaw 请求超时 llm request timed out 怎么解决？3 种方案实测，附完整排查流程04AI 编程效率翻倍：Superpowers Skills 上手清单 + 完整指南05VMware Workstation Pro 17 虚拟机完整安装教程（2026最新）06Qwen3.5-Omni与Qwen3.6模型全面解析（含测评/案例/使用教程）07Oh My Codex 快速使用指南08UV安装并设置国内源09Claude Code 未登录 使用第三方模型10【Vulhub】Fastjson 1.2.24_rce复现