CSS3 学习笔记(不定期更新)

一、CSS3基础知识

1. CSS简介

• 定义：CSS（Cascading Style Sheets，层叠样式表），用于控制网页在浏览器中的显示外观的语言，CSS3已被大部分现代浏览器支持，CSS4仍在开发中。
• 核心作用：控制网页视觉表现，包括样式美化（文本样式、背景、边框等）、布局与定位（元素排列、响应式设计）、动画交互（伪类、过渡、动画）。
• 与HTML的关系：HTML负责页面结构（展示内容），CSS负责样式与布局，实现结构与样式分离。

2. CSS分类（按书写位置）

类型	书写位置	作用范围	语法示例
内联样式表（行内样式表）	标签内部	仅当前标签	<p style="color: red;font-size:14px;">文字内容</p>
内部样式表	<head>标签中	当前页面	<style>div{font-size:18px;color: red;}</style>
外部样式表	单独的.css文件	整个网站	<link rel="stylesheet"href="./css/index.css">

二、CSS选择器

1. 选择器概述

• 定义：是CSS规则的第一部分，它是选择HTML元素的方式，用于精准定位需要修改样式的元素。
• 核心逻辑：选择器（选对元素）+ CSS属性（修改样式，键值对形式：属性名: 属性值;）。

2. 选择器分类及详解

（1）基础选择器

由单个选择器组成，是最常用的选择器类型：

选择器类型	语法示例	匹配范围	复用性	典型使用场景	注意事项
类型选择器（标签选择器）	div { color: gold; }	所有指定HTML标签元素	某一类型标签	全局样式重置、基础标签样式（如body、p）	避免滥用，可能导致样式冲突
类选择器	.box { color: gold; }	所有含指定class的元素	多次使用	多元素共享样式	优先使用，避免与ID选择器冲突
ID选择器	#box { color: gold; }	唯一含指定id的元素	唯一性	唯一元素标识	同一页面id值必须唯一，避免样式覆盖风险
通配符选择器	* { color: gold; }	所有元素	全局覆盖	全局样式重置（清除默认边距等）	性能较差，慎用

• 类选择器注意事项：
  • 类名自定义，不能是中文、纯数字；
  • 多个英文单词用-链接；
  • 命名需见名知义；
  • class属性可包含多个类名（中间用空格隔开）。
• ID与类选择器区别：
  • ID类似身份证编号（唯一），主要配合JavaScript实现交互；
  • 类类似身份证姓名（可重复），主要用于样式复用。

（2）关系选择器

通过元素位置关系选择目标元素，精准度更高：

选择器类型	语法	选择范围	实例
后代选择器	A B	A元素的所有后代元素（跨层级）	ul li {color: pink;}（选择ul下所有li）
子代选择器	A > B	A元素的直接子元素（仅一层）	div>span {color: pink;}（选择div下直接子级span）
邻接兄弟选择器	A + B	紧邻A元素后的第一个同级B元素	h2+p {color: red;}（选择h2后的第一个p）
通用兄弟选择器	A ~ B	A元素后的所有同级B元素	h2~p {color: blue;}（选择h2后的所有p）

（3）分组选择器（并集选择器）

• 定义：将不同选择器组合在一起（用逗号分割），共享同一套样式。
• 使用场景：多个元素具备相同样式，减少代码冗余。
• 语法示例：div, span, .box { color: pink; }

（4）伪类选择器

选择元素的特定状态或结构位置，符号为冒号（:）：

类别	具体选择器	作用	示例
状态伪类	a:link	未访问链接的默认样式	-
	a:visited	已访问链接的样式	-
	a:hover	鼠标悬停在链接上的样式	a:hover { text-decoration: underline; }
	a:active	链接被点击时的瞬时状态	-
	:focus	获得焦点的元素（表单常用）	input:focus { border: 2px solid blue; }
结构伪类	:first-child	一组兄弟元素中的第一个元素	ul li:first-child { color: pink; }
	:last-child	一组兄弟元素中的最后一个元素	ul li:last-child { color: green; }
	:nth-child(n)	一组兄弟元素中的第n个元素	ul li:nth-child(2) { color: blue; }
