CSS学习

Web-CSS-Study

<u> 作者：jason-wrj </u>

<u> 分类：服务器/网络服务器/CSS </u>

<u> 标签：Server, Web Server, CSS </u>

1 概述

1.1 CSS 的基本概念

CSS（Cascading Style Sheets，层叠样式表）是一种用于描述HTML或XML（包括 SVG、XHTML 等）网页结构化文档（外观和格式视觉表现）呈现方式的样式表语言，由W3C制定标准。

CSS 通过定义网页元素的字体、间距、颜色、布局、动画等外观视觉属性，控制网页内容外观和布局，实现网页美化。

CSS 通过将样式与内容分离，使得网页设计更加灵活、高效，并支持动态变化的布局和交互效果。

CSS 是现代网页设计（前端开发）的核心技能之一，通过实践和参考优秀案例可以快速掌握。

1.2 CSS 的发展历程

1994年：由哈坤·利（Håkon Wium Lie）首次提出，旨在解决HTML样式与内容混杂导致的代码臃肿问题。
1996年：CSS1成为W3C推荐标准，支持基础样式控制。
1998年：CSS2增加浮动、定位等复杂布局功能。
2010年：CSS3引入圆角、阴影、动画等现代特性，与HTML5共同成为网页开发主流。

1.3 CSS 的版本演进

CSS3：当前主流版本，模块化引入弹性布局、动画、媒体查询等功能。
向后兼容：新特性在不支持的老浏览器中可平稳降级。

1.4 CSS 的应用场景

网页设计
- 网页视觉美化（字体、颜色、背景）。
- 构建响应式网站，适配不同设备（手机、平板、桌面）。
- 动态交互效果（悬停、点击反馈）。
- 打印样式优化（@media print）。
- 组件化开发（配合CSS-in-JS或CSS Modules）。
实现复杂的 UI 组件
- 如导航栏、卡片布局、模态框。
主题与样式库
- 开发可复用的 UI 框架（如 Bootstrap、Tailwind CSS）。
- 动态切换主题（如暗色模式）。
性能优化
- 使用 CSS 压缩工具减少文件体积。
- 利用缓存策略提升加载速度。
国际化与无障碍
- 通过逻辑属性支持多语言排版（如阿拉伯语的 RTL 布局）。
- 确保样式兼容屏幕阅读器。

1.5 CSS 的核心特点

分离性

内容与表现分离，HTML 专注结构，CSS 控制样式，便于维护和协作。CSS 将样式与 HTML 结构分离，提升代码可维护性。修改样式无需调整 HTML 结构，只需更新 CSS 文件。
层叠性

多个样式规则可叠加作用于同一元素，按优先级（如!important> 内联样式 > ID 选择器 > 类选择器 > 标签选择器）确定最终效果。
继承性

父元素的样式（如字体、颜色）可自动传递到子元素，减少重复代码。
响应式设计

通过媒体查询（Media Queries）适配不同设备屏幕（如手机、电脑），实现自适应布局。
精准控制

像素级调整元素位置、大小、边框等。
样式复用

一套样式可应用于多个页面，减少重复代码。
性能优化

支持外部样式表缓存，减少重复代码加载。
丰富效果

支持渐变、圆角、阴影、动画等现代视觉特性（CSS3）。
可扩展性

通过预处理器（如 Sass/Less）或后处理器（如PostCSS）增强功能。
跨浏览器一致性

通过标准化属性（如 display: flex）减少样式差异。

1.6 CSS 的功能作用

控制网页外观
- 颜色表示：支持十六进制（如 #FFFF00 表示黄色）、RGB 等格式。
- 文本样式：字体、颜色、对齐方式。
- 排版控制 ：可以精确地设置字体、字号、行距、字距等排版属性，实现丰富的文本排版效果，如不同的字体样式、大小写转换、文本阴影等。
- 外观美化 ：可设置元素的颜色、背景图像、边框样式、圆角、阴影等外观属性，使网页更具视觉吸引力。
实现复杂的布局（（Flexbox）弹性盒子、（Grid）网格布局、响应式设计）。
- 布局设计 ：通过定位属性（如 position）、盒模型（margin、padding、border、width、height 等）以及弹性布局（flex 布局）、网格布局（grid 布局）等技术，实现复杂的网页布局，如响应式布局、多列布局等。
管理元素的动态状态（悬停效果、动画）。
- 交互效果 ：利用伪类和 CSS 动画（@keyframes）、过渡（transition）等特性，为网页添加交互效果，如按钮悬停效果、点击效果、元素的动画过渡、关键帧动画等。
内容与样式的分离
- 通过 CSS 将网页的结构（HTML）与表现（CSS 样式）解耦，实现内容（HTML）与样式（CSS）分离，便于维护和更新，提升代码可维护性和复用性。
- 允许通过一个样式表文件统一管理多个页面的样式。

提升开发效率
- 避免重复的 HTML 标签（如 <font> 或表格布局），减少代码冗余。
- 支持继承和层叠规则，简化样式覆盖逻辑。

1.7 CSS 的工作原理

解析 HTML，生成 DOM 树。
解析 CSS ，生成 CSSOM 树。
合并 DOM + CSSOM，构建渲染树。
布局与绘制，计算元素位置并渲染页面。

1.8 CSS 的优势与局限

优势
- 性能优化：外部样式表可被浏览器缓存，减少重复加载。
- SEO友好：结构清晰的HTML更易被搜索引擎抓取。
- 维护便捷：全局样式可通过单一CSS文件统一调整。
局限
- 浏览器兼容性问题（如旧版IE不支持部分CSS3属性）。
- 学习曲线较陡，需掌握选择器优先级、盒模型等复杂概念。
- CSS 本身主要用于样式和布局，对于页面的结构和内容逻辑的控制能力较弱，通常需要与 HTML 和 JavaScript 配合使用来实现更复杂的网页功能。
- 一些复杂的样式效果可能需要使用较多的代码和技巧来实现，并且在不同浏览器中可能存在兼容性问题，需要进行额外的测试和调整。

2 CSS 引入方式与优先级

2.1 外部样式表（最常用）

外部样式表（External style sheet），编写在HTML文档中的<head> </head>头部元素之间，通过<link>元素标签引入独立 CSS 文件，方便实现多页面复用：

<head>
    <link rel="stylesheet" href="style.css">
</head>

2.2 内部样式表

内部样式表（Internal style sheet），通常编写在HTML文档中的<head> </head>头部元素之间的<style> </style>元素内，通过在<style>元素内，（且需要写在 link 外部样式表的后面，否则会被外部样式表优先覆盖内部样式表），直接定义 CSS 样式，仅当前页面有效：