表单伪类	:disabled	禁用状态的表单元素	input:disabled { background: #f5f5f5; }
	:checked	选中状态的单选/复选按钮	input:checked { accent-color: red; }

• 链接伪类顺序：必须遵循a:link -> a:visited -> a:hover -> a:active（LVHA顺序），否则样式可能失效。
• 结构伪类 n 的取值：数字（从1开始）、关键字（odd奇数、even偶数）、公式（3n3的倍数、n+2第2个及以后、-n+3前3个）。

（5）伪元素选择器

选择元素的特定部分，符号为双冒号（::）：

选择器	作用	示例
::first-line	选择文本首行	p::first-line { font-weight: bold; }
::first-letter	选择文本首字母	p::first-letter { font-size: 24px; }
::placeholder	选择输入框占位符	input::placeholder { color: #999; }
::before	在元素内插入内容（作为第一个子元素，也是一个盒子）	div::before { content: "开始"; color: red; }
::after	在元素内插入内容（作为最后一个子元素，也是一个盒子）	div::after { content: "结束"; color: red; }

• 注意事项：
  • before 和 after 是插入的伪元素，特征类似内联元素
  • content 属性是必须的，不能省略，没有内容空引号即可

（6）属性选择器

根据元素的属性特征定位元素，灵活度高：

选择器	作用	示例
[属性]	匹配包含指定属性的元素	[disabled] { cursor: not-allowed; }
[属性=值]	匹配属性值等于指定值的元素	[type="text"] { border: 1px solid #ccc; }
[属性^=值]	匹配属性值以指定字符串开头的元素	[class^="icon-"] { font-family: iconfont; }
[属性$=值]	匹配属性值以指定字符串结尾的元素	[src$=".png"] { border: none; }
[属性*=值]	匹配属性值包含指定子串的元素	[class*="btn-"] { padding: 4px 8px; }

3. CSS书写规范与注释

（1）书写规范

1. 选择器和大括号{中间保留1个空格；
2. 属性名和属性值中间保留1个空格；
3. 每个CSS属性单独占一行（后期打包压缩不影响体积）。

（2）注释

• 快捷键：ctrl + /；
• 规范：注释内容左右两侧保持1个空格；
• AI工具注释：单个属性后空格可自动添加注释；多个属性可选中后通过AI提示词批量添加。

三、CSS文本样式

1. 分类与核心原则

• 分类：字体样式（字体、颜色、大小、粗体等）、文本布局（对齐、缩进、间距等）；
• 核心原则：文字无法直接通过CSS修改样式，需用标签包裹，通过修改标签样式实现文字样式变化。

2. 字体样式

属性	描述	常见取值	示例
color	设置字体颜色	颜色名称、十六进制、RGB、RGBA	color: red; color: #ff0000; color: rgba(255,0,0,0.5);
font-family	设置字体系列	无衬线字体（推荐网页使用）	font-family: "Microsoft YaHei", sans-serif;
font-size	设置字体大小	像素（px，绝对单位）	font-size: 16px;（建议给body统一设置，兼容浏览器）
font-style	设置字体风格	normal（正常）、italic（斜体）	em { font-style: normal; }（取消em默认斜体）
font-weight	设置字体粗细	数值（100-900）、normal（400）、bold（700）	h1 { font-weight: 400; }（取消h1默认加粗）
text-decoration	设置文本装饰	none（无）、underline（下划线）、line-through（中划线）	a { text-decoration: none; }（取消链接下划线）

• 字体颜色使用场景：学习用关键字，开发用十六进制，特殊透明效果用RGBA。
• 字体系列注意事项：属性值用逗号隔开，浏览器按顺序选择已安装的字体；网页推荐使用无衬线字体（如Arial、微软雅黑），兼容性更好。

3. 文本布局

属性	作用	核心取值	注意事项	示例
text-align	文本水平对齐	left（默认）、right、center、justify（两端对齐）	仅对块级元素生效	p { text-align: center; }
text-indent	首行缩进	长度值（如2em）	仅对块级元素生效，1em等于当前字体大小	p { text-indent: 2em; }（首行缩进2字）
letter-spacing	字符间距	数值（px）	负值可使字符重叠（需谨慎）	h1 { letter-spacing: 2px; }
line-height	行间距	像素（px）、倍数（如1.5）	行高等于盒子高度时，单行文本垂直居中	p { line-height: 1.6; }

4. font简写属性

• 作用：在一个声明中设置多个字体属性，简化代码。
• 语法：font: font-style font-weight font-size/line-height font-family;
• 注意事项：font-size和font-family为必写项；属性需按顺序书写；其他属性可省略（默认值生效）。
• 示例：body { font: 14px/1.5 "Microsoft YaHei", sans-serif; }（小米官网字体设置）

5.文字溢出显示省略号：

多行文字时调整和盒子一样的高度才不会漏字

四、CSS三大特性

1. 继承性

• 定义：子元素自动继承父元素的某些CSS样式属性，主要继承与文字相关的样式（如font-family、color、text-align等）。
• 例外情况：子元素自定义样式会覆盖继承样式；部分标签（如h标签默认加粗、链接标签默认下划线）无法通过继承修改，需单独指定样式。

2. 层叠性

• 定义：多个CSS规则可同时作用于一个元素，后定义的样式会覆盖先前定义的样式（就近原则），主要解决样式冲突问题。
• 前提：选择器权重相等时才遵循层叠性。

3. 优先级

• 定义：浏览器通过权重判断哪个样式优先生效，权重高的样式覆盖权重低的样式。

• 权重规则：

  • 选择器类型	权重值	优先级说明
    !important	无限大	强制覆盖所有规则（慎用，可能破坏样式结构）
    内联样式	(1, 0, 0, 0)	行内样式权重最高
    ID选择器	(0, 1, 0, 0)	每个ID增加该权重
    类/属性/伪类选择器	(0, 0, 1, 0)	每个该类型选择器增加该权重
    类型（标签）/伪元素选择器	(0, 0, 0, 1)	每个该类型选择器增加该权重
    通配符/继承样式	(0, 0, 0, 0)	权重最低

• 权重叠加：多个选择器组合时，权重按层级累加（不进位），例如#nav .item a的权重为(0,1,1,1)。

五、盒子模型

1. 盒子模型概述

• 定义：HTML中所有元素都被一个个“盒子”包围着，每个盒子均由四个部分组成，从内到外依次是：内容区（content）、内边距（padding）、边框（border）、外边距（margin）。
• 各组成部分说明：
  • 内容区是盒子的核心，用于存放文本、图片等实际内容，可通过width和height属性设置其尺寸；
  • 内边距是内容区与边框之间的空隙，会影响盒子的整体大小，不能为负；
  • 边框是包裹在内边距外部的线条，可设置样式、宽度和颜色；
  • 外边距是盒子与其他盒子之间的空隙，不影响盒子自身大小，可设置为负实现盒子重叠。
• 核心作用：实现精确布局，处理元素排列。

2. 盒子类型（一般分为区块盒子与行内盒子）

对比维度	区块盒子（块级元素）	行内盒子（行内元素）
默认排列方式	独占一行，自上而下排列会产生换行	一行内并排排列，直到一行排满换行
宽度与高度设置	可直接设置width和height属性，生效	无法直接设置width和height，这两个属性将不起作用，尺寸由内容决定
内外边距设置	margin和padding的上下左右均生效，会影响周围元素布局	padding和margin的上下方向不生效，仅左右方向生效
默认宽度	默认宽度为父容器的100%（占满父容器宽度）	默认宽度为自身内容的宽度
典型代表元素	div、p、h1-h6、ul、ol、li、form、header、footer等	span、a、strong、em、i、u、label、img等（img为行内块，兼具部分块级特性）
转换方式	通过display: inline 或 display: inline-block 可转换为行内/行内块盒子	通过display: block 或 display: inline-block 可转换为块级/行内块盒子

3. 盒子模型尺寸计算

• content-box: width = 内容的宽度
• border-box: width = border + padding + 内容的宽度

实际开发中提倡使用border-box!

六、盒子边框（border）

1. 边框概述

边框是盒子模型的重要组成部分，包裹在内边距外部，可通过CSS属性设置其样式、宽度和颜色，用于分隔元素或增强元素视觉效果。

2. 核心属性

属性	作用	常用值	示例代码
border-style	设置边框样式（必选，否则边框不显示）	solid(实线)、dashed(虚线)、dotted(点线)、double(双线)、none(无边框)	border-style: solid;
border-width	设置边框宽度	像素值(px)、thin、medium、thick	border-width: 2px;
border-color	设置边框颜色	颜色名称、十六进制、RGB	border-color: #333;

3. 复合写法

语法：border: 宽度 样式 颜色;（边框有三部分属性值组成，中间必须空格隔开。属性顺序可调整，要让边框可见，样式必须设置，默认为none[无边框]）

示例：border: 1px solid #ccc;（设置1像素灰色实线边框）

4. 单边边框设置

可单独设置某一边的边框，属性为border-方向 顺时针（top/right/bottom/left）-样式/宽度/颜色，示例：

• border-top: 2px dashed red;（上边框：2像素红色虚线）
• border-left-color: blue;（左边框颜色：蓝色）

5. 边框圆角（border-radius）

作用：设置盒子边框的圆角效果，增强元素美观度

语法：border-radius: 数值;（单位为px或百分比，数值越大圆角越明显）

示例：border-radius: 8px;（8像素圆角）、border-radius: 50%;（圆形，需保证盒子宽高相等）

记忆：border-radius: 左上角 右上角 右下角 左下角 (顺时针 中间空格隔开 不需要圆角设置为0即可)

圆角不同写法示例：

写法类型	语法示例	效果说明
统一圆角	border-radius: 8px;	四个角圆角大小均为8px
分角设置（顺时针）	border-radius: 4px 8px 12px 16px;	左上角4px、右上角8px、右下角12px、左下角16px
对角相同设置	border-radius: 6px 10px;	左上角、右下角6px；右上角、左下角10px（两两对角相同）
单边圆角设置	border-top-left-radius: 5px;	仅设置左上角圆角为5px，其他角默认无圆角
圆形效果	border-radius: 50%;	盒子宽高相等时呈现圆形，宽高不等时呈现椭圆形

七、内边距与外边距（padding & margin）

1. 内边距（padding）

• 定义：内容区与边框之间的空隙，会影响盒子的整体大小，无法设置为负值。
• 核心属性：可通过padding设置四方向内边距，也可单独设置某一方向（padding-top/right/bottom/left）。
• 取值与写法：
  • 单一值：padding: 10px;（四方向内边距均为10px）
  • 两个值：padding: 10px 20px;（上下10px，左右20px）
  • 三个值：padding: 10px 20px 30px;（上10px，左右20px，下30px）
  • 四个值：padding: 10px 20px 30px 40px;（上、右、下、左，顺时针顺序）

2. 外边距（margin）

• 定义：盒子与其他盒子之间的空隙，不影响盒子自身大小，可设置为负值实现盒子重叠。
• 核心属性：可通过margin设置四方向外边距，也可单独设置某一方向（margin-top/right/bottom/left）。
• 取值与写法：与padding一致，支持单一值、两个值、三个值、四个值的顺时针写法。
• 特殊特性：
  • 块级元素水平居中：给块级盒子设置margin: 0 auto;（左右外边距自动平分），需指定块级盒子宽度。
  • 行内元素左右外边距生效，上下外边距无效，行内元素设置宽度和高度也无效。但是可替换行内元素(如 <img>, <input>, <button>）上下左右全部有效.
  • 同上：行内元素设置宽度和高度也无效。但是可替换行内元素有效。
• 外边距折叠：区块元素上下外边距会出现折叠(合并)的情况：并列关系(兄弟)的区块元素，两个上下外边距将合并成一个外边距，其大小等于最大的单个外边距。
• 外边距塌陷：区块元素上下外边距出现塌陷的情况：给子盒子设置上下外边距会让父盒子塌陷移动。解决方案：
  • 给父盒子添加边框
  • 给父盒子添加内边距
  • 给父盒子添加：overflow:hidden;属性

3. 内边距与外边距区别

对比维度	内边距（padding）	外边距（margin）
作用范围	盒子内部，内容与边框之间	盒子外部，与其他盒子之间
对盒子大小影响	影响（标准盒模型下增加尺寸）	不影响（仅控制间距）
是否支持负值	不支持	支持
典型用途	调整内容在盒子内的位置	控制元素之间的间距、实现水平居中

八、盒子背景（background）

1. 背景相关属性

属性	作用	常用值	示例代码
background-color	设置元素背景颜色	颜色名称、十六进制、RGB、透明度	background-color: #f0f0f0;
background-image	设置背景图片	url(image.jpg)	background-image: url(bg.png);
background-repeat	控制背景图片是否重复	repeat(默认)、no-repeat、repeat-x、repeat-y	background-repeat: no-repeat;
background-position	定位背景图片位置	x y（如center top，或px、%单位）	background-position: center;
background-size	调整背景图片尺寸	默认auto、cover(覆盖)、contain(包含) 或px、%	background-size: cover;
background-attachment	背景是否随页面滚动	scroll(默认滚动)、fixed(固定)	background-attachment: fixed;

注意：背景固定是相对于当前页面视口来说的，并不是某个盒子。

2. 背景复合写法

语法：background: 颜色 图片 重复 固定 位置/尺寸;（属性顺序无关）

3. 背景渐变

通过**linear-gradient(线性渐变)和radial-gradient(径向渐变)**实现渐变背景，无需图片即可创建美观效果：

• 线性渐变：方向可以是方位名词，也可以是deg(角度)；色标的位置不是必须写的。

类型	描述	示例代码
线性渐变	方向可控，可设置多个色标及位置	background: linear-gradient(to right, #ff6b6b, #4ecdc4);background-image:linear-gradient(90deg, #ff6b6b 30%, #4ecdc4 70%)
径向渐变	形状和位置可控，从中心向外扩散	radial-gradient(circle, #ff9a9e, #fad0c4);

文字背景渐变技巧：

background: linear-gradient(to right, pink, red);
-webkit-background-clip: text; /* 兼容性写法，裁剪背景至文字范围 */
background-clip: text;
-webkit-text-fill-color: transparent; /* 文本填充色透明 */

九、盒子阴影（box-shadow）

• 作用：在元素框架上添加阴影效果，增强元素立体感或突出显示
• 语法：box-shadow: X轴偏移量 Y轴偏移量 模糊半径 扩散半径 颜色;（X、Y轴偏移量为必选项，其余可省略采取默认值 多个属性用空格隔开）
• 特殊说明：默认外阴影，添加inset关键字可改为内阴影
• 示例：.nav li { box-shadow: 0 15px 30px rgba(0,0,0,.1); }

十、过渡（transition）

• 作用：元素属性值变化时，实现平滑过渡（而非瞬间切换），提升交互体验
• 语法：transition: 过渡属性 过渡时间;（过渡属性为all时表示所有属性变化都过渡，时间单位为秒s）
• 示例：input:hover { transition: all 0.3s; }（鼠标经过输入框时，所有属性变化平滑过渡0.3秒）

十一、样式初始化

1. 初始化目的

浏览器对HTML元素有默认样式（如margin、padding、font-size），且不同浏览器默认样式可能不一致，导致跨浏览器兼容性问题。初始化可统一默认样式、减少冗余代码、提高可维护性。

2. 最佳实践

• 小型项目（小白练手）：简单重置
  

• 中大型项目：推荐使用Normalize.css，需引入文件：<link rel="stylesheet" href="./css/Normalize.css">（官网：https://necolas.github.io/normalize.css/）

十二、字体图标（iconfont）

1. 定义与优势

• 定义：将图标以字体形式嵌入网页，可像文字一样通过CSS控制样式（颜色、大小、阴影等）
• 优势：
  • 矢量缩放（无损）：无损放大缩小
  • 样式灵活：通过CSS直接修改颜色，大小，阴影等属性
  • 减少HTTP请求：一个字体文件可包含多个图标，比多张图片更高效
  • 兼容性好：支持所有现代浏览器，甚至部分旧版浏览器

2. 常用图标库

图标库	特点	官网链接
Font Awesome	图标全，支持免费版和Pro付费版	fontawesome.com
Bootstrap Icons	Bootstrap生态内，简单易用	icons.getbootstrap.com
icomoon	支持自定义图标字体生成	icomoon.io
iconfont（阿里）	免费，含淘宝、阿里妈妈图标库	http://www.iconfont.cn/

3. 使用步骤

1. 下载字体图标文件，保存到项目目录
2. 在HTML中引入对应的CSS文件（link标签）
3. 通过标签调用类名选择对应字体图标，按需调整样式

十三、表格相关样式

核心优化点：HTML表格可以通过CSS进行美化：合并相邻边框，避免边框并排显示，提升表格美观度

语法：border-collapse: collapse;（合并单元格边框）

十四、精灵图（CSS Sprite）

1. 定义与优势

• 定义：将多个小图标或图像合并到一张大图中，通过调整background-position属性显示特定部分
• 优势：
  • 减少HTTP请求：多个小图标合并为一张图片，只需一次请求
  • 提升性能：减少网络开销，尤其适合移动端或低宽带场景
  • 统一管理图标: 方便维护图标集避免文件分散
• 通过合理使用 CSS 精灵图，可以有效优化网页性能。对于复杂场景（如高清屏适配），建议结合 SVG 或字体图标使用。

2. 实现原理

1. 给盒子添加背景图片（精灵图）
2. 通过background-position调整背景位置，定位到目标图标（注意网页坐标：X轴向右为正，Y轴向下为正）
3. 设置盒子尺寸与目标图标一致，避免显示多余图标

辅助工具：在线测量工具（https://www.tugaigai.com/online_ps/）可精准测量图标位置和尺寸