<style>
    body { background: #f0f0f0; }
</style>

2.3 内联样式表

内联样式表（Inline style），直接写在 HTML 文档元素标签的style属性中，优先级最高但不利于维护：

<p style="color: purple;">示例文本</p>

2.4 样式表的优先级

内联样式 > 内部样式 > 外部样式 > 浏览器默认样式。

3 CSS 的基础语法

3.1 CSS 样式规则

由一系列规则集组成，规则集（ruleset）常简称为规则（rule）。每条规则集（ruleset）是由选择器（selector）和声明块构成。如下所示：

selector_1,     /* 选择器1 */
selector_2,     /* 选择器2 */
selector_n {    /* 选择器n */
  property_1: value_1; /* 声明块1 */ /* 属性名_1: 属性值_1 */
  property_2: value_2; /* 声明块2 */ /* 属性名_2: 属性值_2 */
  property_n: value_n; /* 声明块n */ /* 属性名_n: 属性值_n */
}

选择器

选择器（Selectors）用于指定要应用样式的 HTML 或 XML 元素（如#id、.class、h1），例如： #id 用于选择具有特定 ID 的元素，.class 用于选择具有特定类的元素，p 用于选择所有段落元素等。
声明块

声明块（Declaration Block）由一对大括号 {} 包围，其中包含一条或多条（属性: 值;）声明（Declaration）。每条声明都是由属性和值组成，用于指定元素的样式，例如（ color: black;）表示设置元素的文本颜色为黑色。
- 属性（Property）：是一个标识符，用可读的名称来表示其特性。如color、font-size、margin等样式属性（style attribute）。
- 值（Value）：属性的具体设置，每个属性都包含一个有效值的集合，它有正式的语法和语义定义。如red、16px、auto等。（属性值与单位不能有空格，16 px是错误的，正确的写法是16px）。
注释

使用 /* 注释内容 */，添加 CSS 层叠样式表中的注释内容。

3.2 CSS 样式选择器

选择器（Selectors）至少要有一个，通过ID、类名、元素标签名等精准定位HTML元素，并指定要应用的样式（如 #id、.class、p），或通过属性、伪类等实现动态样式。如果包含多个选择器的集合分组，则用逗号,分隔。

#header { background-color: gray; } /* ID选择器 */
.text-red { color: red; } /* 类选择器 */
[type="text"] { border: 1px solid black; } /* 属性选择器 */
:hover { } /* 伪类（状态） */
::before { } /* 伪元素（生成内容） */
p { color: blue; } /* 元素标签选择器 */
div p { margin: 10px; }      /* 关系组合选择器 */ /* 后代选择器 */
div > p { padding: 5px; }    /* 关系组合选择器 */ /* 子选择器 */
h1 + p { font-weight: bold; } /* 关系组合选择器 */ /* 相邻兄弟选择器 */

常见的选择器类型，有以下几种：

ID 选择器

使用唯一的 ID 标识符来选择元素，匹配具有同名 ID 属性值的元素，（ID 标识符不要以数字开头，个别浏览器不起作用）。ID 前需要加上（井号 #），如 #myId 只会选中页面上唯一具有 id="myId" 属性的元素。

例如：
- #bg1 { background: blue; }，匹配具有 id 属性，且 id 属性值为 bg1 的所有元素。
类选择器

使用类名来选择元素，匹配具有同名 class 属性值的元素，（类名不要以数字开头，个别浏览器不起作用）。类名前需要加上（点号 .），如 .myClass 会选中所有具有 class="myClass" 属性的元素。

例如：
- .text1 { font-size: 16px; }，匹配具有 class 属性，且 class 属性值为 text1 的所有元素。
属性选择器

根据元素的属性及其值来选择元素，如 [type="text"] 会选中所有具有 type="text" 属性的元素。

例如：
- [attribute] { background: red; } ，匹配具有 attribute 属性的所有元素。
- [attribute1=value1] { background: red; } ，匹配具有 attribute1 属性，且 attribute1 属性值与 value1 等同的所有元素。
- [attribute2^=value2] { background: red; }，匹配具有 attribute2 属性，且 attribute2 属性值以 value2 开头的所有元素。
- [attribute3$=value3] { background: red; }，匹配具有 attribute3 属性，且 attribute3 属性值以 value3 结尾的所有元素。
- [attribute4*=value4] { background: red; }，匹配具有 attribute4 属性，且 attribute4 属性值包含 value4 的所有元素。
- [attribute5~=value5] { background: red; }，匹配具有 attribute5 属性，且 attribute5 属性值包含一个以空格分隔的值与 value5 等同的所有元素。即 attribute5 属性的值里，必须有 value5这个单词，并且value5要与其它单词之间有空格分隔。
- [attribute6|=value6] { background: red; }，匹配具有 attribute6 属性，且 attribute6 属性值与 value6 等同或以 value6 开头的所有元素。
伪类选择器

用于选择处于特定状态的元素，如 :hover 用于选择鼠标悬停在元素上时的状态，:active 用于选择鼠标点击元素时的状态等。例如：a:hover { color: green; }。

例如：
- :first-child，结构性伪类选择器，匹配在一组兄弟元素中的第一个元素。
- :last-child，结构性伪类选择器，匹配在一组兄弟元素中的最后一个元素。
- :nth-child(n)，结构性伪类选择器，根据元素在父元素内的子元素列表中的索引来匹配选择元素。n 表示元素在子元素列表中的第几个。
- :nth-last-child(n)，结构性伪类选择器，匹配子元素列表中的倒数第 n 个子元素。
- :nth-child(odd)，结构性伪类选择器，根据元素在父元素内的子元素列表中的索引来匹配选择元素。odd 表示元素在兄弟元素列表中的位置是奇数：1、3、5……。
- :nth-child(even)，结构性伪类选择器，根据元素在父元素内的子元素列表中的索引来匹配选择元素。even 表示元素在兄弟元素列表中的位置是偶数：2、4、6……。
- :only-child，结构性伪类选择器，匹配仅有一个子元素的元素。
- :first-of-type，结构性伪类选择器，匹配在一组兄弟元素中其类型的第一个元素。
- :last-of-type，结构性伪类选择器，匹配在（它父元素的）子元素列表中，最后一个给定类型的元素。
- :only-of-type，结构性伪类选择器，匹配任意一个元素，这个元素没有其他相同类型的兄弟元素。
- :nth-of-type(n)，结构性伪类选择器，匹配相同类型元素的第 n 个元素。
- :nth-last-of-type(n)，结构性伪类选择器，匹配相同类型元素的倒数第 n 个元素。
- :checked，UI元素状态伪类选择器，匹配选中状态的元素，选择任何处于选中状态的radio(<input type="radio">)，checkbox (<input type="checkbox">) 或 select 元素中的 ("option") 元素。即匹配任意被勾选/选中的 radio(单选按钮),checkbox(复选框),或者 option(select 中的一项) 。
- :enabled，UI元素状态伪类选择器，匹配任何已启用的元素。如果元素可以被激活（例如被选择、单击、输入文本等），或者能够获得焦点，那么它就是启用的。
- :disabled，UI元素状态伪类选择器，匹配任何被禁用的元素。如果一个元素不能被激活（如选择、点击或接受文本输入）或获取焦点，则该元素处于被禁用状态。
- :in-range，UI元素状态伪类选择器，匹配指定范围以内值的元素。
- :out-of-range，UI元素状态伪类选择器，匹配指定范围以外值的元素。
- :optional，UI元素状态伪类选择器，匹配没有 "required" 属性的元素。
- :required，UI元素状态伪类选择器，匹配有 "required" 属性的元素。
- :invalid，UI元素状态伪类选择器，匹配无效的元素。
- :read-only，UI元素状态伪类选择器，匹配只读状态的元素，表示元素不可被用户编辑的状态（如锁定的文本输入框）。
- :read-write，UI元素状态伪类选择器，匹配可读可写状态的元素。
- :focus，UI元素状态伪类选择器，匹配获得焦点的元素（如表单输入）。当用户点击或轻触一个元素或使用键盘的 Tab 键选择它时，它会被触发。
- :link，UI元素状态伪类选择器，所有未访问链接。
- :visited，UI元素状态伪类选择器，匹配在用户访问链接后生效。但由于出于隐私保护的原因，使用该选择器可以修改的样式非常有限。
- :hover，UI元素状态伪类选择器，匹配在用户使用指针设备与元素进行交互时匹配，但不一定激活它。通常在用户将光标（鼠标指针）悬停在元素上时触发。
- :active，UI元素状态伪类选择器，匹配被用户激活的元素。它让页面能在浏览器监测到激活时给出反馈。当用鼠标交互时，它代表的是用户按下按键和松开按键之间的时间。
- :empty，UI元素状态伪类选择器，匹配没有子元素的元素。
否定反选伪类选择器（negation pseudo-class）

用来匹配不符合一组选择器的元素，它的作用是防止特定的元素被选中。

例如：
- :not(selectors)，匹配与selectors选择器相反的所有元素。
元素选择器

直接使用 HTML 元素的名称作为选择器，如 p 会选中页面上所有的 <p> 元素。

例如：
- p { color: blue; }，匹配所有p元素。
伪元素选择器
- ::first-letter，用于将样式应用于区块容器第一行的第一个字母，但仅当其前面没有其他内容（例如图像或行内表格）时才有效。
- ::first-line，只能在块容器中，匹配在区块容器的第一行应用样式。
- ::before，会创建一个伪元素，作为所选中元素的第一个子元素。通常用于为具有 content 属性的元素添加修饰性的内容。此元素默认情况下是行级的。
- ::after，会创建一个伪元素，作为所选中元素的最后一个子元素。通常用于为具有 content 属性的元素添加修饰性的内容。此元素默认情况下是行向布局的。
关系组合选择器（combinator）

包含祖先后代选择器（A B）、第一级父子元素选择器（A > B）、相邻兄弟选择器（A + B）、后续兄弟选择器（A ~ B）等。

例如：
- div p { color: blue; }，祖先后代选择器，匹配所有 div 元素内的所有 p 元素。
- .class1>p { color: blue; }，第一级父子元素选择器，匹配具有 class 类属性，且类属性的值为 .class1 的所有元素下的第一级 p 子元素。
- h1+p { color: blue; }，相邻兄弟选择器，匹配所有 h1 元素后面紧接相邻着的第一个 p 元素。
- h2~p { color: blue; }，后续兄弟选择器，匹配所有 h2 元素后面所有的 p 元素。
通配选择器（universal selector）

通配符选择器（*），用于匹配当前 HTML 文档中所有的元素。

例如：
- * { color: red; }，匹配当前 HTML 文档中所有的元素，并设置颜色为红色。
集合分组选择器

上述所有选择器均可集合成同一分组选择器，通过（逗号 ,）分隔不同的选择器。

例如：
- div p, .class1>p, h1+p, h2~p { color: red; }，集合匹配所有 div 元素内的所有 p 元素，集合匹配具有 class 类属性，且类属性的值为 .class1 的所有元素下的第一级 p 子元素，集合匹配所有 h1 元素后面紧接相邻着的第一个 p 元素，集合匹配所有 h2 元素后面所有的 p 元素。

3.3 CSS 样式声明块

包含一个或多个声明，用花括号 { } 包裹。每个声明由属性和值组成，不同声明用分号;分隔。

样式属性与属性值
- 样式属性（如color、margin），用于定义样式特性。如 background-color 用于设置元素的背景颜色，font-size 用于设置字体大小等。
- 属性值（如red、20px），为样式属性指定具体效果的值。如 background-color: #ff0000; 表示将背景颜色设置为红色，font-size: 16px; 表示将字体大小设置为 16 像素。
声明缩写优化
- margin: 10px 20px;（上下10px，左右20px）。

3.4 CSS 的 at 规则

以 @（）开始，随后是标识符，一直到以分号或右大括号结束。

每个 at 规则由其标识符定义，可能有它自己的语法。

at 规则涵盖了 meta 信息（比如 @charset @import）、条件信息（比如 @media @document）、描述信息（比如 @font-face）。

@charset——定义样式表使用的字符集。
@import——告诉 CSS 引擎引入一个外部样式表。
@namespace——告诉 CSS 引擎必须考虑 XML 命名空间。
@layer ——声明了一个层叠层，同一层内的规则将级联在一起，这给予了开发者对层叠机制的更多控制。

3.5 CSS 的语法示例

body {
  background: #f0f0f0; /* 浅灰色背景 */
  font-family: "Microsoft YaHei"; /* 字体 */
}

h1 {
  color: #0A0000;      /* 深红色标题（RGB 10,0,0） */
}

/* 选择所有 <p> 标签，声明设置字体颜色和背景 */
p {
  color: blue;
  background-color: #f0f0f0;
}

/* 选择 class 为 "highlight" 的元素,声明 */
.highlight {
  font-weight: bold;
  border: 1px solid red;
}

/* 选择 id 为 "header" 的元素 */
#header {
  text-align: center;
  padding: 20px;
}

4 核心组成

4.1 盒模型（Box Model）

定义元素的空间占用规则，每个元素在页面中都被视为一个矩形盒子，由内容区（content）、内边距（padding）、边框（border）和 外边距（margin）组成），是布局的基础。

从内部到外围，分别为：

content（内容）：盒子的内容，显示文本和图像。
padding（内边距）：清除内容周围的区域，内边距是透明的。
border（边框）：围绕在内边距和内容外的边框。
margin（外边距）：清除边框外的区域，外边距是透明的。

.box {
  width: 300px;       /* 内容区宽度 */
  padding: 20px;      /* 内边距 */
  border: 1px solid black; /* 边框 */
  margin: 10px;       /* 外边距 */
  box-sizing: border-box; /* 宽度包含padding和border */
}

通过设置 box-sizing 属性，可分为两种盒模型。

box-sizing: content-box;，设置为标准模式的盒模型，此种模式下，矩形盒子的总宽度和总高度，仅指内容区的宽度和高度。
box-sizing: border-box;，设置为怪异模式的盒模型，此种模式下，矩形盒子的总宽度和总高度，包含了（内容区+内边距+边框）的宽度和高度。

/* 默认：width/height 仅指内容区域 */
box-sizing: content-box;

/* width/height 包含内容、内边距和边框 */
box-sizing: border-box;

4.2 布局系统

浮动（Float）

传统布局，通过 float 实现元素左右对齐，实现文字环绕效果，常用于早期的多列布局。可分为设置浮动（float）、清除浮动（clear）。

.float-left { 
    float: left; /* 浮动（Float） */
}
.clearfix::after {
    content: " ";
    display: table;
    clear: both; /* 清除浮动 */
}

定位（Positioning）

传统布局，通过 position: static/relative/absolute/fixed/sticky; 控制元素的绝对或相对位置。可分为默认状态（static）、相对定位（relative）、绝对定位（absolute）、固定定位（fixed）、粘性定位（sticky）。
- 默认状态（static）：HTML 元素的默认值，即没有定位。
  
  static 定位的元素不会受到 top、bottom、left、right 这4个属性影响。
- 相对定位（relative）：relative 定位的元素位置，是相对其正常位置。
  
  移动 relative 定位的元素，元素原本所占的空间（会保留）不会发生改变。
  
  relative 定位元素经常被用来作为绝对定位元素的容器块。
- 绝对定位（absolute）：absolute 定位的元素位置，是相对于已定位的父元素，如果没有已定位的父元素。那么absolute 定位的元素的位置，则是相对于 <html>。
  
  absolute 定位的元素和其他元素重叠，与文档流无关，不占据空间。
- 固定定位（fixed）：fixed 定位的元素位置相对于浏览器窗口是固定位置。
  
  即使窗口是滚动的，fixed 定位的元素也不会移动。
  
  fixed 定位的元素和其他元素重叠，与文档流无关，不占据空间。
- 粘性定位（sticky）：sticky 定位的元素位置，是是依赖于用户的滚动位置来定位，且是在 relative 与 fixed 定位之间切换。
  
  当页面滚动没有超出目标区域时（跨越特定阈值前），sticky 定位的行为，像 relative 。当页面滚动超出目标区域时（跨越特定阈值后），sticky 定位的表现，像 fixed，会固定在目标位置。
  
  这个特定阈值指的是 top、bottom、left、right 这4个属性之一，指定这4个属性阈值的其中任何1个，才会使粘性定位生效。否则其行为与相对定位相同。
- 定位的重叠属性：
  
  定位后的元素与文档流无关，定位元素可以覆盖页面上的其它元素。通过 z-index 属性，可以指定元素的堆叠顺序（即指定哪个元素在前面，哪个在后面）。
  
  一个元素可以有正数或负数的 z-index 堆叠顺序，具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。而如果两个定位元素重叠，没有指定 z - index 属性值，那么最后定位在 HTML 代码中的元素将被显示在最前面。

.static {
    position: static; /* 默认状态 */
}
.relative {
    position: relative; /* 相对定位 */
}
.absolute {
    position: absolute; /* 绝对定位 */
    top: 10px; 
    left: 20px;
}
.fixed {
    position: fixed; /* 固定定位 */
    bottom: 0;
}
.sticky {
    position: sticky; /* 粘性定位 */
    top: 0;
}

定位相关属性

属性	说明	值
`position`	指定元素的定位类型。	`static`、`relative`、 `absolute`、`fixed`、 `sticky`、`inherit`
`top`	定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。	`auto`、`length`、 `%`、`inherit`
`right`	定义了定位元素右外边距边界与其包含块右边界之间的偏移。	`auto`、`length`、 `%`、`inherit`
`bottom`	定义了定位元素下外边距边界与其包含块下边界之间的偏移。	`auto`、`length`、 `%`、`inherit`
`left`	定义了定位元素左外边距边界与其包含块左边界之间的偏移。	`auto`、`length`、 `%`、`inherit`
`z-index`	设置元素的堆叠顺序。	`number`、`auto`、 `inherit`
`overflow`	只工作于指定高度的块元素上，用于控制内容溢出元素框时显示的方式。	`auto`、`hidden`、 `scroll`、`visible`、 `inherit`
`overflow-x`	指定如何处理右边/左边边缘的内容溢出元素的内容区域。	`auto`、`hidden`、 `scroll`、`visible`、 `no-display`、`no-content`
`overflow-y`	指定如何处理顶部/底部边缘的内容溢出元素的内容区域。	`auto`、`hidden`、 `scroll`、`visible`、 `no-display`、`no-content`
`clip`	剪辑一个绝对定位的元素。	`shape`、`auto`、 `inherit`
`cursor`	显示光标移动到指定的类型。	`auto`、`default`、 `pointer`、`crosshair`、 `move`、`wait`、 `text`、`help`、`url`、 `e-resize`、`ne-resize`、 `nw-resize`、`n-resize`、 `se-resize`、`sw-resize`、 `s-resize`、`w-resize`、

弹性盒子（Flexbox）

现代新式布局，设置一维弹性布局，用于简化响应式布局。适合简单对齐和空间分配。

弹性盒子由弹性容器（Flex container）和弹性子元素（Flex item）组成。

通过设置 display属性的值为 flex 或 inline-flex ，将显示布局定义为弹性容器。弹性容器内包含了一个或多个弹性子元素。

相关属性：flex，flex-basis，flex-direction，flex-flow，flex-grow，flex-shrink，flex-wrap，order，align-content，align-items，align-self，justify-content，place-content，row-gap，column-gap，gap。
- flex-direction（指定弹性子元素在父容器中的位置）：row | row-reverse | column | column-reverse;。
  - row：横向从左到右排列（左对齐），默认的排列方式。
  - row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
  - column：纵向排列。
  - column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。
- flex-wrap（用于指定弹性盒子的子元素换行方式）：nowrap | wrap | wrap-reverse | initial | inherit;。
  - nowrap：默认，弹性容器为单行。该情况下弹性子项可能会溢出容器。
  - wrap：弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行。
  - wrap-reverse：反转 wrap 排列。
- flex-flow（设置或检索弹性盒模型对象的子元素排列方式）：flex-direction flex-wrap|initial|inherit;。
- flex（设置弹性盒子的子元素如何分配空间）：flex-grow flex-shrink flex-basis|auto|initial|inherit;。
- flex-grow（设置或检索弹性盒子的扩展比率）：number | initial | inherit;。
- flex-shrink（flex 元素的收缩大小）：number | initial | inherit;。
- flex-basis（设置或检索弹性盒伸缩基准值）：number | auto | initial | inherit;。
- justify-content（沿着弹性容器的主轴线（横轴），进行内容对齐）：flex-start | flex-end | center | space-between | space-around;。
  - flex-start：弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。
  - flex-end：弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。
  - center：弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）。
  - space-between：弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。
  - space-around：弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）。
- align-items（设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式）：flex-start | flex-end | center | baseline | stretch;。
  - flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
  - flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
  - center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
  - baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
  - stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。
- align-content（用于修改 flex-wrap 属性的行为）：flex-start | flex-end | center | space-between | space-around | stretch;。
  
  align-content 类似于 align-items, 但 align-content 不是设置弹性子元素的对齐，而是设置各个行的对齐。
  - stretch：默认。各行将会伸展以占用剩余的空间。
  - flex-start：各行向弹性盒容器的起始位置堆叠。
  - flex-end：各行向弹性盒容器的结束位置堆叠。
  - center：各行向弹性盒容器的中间位置堆叠。
  - space-between：各行在弹性盒容器中平均分布。
  - space-around：各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。
- align-self（在弹性子元素上使用，覆盖容器的 align-items 属性）：auto | stretch | center | flex-start | flex-end | baseline | initial | inherit;。
  - auto：默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"。
  - stretch：元素被拉伸以适应容器。
  - center：元素位于容器的中心。
  - flex-start：元素位于容器的开头。
  - flex-end：元素位于容器的结尾。
  - baseline：元素位于容器的基线上。
  - initial：设置该属性为它的默认值。
  - inherit：从父元素继承该属性。
- order（设置弹性盒子的子元素排列顺序）：number | initial | inherit;。

.flexbox-container {
    display: flex;           /* 创建弹性容器 */
    justify-content: center; /* 水平居中对齐 */
    /* justify-content: space-between; */ /* 主轴对齐方式 */
    align-items: center;     /* 垂直居中对齐 */
    /* align-items: center; */ /* 交叉轴对齐方式 */
}

网格布局（Grid）

现代新式布局，设置二维网格布局，用于实现复杂页面结构。网格是一组相交的水平线和垂直线，分别定义网格的列和行。

通过设置 display属性的值为 grid 或 inline-grid ，将显示布局定义为网格容器。网格容器带有行和列，可以更轻松地设计网页，而无需使用浮动和定位。

网格引入了（fr 单位），可以创建灵活的网格轨道。一个（fr 单位）代表网格容器中可用空间的一等份。

相关属性：grid-template-columns，grid-template-rows，grid-template-areas，grid-template，grid-auto-columns，grid-auto-rows，grid-auto-flow，grid，grid-row-start，grid-column-start，grid-row-end，grid-column-end，grid-row，grid-column，grid-area，grid-row-gap，grid-column-gap，grid-gap。
- grid（ CSS 所有网格容器的简写属性），可以用来设置以下属性：
  - 显式网格属性： grid-template-rows、grid-template-columns 和 grid-template-areas。
  - 隐式网格属性： grid-auto-rows、grid-auto-columns 和 grid-auto-flow。
  - 间距属性： grid-row-gap 和 grid-column-gap。
- grid-template（设置网格中行、列与分区）：none | grid-template-rows/grid-template-columns | grid-template-areas | initial | inherit;。
- grid-template-rows（定义网格中的行）：none | auto | max-content | min-content | length | initial | inherit;。
- grid-template-columns（定义网格中的列）：none | auto | max-content | min-content | length | initial | inherit;。
- grid-template-areas（指定如何显示行和列，使用网格元素的名称来布局网格）：none | itemnames;。
- grid-auto-rows（设置网格容器中行的默认大小）：auto | max-content | min-content | length;。
- grid-auto-columns（设置网格容器中列的默认大小）：auto | max-content | min-content | length;。
- grid-auto-flow（指定自动布局算法，精确指定自动布局的元素排列）：row | column | dense | row dense | column dense;。
- grid-gap（同时设置行间距和列间距）：grid-row-gap grid-column-gap。
- grid-row-gap（定义网格行间距）：length | %。
- grid-column-gap（定义网格列间距）：length | %。
- grid-row（同时指定网格元素行线的开始位置和结束位置）：grid-row-start / grid-row-end;。
- grid-area（指定网格元素在网格布局中的大小和位置）：grid-row-start / grid-column-start / grid-row-end / grid-column-end | itemname;。
- grid-row-start（指定网格元素行线的开始位置）：auto | row-line;。
- grid-row-end（指定网格元素行线的结束位置）：auto | row-line | span n;。
- grid-column（同时指定网格元素列线的开始位置和结束位置）：grid-column-start / grid-column-end;。
- grid-column-start（指定网格元素列线的开始位置）：auto | span n | column-line;。
- grid-column-end（指定网格元素列线的结束位置）：auto | span n | column-line;。
- justify-content （用于对齐容器内的网格，设置如何分配顺着弹性容器主轴(或者网格行轴) 的元素之间及其周围的空间），网格的总宽度必须小于容器的宽度才能使 justify-content 属性生效。。
- align-content（用于设置垂直方向上的网格元素在容器中的对齐方式），网格元素的总高度必须小于容器的高度才能使 align-content 属性生效。

.grid-container {
    display: grid;                  /* 创建网格容器 */
    grid-template-columns: 1fr 2fr; /* 列宽比例 */
    /* grid-template-columns: repeat(3, 1fr);*/ /* 3 列等宽 */
    gap: 10px;                     /* 网格间隔 */
}

参考函数：repeat()，minmax()，fit-content()。

相关术语：网格（Grid），网格线（Grid lines），网格轨道（Grid tracks），网格单元格（Grid cell），网格区域（Grid areas），网格间隙（Gutters），网格轴（Grid Axis），网格行（Grid row），网格列（Grid column）。

弹性盒子和网格布局的示例

/* 示例：居中元素 */
.container {
    display: flex;      /* 传统flex方案 */
    justify-content: center;
    align-items: center;
}

.container {
    display: grid;          /* 现代grid方案 */
    place-items: center; /* 一行代码实现居中 */
}

4.3 响应式设计

媒体查询（Media Queries）

使用@media媒体查询，适配不同设备尺寸，根据设备特性（如屏幕宽度）应用不同的样式，适配不同终端（PC/平板/手机）。

@media screen and (max-width: 768px) { /* 屏幕宽度小于768px时应用 */
    body { 
        font-size: 14px; 
    }
    .container { 
        flex-direction: column; 
    }
}

多媒体类型
- all：用于所有多媒体类型设备。
- print：用于打印机。
- screen：用于电脑屏幕，平板，智能手机等。
- speech：用于屏幕阅读器。
多媒体查询语法

@media not|only mediatype and (expressions) {
    CSS 代码...;
}
/* not: not是用来排除掉某些特定的设备的。 */
/* only: 用来定某种特别的媒体类型。 */

在不同的媒体上使用不同的样式文件

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="select.css">

视口单位（Viewport Units）
- vw（视口宽度）（视口宽度的百分比）。
- vh（视口高度）（视口高度的百分比）。

5 常用 CSS 样式

5.1 文本相关样式

color（颜色）：red | #ff0000 | rgb(255,0,0) | rgba(255,0,0,0.5) 。
font-size（字号）：14px | 1em | 2rem | 100%。
font-weight（字重）：normal | light | bold | 500 。
font-style（字体样式）：normal | italic | oblique 。
font-family（字体类型）："黑体", "宋体", "Microsoft Yahei", "Times New Roman" 。
direction（文本方向）：ltr | rtl | inherit
unicode-bidi（文本是否被重写）：normal | embed | bidi-override | initial | inherit。
text-transform（文本转换）：uppercase | lowercase | capitalize。
text-decoration（文本装饰线）：none | underline | overline | line-through 。
text-indent（文本缩进）：16px | 2em | 1rem 。
text-shadow（文本阴影）：h-shadow v-shadow blur color;
text-align（文本水平对齐）：left | center | right | justify 。
vertical-align（非块级元素垂直对齐）：top | middle | bottom 。
line-height（文本行高）：16px | 32px 。
letter-spacing（字符间距）：2px | -2px 。
word-spacing（字间距）：12px | 22px 。
white-space（元素内空白）：pre | pre-line | pre-wrap | nowrap。

5.2 盒模型相关样式

content（内容），用于在元素的 ::before和 ::after伪元素中插入内容。使用 content 属性插入的内容都是匿名的可替换元素。
padding（内边距），该属性为给定元素设置所有四个（上右下左）方向的内边距属性。

单个设置值会统一应用于（所有边），两个设置值则应用于（上边下边，左边右边），三个设置值则应用于（上边，左边右边，下边），四个设置值则分别按（顺时针方向）应用于（上边，右边，下边，左边）。

padding（内边距）：length | %。

padding（内边距）可细分为：
- padding-top（上方内边距）：length | %。
- padding-right（右方内边距）：length | %。
- padding-bottom（下方内边距）：length | %。
- padding-left（左方内边距）：length | %。
border（边框），该属性最多只接受三个参数，分别是宽度、风格和颜色，这样会使得四条边的边框相同。也可以使用一个，两个或三个值来指定 border 属性，值的顺序无关紧要。（可按四边分为 border-top、border-right、border-bottom、border-left）。

border（边框）：border-width border-style border-color。

可细分为：
- border-width：边框宽度。（支持单值、双值、三值、四值分别设置四个边，也可按四边分为 border-top-width、border-right-width、border-bottom-width、border-left-width）。
  
  border-width（边框宽度）：thin | medium | thick | length。
  - 值为thin：定义细的边框。
  - 值为medium：定义中等粗细的边框。
  - 值为thick：定义粗的边框。
  - 值为length：自定义边框的粗细宽度。
- border-style：边框风格。（支持单值、双值、三值、四值分别设置四个边，也可按四边分为 border-top-style、border-right-style、border-bottom-style、border-left-style）。
  
  outline-style（边框风格）：none | dotted | dashed | solid | double | groove | ridge | inset | outset。
  - 值为none：和关键字 hidden 类似，不显示边框。
  - 值为hidden：和关键字 none 类似，不显示边框。
  - 值为dotted：显示为一系列圆点，圆点半径是 border-width计算值的一半。
  - 值为dashed：显示为一系列短的方形虚线。
  - 值为solid：显示为一条实线。
  - 值为double：显示为一条双实线，宽度是 border-width 。
  - 值为groove：显示为三维沟槽雕刻效果的边框，样式与 ridge 相反。
  - 值为ridge：显示为三维脊状浮雕效果的边框，样式与 groove 相反。
  - 值为inset：显示为三维嵌入效果的边框，样式与 outset 相反。
  - 值为outset：显示为三维突出效果的边框，样式与 inset 相反。
- border-color：边框颜色。（支持单值、双值、三值、四值分别设置四个边，也可按四边分为 border-top-color、border-right-color、border-bottom-color、border-left-color）。
  
  border-color（边框颜色）：color-name | hex-number | rgb-number | transparent。
  - 值为color：指定背景颜色。
  - 值为transparent：指定边框的颜色是透明的。
- border-radius：边框圆角。（支持单值、双值、三值、四值分别设置四个角，也可按四角分为 border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius）。
  
  border-radius（边框圆角）：(1-4个 length | %) / (1-4个 length | %)。
  - 单值语法：border-radius: length|%，这一个值表示所有的边框宽度。
  - 双值语法： border-radius: length|% length|%，第一个值表示 top-left 和 bottom-right 方向的角；第二个值表示 top-right 和 bottom-left 方向的角。
  - 三值语法：border-radius: length|% length|% length|%，第一个值表示 top-left 方向的角，第二个值表示 top-right 和 bottom-left 方向的角，第三个值表示 bottom-right 方向的角。
  - 四值语法：border-radius: length|% length|% length|% length|%，这四个值分别表示 top-left、top-right、bottom-right、bottom-left，即从 top-left 开始的顺时针顺序。
margin（外边距），该属性为给定元素设置所有四个（上右下左）方向的外边距属性。

单个设置值会统一应用于（所有边），两个设置值则应用于（上边下边，左边右边），三个设置值则应用于（上边，左边右边，下边），四个设置值则分别按（顺时针方向）应用于（上边，右边，下边，左边）。

margin（外边距）：auto | length | %。

margin（外边距）可细分为：
- margin-top（上方外边距）：auto | length | %。
- margin-right（右方外边距）：auto | length | %。
- margin-bottom（下方外边距）：auto | length | %。
- margin-left（左方外边距）：auto | length | %。
outline（轮廓），绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。可按顺序设置（outline-color outline-style outline-width）

可细分为：

outline-color（轮廓的颜色）：color-name | hex-number | rgb-number | invert。

outline-style（轮廓的样式）：none | dotted | dashed | solid | double | groove | ridge | inset | outset。

outline-width（轮廓的宽度）：thin | medium | thick | length。
box-shadow（阴影）。
width（宽度）：100px | 1em | 2rem 。
height（高度）：100px | 1em | 2rem 。

5.3 显示相关样式

display（显示）用于设置元素是块级盒子（占用整行）或是行级盒子（仅需必要宽度，不强制换行）。display 也可用于设置子元素的布局，例如：文档流式布局、弹性盒子布局、网格布局。

display（显示）用于设置一个元素应如何显示，display:none;可以隐藏某个元素，且隐藏的元素不会占用任何空间。

visibility（可见性）用于指定一个元素可见或隐藏。visibility:hidden;可以隐藏元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。

/* 预组合值 */
display: block; /* 块级 */
display: inline; /* 行内 */
display: inline-block; /* 行内块 */
display: flex; /* 弹性盒子 */
display: inline-flex;
display: grid; /* 网格布局 */
display: inline-grid;
display: flow-root;

/* 生成盒子 */
display: none;
display: contents;

/* 多关键字语法 */
display: block flex;
display: block flow;
display: block flow-root;
display: block grid;
display: inline flex;
display: inline flow;
display: inline flow-root;
display: inline grid;

/* 其他值 */
display: table;
display: table-row; /* 所有的 table 元素 都有等效的 CSS display 值 */
display: list-item;

/* 全局值 */
display: inherit;
display: initial;
display: revert;
display: revert-layer;
display: unset;

关键值可以被分组为六个种类：
- display-outside，外部表现，规定元素的外部显示类型。
- display-inside，内部表现，元素的内部显示类型，其定义了该内容布局时的格式上下文的类型。
- display-listitem，列表元素，为内容生成一个块级盒子和一个单独的列表元素行级盒子。
- display-internal，内部，一些布局模型，例如 table 和 ruby 有一个复杂的内置结构，它们的子孙后代可以扮演几个不同的角色。
- display-box，盒，定义一个元素到底是否产生 display 盒。
- display-legacy，预组合，对相同布局模式的块级和行级变体需要单独的关键字。
position（定位）：static | relative | absolute | fixed 。
- static（静态定位），relative（相对定位）。absolute（绝对定位），fixed（固定定位）。
- top（上坐标），right（右坐标），bottom（下坐标），left（左坐标）。
- z-index（层叠）。
float（浮动）：left | right 。
- 清除浮动：overflow：hidden 。
- 清除浮动：clear：left | right | both 。
- 设置父级盒子的固定高度：height 。

5.4 背景相关样式

background：背景。

样式设置语法：background:#颜色值 url("图像") 是否重复固定或滚动图像起始位置;。

可细分为如下5种样式。
- background-color：背景颜色。
- background-image：背景图像。
- background-repeat：背景图像重复。
- background-attachment：背景图像是否固定或者随着页面的其余部分滚动。
- background-position：背景图像的起始位置。

5.5 链接列表表格样式

链接相关样式：
1. a:link（未访问过的链接）：可以用颜色、字体、背景等样式属性。
2. a:visited（用户已访问过的链接）：可以用颜色、字体、背景等样式属性。
3. a:hover（当用户鼠标放在链接上时）：可以用颜色、字体、背景等样式属性。
4. a:active（链接被点击的那一刻）：可以用颜色、字体、背景等样式属性。
列表相关样式：
- list-style（ul/ol列表样式）：none | circle | disc | decimal 。
- list-style-type（ul 列表项标记）：circle、square 。
- list-style-type（ol 列表项标记）：lower-alpha、upper-roman 。
- list-style-position（列表项标志的位置）：inside | outside 。
- list-style-image（作为列表项标记的图像）：url('xxx.gif') 。
表格相关样式：
- border（边框）。
- border-collapse（折叠边框）：collapse 。
- width（宽）。
- height（高）。
- text-align（水平对齐）。
- vertical-align（垂直对齐）。
- padding（内边距填充）：10px 。
- color（颜色）。
- background-color（背景颜色）。

5.6 元素尺寸样式

width（元素的宽度）：auto | length | % 。
height（元素的高度）：auto | length | % 。
max-width（元素的最大宽度）：none | length | % 。
max-height（元素的最大高度）：none | length | % 。
min-width（元素的最小宽度）：length | % 。
min-height（元素的最小高度）：length | % 。

5.7 溢出和浮动样式

overflow（溢出）只工作于指定高度的块元素上，用于控制内容溢出元素框时显示的方式。
- overflow:visible;：内容不会被修剪，会呈现在元素框之外。
- overflow:hidden;：内容会被修剪，并且其余内容是不可见的。
- overflow:scroll;：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
- overflow:auto;：如果内容出现被修剪，则浏览器会显示滚动条以便查看其余的内容。
- overflow:inherit;：从父元素继承 overflow 属性的值。
float（浮动）会使元素向左或向右移动，其周围的元素也会重新排列，通常是用于图像。

float（浮动）：none | left | right | inherit;。
- 在布局时，是水平方向浮动，元素只能左右移动而不能上下移动。
- 一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
- 浮动元素之后的元素将围绕它（例如图像是左浮动，文本流将环绕在它右边）。
- 如果把几个浮动的元素放到一起，且有空间的话，这几个浮动元素会彼此相邻。
clear（清除）：不允许元素周围有浮动元素，即指定元素两侧不能出现浮动元素。

clear（清除）：none | left | right | both | inherit;。

6 颜色与单位

6.1 颜色值

.color-name { color: red; }           /* 颜色名称 */
.hex-code { color: #FF0000; }         /* 十六进制 */
.rgb-value { color: rgb(255, 0, 0); } /* RGB值 */
.rgba-value { color: rgba(255, 0, 0, 0.5); } /* 带透明度 */

6.2 单位

.px-unit { font-size: 16px; }       /* 固定像素 */
.em-unit { font-size: 1.5em; }      /* 相对于父元素 */
.rem-unit { font-size: 1.2rem; }    /* 相对于根元素 */
.percentage { width: 50%; }         /* 百分比 */
.vw-vh { width: 50vw; }             /* 视口宽度的50% */

7 关键特性

7.1 优先级（Specificity）

多个样式规则可叠加作用于同一元素，当多个样式规则冲突时，通过优先级规则（如特异性、来源顺序）确定最终应用的样式。CSS 样式有不同的优先级，优先级高的样式规则会覆盖优先级低的。
优先级规则（从高到低）：
- !important（例外规则，强制覆盖）。应该尽量避免，因为这会破坏了样式表中的固有的级联规则使得调试找 bug 变得更加困难了。
- 行内样式（inline)，在 HTML 元素的 style 属性中定义的样式。
- ID 选择器（例如#example）。
- 类选择器（例如.example），属性选择器（例如[type="radio"]），伪类（例如:hover）。
- 元素标签选择器（例如h1），伪元素（例如::before）。
- 继承样式（inheritance）。
- 通配符选择器（*）。
通配选择器（universal selector）（*）、关系选择器（combinator）（+、>、~、" "、||）和 否定伪类（negation pseudo-class）（:not()）对优先级没有影响。但是，在 :not() 内部声明的选择器会影响优先级。
优先级建议
- 更好地利用 CSS 级联属性。
- 使用更具体的规则。在你选择的元素之前，增加一个或多个其他元素，使选择器变得更加具体，并获得更高的优先级。

7.2 继承（Inheritance）

子元素自动继承父元素样式（如font-family），部分属性（如margin）不继承。

当元素的一个继承属性（inherited property）没有指定值时，则取父元素的同属性的计算值。
某些属性（如 color、font-family）会从父元素自动继承到子元素。
不可继承的属性（如 border、margin）需要显式设置。

7.3 层叠（Cascading）

层叠是 CSS 的一个基本特征，它是一个定义了如何合并来自多个源的属性值的算法。它在 CSS 处于核心地位，CSS 的全称层叠样式表正是强调了这一点。

CSS 声明的来源
- 用户代理样式：浏览器会有一个基本的样式表来给任何网页设置默认样式。
- 页面作者样式：网页的作者可以定义文档的样式，这是最常见的样式表。大多数情况下此类型样式表会定义多个，它们构成网站的视觉和体验，即主题。
- 读者用户样式：读者，作为浏览器的用户，可以使用自定义样式表定制使用体验。
层叠顺序（从高到低）

假如层叠顺序相等，则使用哪个值取决于优先级（Specificity）。
1. CSS 过渡 (CSS Transition)
2. 用户代理样式的!important
3. 读者用户样式的!important
4. 页面作者样式的!important
5. CSS 动画（CSS Animation）
6. 页面作者样式
7. 读者用户样式
8. 用户代理样式
重置样式

当 CSS 对样式完成更改之后，也许会在某种情况下希望还原到一个已知样式上，这可能发生在动画、主题修改之类的情形中。CSS 属性 all能够快速地把（几乎）所有 CSS 属性设置到一个已知样式上。
层叠层/级联层

使用 @layer 声明了一个层叠层/级联层，同一层内的规则将级联在一起，这给予了开发者对层叠机制的更多控制。
- 一个层叠层同样可以通过 @import来创建，规则存在于被引入的样式表内：@import (utilities.css) layer(utilities);。
- 可以创建带命名的层叠层，但不指定任何样式。例如，单一的命名层：@layer utilities;。
- 多个命名层也可以被同时定义。例如：@layer theme, layout, utilities;。
  
  对于多个命名层的声明而言，如果同一声明在多个层叠层中被指定，最后一层中的将优先于其他层。因此，在上面的例子中，如果 theme 层和 utilities 层中存在冲突的规则，那么 utilities 层中的将优先被应用。
层叠层的嵌套

层叠层允许嵌套，例如：

@layer framework {
    @layer layout {
        
    }
}

嵌套层的附加规则

向 framework 层内部的 layout 层附加规则，只需用 . 连接这两层。

@layer framework.layout {
    p {
        margin-block: 1rem;
    }
}

匿名层

如果创建了一个层叠层但并未指定名字，则称为一个匿名层。除创建后无法向其添加规则外，该层和其他命名层功能一致。例如：

@layer {
    p {
        margin-block: 1rem;
    }
}

7.4 格式化上下文（Formatting Context）

行内格式化上下文（Inline Formatting Context），是一个网页的渲染结果的一部分。

其中，各行内框（inline box）一个接一个地排列，其排列顺序根据书写模式（writing-mode）的设置来决定：
- 对于水平书写模式，各个框从左边开始水平地排列。
- 对于垂直书写模式，各个框从顶部开始水平地排列。
区块格式化上下文（Block Formatting Context，BFC），是 Web 页面的可视 CSS 渲染的一部分，是块级盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

区块格式化上下文（BFC）是一个独立的布局环境，BFC 内部的元素布局与外部互相不影响。BFC 有一套属于自己的规则：
- BFC 的区域不会与浮动 Box 重叠。
- BFC 是一个独立容器，BFC 内部的元素布局与外部互相不影响。
- 计算 BFC 的高度时，浮动子元素也要参与计算。
下列方式会创建区块格式化上下文：
- 文档的根元素（<html>）。
- 浮动元素（即 float值不为 none 的元素）。
- 绝对定位元素（position值为 absolute 或 fixed 的元素）。
- 行内块元素（display值为 inline-block 的元素）。
- 表格单元格（display值为 table-cell，HTML 表格单元格默认值）。
- 表格标题（display 值为 table-caption，HTML 表格标题默认值）。
- 匿名表格单元格元素（display值为 table（HTML 表格默认值）、table-row（表格行默认值）、table-row-group（表格体默认值）、table-header-group（表格头部默认值）、table-footer-group（表格尾部默认值）或 inline-table）。
- overflow值不为 visible 或 clip 的块级元素。
- display 值为 flow-root 的元素。
- contain值为 layout、content 或 paint 的元素。
- 弹性元素（display 值为 flex 或 inline-flex 元素的直接子元素），如果它们本身既不是弹性、网格，也不是表格容器。
- 网格元素（display 值为 grid 或 inline-grid 元素的直接子元素），如果它们本身既不是弹性、网格，也不是表格容器。
- 多列容器（column-count或 column-width值不为 auto，且含有 column-count: 1 的元素）。
- column-span 值为 all 的元素始终会创建一个新的格式化上下文，即使该元素没有包裹在一个多列容器中）
格式化上下文影响布局，通常，我们会为定位和清除浮动创建新的 BFC，而不是更改布局，因为它将：
- 包含内部浮动。
- 排除外部浮动。
- 阻止外边距重叠。
块级格式化上下文（BFC ）的常用场景
- 解决浮动元素使父级元素的高度坍塌问题。
- 解决非浮动元素被浮动元素覆盖问题。
- 解决盒子顶底外边距重合问题。
- 两栏自适应布局，一侧是有固定宽度和浮动的固定栏，另一侧为开启 BFC 的不固定栏。

7.5 变量（Custom Properties）

定义和复用样式值（可复用的值）：

:root {
  --primary-color: #3498db;
}
button {
  background: var(--primary-color);
}

7.6 函数与运算

使用calc()。
进行动态计算：

width: calc(100% - 20px);

7.7 逻辑属性（Logical Properties）

基于书写模式（如左到右或右到左）自动适配布局：

.text {
  margin-inline-start: 20px; /* 自动适配 LTR/RTL */
}

7.8 动画与过渡

过渡（Transition）

通过 transition ，平滑改变属性值，实现平滑动画效果，提升用户体验。使页面元素显示从一种样式转变到另一个的时候，无需使用 Flash 动画或 JavaScript 脚本。

transition（过渡）：property duration timing-function delay;

可细分为：
- transition-property（需要应用过渡的 CSS 属性名）：`none | all | property。
- transition-duration（定义过渡效果需要花费的时间）：time。
- transition-timing-function（规定过渡效果的时间曲线）：linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n)。
  - linear：匀速过渡效果。
  - ease：默认值，缓慢加速，然后缓慢减速的过渡效果。
  - ease-in：缓慢加速的过渡效果。
  - ease-out：缓慢减速的过渡效果。
  - ease-in-out：先缓慢加速，再缓慢减速的过渡效果。
  - cubic-bezier(n,n,n,n)：自定义的贝塞尔曲线函数，通过四个值来定义曲线的控制点，分别对应 x1、y1、x2、y2。
- transition-delay（过渡效果延迟开始的时间，默认是0）：time。

.button {
    background-color: blue;
    transition: background-color 0.3s ease; /* 过渡 */
}
.button:hover { /* 悬停时颜色渐变 */
    background-color: red; 
}

.box {
    transition: transform 0.3s ease; /* 过渡 */
}
.box:hover { /* 悬停时颜色渐变 */
    transform: scale(1.1);
}

动画（Animation）

通过 @keyframes 定义复杂动画，提升用户体验。CSS 动画可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。

animation（动画）：name duration timing-function delay iteration-count direction fill-mode play-state;
- animation-name（指定要绑定到选择器的关键帧的名称）：keyframename | none。
- animation-duration（指定动画需要多少秒或毫秒完成）：time。
- animation-timing-function（设置动画将如何完成一个周期）：linear | ease | ease-in | ease-out | ease-in-out | steps(int,start|end) | cubic-bezier(n,n,n,n)。
  - linear：动画从头到尾的速度是相同的。
  - ease：默认。动画以低速开始，然后加快，在结束前变慢。
  - ease-in：动画以低速开始。
  - ease-out：动画以低速结束。
  - ease-in-out：动画以低速开始和结束。
  - steps(int,start|end)：指定了时间函数中的间隔数量（步长）。
    
    int 指定函数的间隔数，该参数是一个正整数（大于 0）。
    
    start|end 表示动画是从时间段的开头连续（start 直接开始）还是末尾连续（end 戛然而止）。
  - cubic-bezier(n,n,n,n)：在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
- animation-delay（设置动画在启动前的延迟时间）：time。
- animation-iteration-count（定义动画的播放次数或无限次）：n | infinite。
- animation-direction（指定是否应该轮流反向播放动画。）：normal | reverse | alternate | alternate-reverse | initial | inherit。
  - normal：默认值。动画按正常播放。
  - reverse：动画反向播放。
  - alternate：动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。
  - alternate-reverse：动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。
  - initial：设置该属性为它的默认值。
  - inherit：从父元素继承该属性。
- animation-fill-mode（当动画不播放时、完成时，或有延迟未开始播放时，要应用到元素的样式）：none | forwards | backwards | both | initial | inherit。
  - none：默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。
  - forwards：在动画结束后（由 animation-iteration-count 决定），动画将应用该属性值。
  - backwards：动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。
  - both：动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性。
  - initial：设置该属性为它的默认值。
  - inherit：从父元素继承该属性。
- animation-play-state（指定动画是否正在运行或已暂停）：paused | running。

/* 关键帧动画 */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.element {
    animation: fadeIn 2s forwards; 
}

@keyframes slide {
    0% {
        transform: translateX(0); 
    }
    100% {
        transform: translateX(100px); 
    }
}

.animate {
    animation: slide 2s infinite;
}

7.9 CSS 的外边距折叠

区块的上下外边距有时会合并（折叠）为单个边距，其大小为两个边距中的最大值（或如果它们相等，则仅为其中一个），这种行为称为外边距折叠。

注意：有设定浮动和绝对定位的元素不会发生外边距折叠。

有三种情况会形成外边距折叠：

相邻的兄弟元素

相邻的同级元素之间的外边距会被折叠（除非后面的元素需要清除之前的浮动）。
没有内容将父元素和后代元素分开

如果没有设定边框（border）、内边距（padding）、行级（inline）内容，也没有创建区块格式化上下文或间隙来分隔块级元素的上边距 margin-top 与其内一个或多个子代块级元素的上边距 margin-top；

或者没有设定边框、内边距、行级内容、高度 height 或最小高度 min-height 来分隔块级元素的下边距 margin-bottom 与其内部的一个或多个后代后代块元素的下边距 margin-bottom，则会出现这些外边距的折叠，重叠部分最终会溢出到父代元素的外面。
空的区块

如果块级元素没有设定边框、内边距、行级内容、高度height、最小高度min-height来分隔块级元素的上边距 margin-top 及其下边距 margin-bottom，则会出现其上下外边距的折叠。

7.10 现代 CSS 新特性

滚动条样式：scrollbar-gutter 和 scrollbar-color。
Ruby 排版：ruby-align 和 ruby-position（用于注音文本）。
锚点定位（Anchor Positioning）：简化动态定位（如弹出框）。
嵌套（Nesting）：支持类似 Sass 的嵌套语法（需浏览器支持）。

8 现代 CSS 技术

8.1 CSS 预处理器

如 Sass/Less，支持嵌套、变量、混合宏：

$primary: #3498db;
.button {
  background: $primary;
  &:hover { background: darken($primary, 10%); }
}

8.2 CSS 框架

Bootstrap、Tailwind CSS 等提供预设组件与工具类。

8.3 CSS-in-JS

在 JavaScript 中编写 CSS（如Styled Components）。

9 学习实践建议

使用外部样式表：提升代码复用率与可维护性。
避免滥用!important：防止优先级混乱。
采用CSS预处理器：如 Sass/Less，支持变量、嵌套等高级功能。
命名规范：使用BEM（Block__Element--Modifier）提高可维护性。
性能优化：
- 减少选择器复杂度（避免div > ul > li）
- 使用 transform/opacity 触发GPU加速动画
浏览器兼容性：通过 Autoprefixer 等工具自动添加厂商前缀（如-webkit-）。

10 学习资源

文档教程

MDN CSS教程（官方文档）（developer.mozilla.org）

CSS 教程 | 菜鸟教程
在线工具

CSS Tricks指南（实战技巧和布局示例）（css-tricks.com）
进阶技巧与案例

Flexbox小游戏（交互式Flexbox练习游戏）（flexboxfroggy.com）

Grid小游戏（Grid布局学习工具)（cssgridgarden.com）

anchoreum
网格布局工具

CSS Grid Generator (Drag & Drop)
框架

Tailwind CSS（实用优先的 CSS 框架）

Bootstrap（响应式 UI 组件库）
书籍

《CSS 基础教程》（Simon Collison）

《CSS 权威指南》（Eric A. Meyer）