CSS

常见的浏览器引擎前缀：

Gecko 引擎（Firefox）：
- -moz-*：用于 Mozilla Firefox 浏览器。
WebKit 引擎（Safari 和早期版本的 Chrome）：
- -webkit-*：最初是为 WebKit 引擎设计的，适用于多个浏览器，包括 Safari 和早期版本的 Chrome。
Blink 引擎（现代 Chrome 和 Edge）：
- -webkit-*（有时会在 Blink 引擎上使用）：Blink 引擎是由 Chrome 和 Edge 使用的内核，因此有些时候仍然可以看到 -webkit-* 的前缀。
Trident 引擎（Internet Explorer）：
- -ms-*：用于 Internet Explorer 浏览器。例如，-ms-filter 用于设置滤镜效果。
Presto 引擎（Opera）：
- -o-*：用于 Opera 浏览器。例如，-o-transition 用于设置过渡效果。

选择器

Attribute 选择器

[attr]: 选择具有指定属性的所有元素。
[attr=value]: 选择具有特定值的属性的元素。
[attr~=value]: 选择属性值包含指定词汇的元素。
[attr|=value]: 选择属性值以特定字符串开头并后接一个连字符的元素。
[attr^=value]: 选择属性值以特定字符串开头的元素。
[attr$=value]: 选择属性值以特定字符串结尾的元素。
[attr=value]*: 选择属性值中包含特定字符串的元素。

Class 选择器

使用点（.）后跟类名来选择具有特定类的元素。

css

.className { /* 样式 */ }

ID 选择器

使用井号（#）后跟ID名来选择具有特定ID的元素。

css

#idName { /* 样式 */ }

Element 选择器

又称为标签选择器，它直接使用HTML标签名来选择元素。

css

elementName { /* 样式 */ }

Universal 选择器

使用星号（*）来选择所有元素。

css

* { /* 样式 */ }

选择器列表

由逗号,分隔的一个或多个选择器构成的，允许你将一组样式规则应用于多个选择器所选定的元素。

css

h1, h2, h3 { font-family: Arial; }

组合器

后代选择器

使用空格来选择某个元素的所有后代元素。

css

div p { color: pink }

子代选择器

使用大于号>来选择直接子元素，而不会选择更深层嵌套的子元素。

css

ul > li { font-size: 18px }

相邻兄弟选择器

使用加号+来选择紧跟在某个元素后的第一个兄弟元素。

css

h2 + p { color: red}

通用兄弟选择器

使用波浪号~来选择某个元素之后的所有兄弟元素。

css

h2 ~ p { color: skybule }

伪类

:root：用于选择文档的根元素，在HTML中通常是<html>元素。常用于定义全局CSS变量或全局样式规则。
:link：选择所有未访问的链接。
:visited：选择用户已访问过的链接。
:hover：选择鼠标悬停在其上的元素。
:active：用于选择正在被用户激活（如点击）的元素。通常用于按钮或链接在被点击时的样式。
:any-link：选择所有的超链接，无论它们是否被访问过。这个伪类是:link和:visited伪类的结合。
:autofill：用于选择被浏览器自动填充的表单元素。这在改变自动填充输入框的样式时很有用。
:checked：选择被选中的表单元素（如复选框或单选按钮）。
:default：选择表单中的默认元素，例如默认选中的单选按钮或默认按钮。
:disabled：选择被禁用的表单元素，例如不可交互的输入框或按钮。
:enabled：选择所有可用的表单元素，即那些没有被禁用的表单控件。
:focus：选择当前获得焦点的元素。常用于表单元素，如输入框和按钮。
:in-range：用于表单输入，选择数值在指定范围内的输入元素。
:indeterminate：选择既不是选中也不是未选中状态的表单元素，如不确定状态的复选框。
:invalid：选择不满足其验证要求的表单元素。
:optional：选择没有required属性的表单元素，即非必填的表单元素。
:placeholder-shown：选择显示占位符文本的表单输入元素。
:read-only：选择设置为只读的表单元素。
:read-write：选择可编辑且没有设置为只读的表单元素。
:required：选择设置了required属性的表单元素，即必填的表单元素。
:user-invalid：选择用户与之交互过且验证无效的表单元素。
:user-valid：选择用户与之交互过且验证有效的表单元素。
:valid：选择所有验证成功的表单元素。
:buffering：适用于媒体元素（如<video>或<audio>），用于选择正在缓冲的元素。
:muted：用于媒体元素，选择音量被静音的元素。
:past：这个伪类通常用于媒体查询，用于选择已经播放过的媒体元素。
:paused：选择当前处于暂停状态的媒体元素，如暂停的<video>或<audio>。
:playing：选择当前正在播放的媒体元素。
:left：用于页面打印或写作的方向，选择左页的元素。
:right：在打印媒体中使用，用于选择右页的元素。
:seeking：选择当前正在搜索中的媒体元素，如正在快进或快退的<video>或<audio>。
:stalled：用于选择由于错误而停止下载的媒体元素。
:first：与 @page 一起使用，表示打印文档的第一页。
:first-child：选择其父元素的第一个子元素。例如，p:first-child选择作为其父元素第一个子元素的所有<p>元素。
:last-child：选择其父元素的最后一个子元素。
:only-child：选择那些没有任何兄弟元素的元素，即那些是其父元素唯一子元素的元素。
:nth-child()：选择其父元素的第n个子元素。例如，:nth-child(2n)选择偶数位置的子元素。
:nth-last-child()：类似于:nth-child()，但是从后往前计数。
:nth-last-of-type()：用于选择属于其父元素的特定类型的第N个子元素，从最后一个子元素开始倒数。
:first-of-type：选择每个父元素中同类型的第一个子元素。例如，p:first-of-type选择每个父元素中第一个<p>元素。
:last-of-type：选择每个父元素中同类型的最后一个子元素。
:nth-of-type()：选择其父元素中特定类型的第n个子元素。例如，div:nth-of-type(2)会选择每个父元素中的第二个<div>元素。
:only-of-type：选择每个父元素下同类型的唯一子元素。例如，p:only-of-type选择每个父元素下唯一的<p>元素。
:focus-visible：选择获得焦点并且以用户界面方式可见的元素。这对于改善键盘交互和可访问性很有帮助。
:focus-within：选择包含获得焦点的元素的元素。这对于当子元素获得焦点时需要改变其父元素样式的情况特别有用。
:fullscreen：用于选择处于全屏模式的元素。适用于全屏API。
:picture-in-picture：选择当前在画中画模式下的视频元素。
:volume-locked：匹配音量已锁定的元素。
:empty：用于选择没有任何子元素（包括文本节点）的元素。例如，一个空的<div>。
:out-of-range：选择值超出其min和max属性设定范围的输入元素。
:host：用于Web组件（Shadow DOM），选择宿主元素。
:host-context()：在Web组件中使用，选择在特定祖先元素下的宿主元素。
:host()：用于Web组件（Shadow DOM），它允许你选择定义Shadow DOM的宿主元素。通过:host()中的参数，可以进一步指定宿主元素的选择条件。
:current：用于选择当前正在显示的元素，常用于页面滚动或幻灯片显示中的当前项目。
:future：匹配完全出现在与 :current 匹配的元素之后的任何元素。
:local-link：选择指向当前文档或片段的链接。
:target：选择URL中的锚名称与文档内某个元素的id相匹配的元素。例如，如果URL是example.com#section2，那么#section2:target将会被选择。
:has()：选择包含特定子元素或后代的元素。例如，p:has(> img)选择包含<img>直接子元素的<p>元素。
:is()：接受一个选择器列表作为参数，匹配任何可以被参数列表中的任一选择器选中的元素。例如，:is(.class1, .class2)。
:not()：接受一个选择器作为参数，选择不匹配该选择器的所有元素。例如，:not(.class)。
:where()：这个伪类函数类似于:is()，但在计算选择器的优先级时，:where()的权重为0。这使得它非常适用于覆盖默认样式。
:dir()：基于文本方向选择元素。例如，:dir(ltr) 选择文本方向为从左到右（left-to-right）的元素。
:lang()：基于元素的语言设置选择元素。例如，:lang(en)选择所有指定为英语的元素。
:defined：用于选择已被定义的自定义元素（Web Components），即已注册的自定义元素。
:modal：匹配处于排除与外部元素的所有交互的状态的元素，直到交互被消除为止。
:popover-open：的根元素，通常是HTML文档中的<html>元素。
:scope：用于选择作为当前作用域的元素。在HTML中，它通常指的是与CSS选择器相同的容器。

伪元素

::after：在元素内容之后插入内容。
::before：在元素内容之前插入内容。
::first-letter：选择块级元素的第一个字母。
::first-line：选择块级元素的第一行文本。
::backdrop：用于为全屏模式下的元素或对话框（如<dialog>元素）的背景创建样式。
::cue：用于WebVTT字幕的样式。
::cue-region：用于WebVTT区域的样式。
::file-selector-button：用于自定义文件选择按钮的样式。
::placeholder：用于输入框占位符的样式。
::selection：用于选择文本的样式。
::marker：用于列表项标记（如项目符号或数字）的样式。
::part()：用于在Shadow DOM中为部分元素自定义样式。
::slotted()：用于为Shadow DOM中的插槽分配的内容自定义样式。
::highlight()：用于为文档中的高亮部分（如网页搜索结果）设置样式。

属性

动画

animation：
- animation-delay：指定动画开始前的延迟时间。
- animation-direction：指定动画的播放方向。
  - normal：默认值。动画正常播放，按照时间轴的正方向。
  - reverse：动画反向播放，按照时间轴的反方向。
  - alternate：动画在正向和反向之间交替播放。每一次迭代都会改变播放方向。
  - alternate-reverse：动画在反向和正向之间交替播放。每一次迭代都会改变播放方向。
- animation-duration：指定动画的持续时间。
- animation-fill-mode：指定动画在动画开始和结束时元素的样式。
  - none：默认值。动画不会影响动画元素在播放之前和之后的样式。元素将保持其初始状态。
  - forwards：动画播放完成后，元素将应用动画的最终关键帧的样式。元素将保持动画结束时的状态。
  - backwards：动画播放之前，元素将应用动画的第一个关键帧的样式。元素将在动画开始之前的状态。
  - both：动画播放之前和之后都应用样式。等同于同时设置 forwards 和 backwards。
- animation-iteration-count：指定动画的循环次数。
- animation-name：指定要应用于元素的动画名称。
- animation-play-state：指定动画是否正在播放或暂停。
  - running：默认值。动画正在运行。
  - paused：动画被暂停。元素将停留在当前动画的状态。
- animation-timing-function：指定动画的速度曲线。
  - ease：默认值。缓慢开始，然后加速，然后缓慢结束。
  - linear：动画以恒定的速度进行，没有加速或减速。
  - ease-in：缓慢开始，然后逐渐加速。
  - ease-out：快速开始，然后逐渐减速。
  - ease-in-out：缓慢开始，然后加速，最后缓慢结束。
  - cubic-bezier(n,n,n,n)：自定义贝塞尔曲线，由四个数字值指定。这允许更精细的控制动画的速度。
  - steps(int, jump-start | jump-end | jump-none | jump-both)：阶跃函数，int 参数指定了动画过程中的阶跃数，jump-* 参数指定了是在每个步骤的开始还是结束时跳跃。
  - step-start：动画从关键帧的起始值立即跳跃到结束值。等同于 steps(1, jump-start)
  - step-end：动画从关键帧的起始值保持不变，直到接近动画结束时才跳跃到结束值。等同于 steps(1, jump-end)
animation-composition：指定多个影响相同属性的动画组合。
- replace: 最后一个动画效果将覆盖所有之前的动画效果。这是默认值。
- add: 将所有动画的效果相加。
- accumulate: 累积所有动画的效果，需要格外注意动画之间的叠加顺序。

背景

background:用于设置元素的背景样式。
- background-attachment: 用于设置背景图像的滚动方式的属性。
  - scroll: 默认值。背景图像会随着元素内容的滚动而滚动。
  - fixed: 背景图像固定在视口中，不随元素内容的滚动而滚动。
  - local: 背景图像会随元素内容的滚动而滚动，但不会超出元素的边界，因此只在元素内部可见。
- background-clip: 用于指定元素的背景绘制区域。
  - border-box：默认值。背景将绘制在元素的边框框内，包括内边距区域。
  - padding-box：背景将绘制在元素的内边距框内，不包括边框区域。
  - content-box：背景将仅绘制在元素的内容框内，不包括边框和内边距。
  - text：背景将绘制在元素的前景文本内。
- background-color: 用于设置元素的背景颜色。
- background-image: 用于设置元素的背景图片。
  - url("path"): 指向图片文件的 URL 地址。
  - linear-gradient(direction, color-stopN): 定义线性渐变。
  - radial-gradient(shape, size, position, color-stopN): 定义径向渐变。
  - repeating-linear-gradient(direction, color-stopN)：类似于线性渐变，但颜色模式会沿直线重复。
  - repeating-radial-gradient(shape, size, position, color-stopN)：类似于径向渐变，但颜色模式会从中心点向外重复。
  - conic-gradient()：定义圆锥渐变。
  - none: 表示不显示背景图片。
- background-origin: 用于确定元素背景图片的原点位置，即背景图片相对于哪个区域进行定位。
  - padding-box：默认值。背景图片从元素的内边距框的左上角开始绘制。
  - border-box：背景图片从元素的边框框的左上角开始绘制，包括边框区域。
  - content-box：背景图片从元素的内容框的左上角开始绘制，不包括边框和内边距。
- background-position: 用于设置元素的背景图片的位置。
  - background-position-x: 用于设置元素的背景图片的水平位置。
  - background-position-y: 用于设置元素的背景图片的垂直位置。
- background-repeat: 用于设置元素的背景图片是否重复显示，以及如何重复显示。0
- background-size: 用于设置元素的背景图片的大小。
  - auto：默认值。背景图像的尺寸保持原始大小，不进行缩放。
  - cover：背景图像保持纵横比并尽可能大，使得背景完全覆盖元素。可能会导致图像的某些部分被裁剪。
  - contain：背景图像保持纵横比并尽可能小，使得整个图像都能完全显示在元素内。
background-blend-mod：用于控制背景图片和背景色混合方式。
isolation: 创建一个新的堆叠上下文并进行独立设置。
mix-blend-mode: 设置一个元素内容和其背景（或下面的元素）的混合模式。

单张背景

css

background：color image repeat position/size attachment;
例1：background: #f00 url(./img/1.jpg) no-repeat left top/200px 200px scroll;
例2：background: red url(./img/2.jpg) repeat-x center/cover fixed;

多张背景

css

background：
color image repeat position/size attachment,
color image repeat position/size attachment;
例：background: 
  #ffff00 url(./img/1.jpg) no-repeat 0px 0px/200px 200px,
  #ff00ff url(./img/2.jpg) no-repeat center/100px 100px;

线性渐变

direction
- to bottom（默认）: 从上到下
- to top: 从下到上
- to right: 从左到右
- to left: 从右到左
- 对角方向，如to bottom right或to top left
- 角度值，如45deg，其中0deg是从下到上，角度顺时针增加。
color-stop: 每个颜色停靠点定义渐变中的颜色和位置。至少需要两个颜色。 - 颜色值可以是任何有效的CSS颜色格式（如#ff0000, rgb(255,0,0), red等）。 - 可选地，可以指定每个颜色在渐变线上的位置，如color 20%。

径向渐变

Shape:
- circle: 使渐变呈圆形。
- ellipse: 使渐变呈椭圆形，默认值。
Size:
- 关键字：closest-side, closest-corner, farthest-side, farthest-corner。
- 具体尺寸：可以是长度或百分比值。
Position:
- 指定中心点的位置，默认为center。
- 可以使用关键词（如top, bottom, right, left）或精确值（如50% 75%）。
color-stop:
- 指定渐变中的颜色和它们在渐变中的位置。
- 可以是任何有效的CSS颜色值，如颜色名、十六进制值、rgb(a)、hsl(a)等。
- 可以包含位置值（如color 40%），表示颜色在哪里开始或结束。

边框

border: 用于设置元素边框。
- border-color: 用于设置元素边框的颜色。
  - border-bottom-color: 用于设置元素下边框的颜色。
  - border-left-color: 用于设置元素左边框的颜色。
  - border-right-color: 用于设置元素右边框的颜色。
  - border-top-color: 用于设置元素上边框的颜色。
- border-style: 用于设置元素边框的样式。
  - border-bottom-style: 用于设置元素下边框的样式。
  - border-left-style: 用于设置元素左边框的样式。
  - border-right-style: 用于设置元素右边框的样式。
  - border-top-style: 用于设置元素上边框的样式。
- border-width: 用于设置元素边框的宽度。
  - border-bottom-width：用于设置元素下边框的宽度。
  - border-left-width：用于设置元素左边框的宽度。
  - border-right-width：用于设置元素右边框的宽度。
  - border-top-width：用于设置元素上边框的宽度。
border-top: 用于设置元素上边框。
- border-top-color: 用于设置元素上边框的颜色。
- border-top-style: 用于设置元素上边框的样式。
- border-top-width: 用于设置元素上边框的宽度。
border-right: 用于设置元素右边框。
- border-right-color: 用于设置元素右边框的颜色。
- border-right-style: 用于设置元素右边框的样式。
- border-right-width: 用于设置元素右边框的宽度。
border-left: 用于设置元素左边框。
- border-left-color: 用于设置元素左边框的颜色。
- border-left-style: 用于设置元素左边框的样式。
- border-left-width: 用于设置元素左边框的宽度。
border-bottom: 用于设置下边框。
- border-bottom-color: 用于设置下边框的颜色。
- border-bottom-style: 用于设置下边框的样式。
- border-bottom-width: 用于设置下边框的宽度。
border-block：用于设置块轴的边框。对于水平书写模式，border-block 相当于 border-top 和 border-bottom 属性。对于垂直书写模式，border-block 相当于 border-left 和 border-right 属性。
- border-block-color：用于设置块轴边框的颜色。
- border-block-style：用于设置块轴边框的样式。
- border-block-width：用于设置块轴边框的宽度。
border-block-end: 用于设置元素在块轴下边框。
- border-block-end-color: 用于设置元素在块轴下边框的颜色。
- border-block-end-style: 用于设置元素在块轴下边框的样式。
- border-block-end-width: 用于设置元素在块轴下边框的宽度。
border-block-start: 用于设置元素在块轴的上边框。
- border-block-start-color: 用于设置元素在块轴上边框的颜色。
- border-block-start-style: 用于设置元素在块轴上边框的样式。
- border-block-start-width: 用于设置元素在块轴上边框的宽度。
border-inline: 用于设置元素在内联轴上的行方向边框。
- border-inline-color: 用于设置元素在内联轴上的行方向边框颜色。
- border-inline-style: 用于设置元素在内联轴上的行方向边框样式。
- border-inline-width: 用于设置元素在内联轴上的行方向边框宽度。
border-inline-end: 用于设置元素在内联轴上的行方向末端边框。
- border-inline-end-color: 用于设置元素在内联轴上的行方向末端边框颜色。
- border-inline-end-style: 用于设置元素在内联轴上的行方向末端边框样式。
- border-inline-end-width: 用于设置元素在内联轴上的行方向末端边框宽度。
border-inline-start: 用于设置元素在内联轴上的行方向顶端边框。
- border-inline-start-color: 用于设置元素在内联轴上的行方向顶端边框颜色。
- border-inline-start-style: 用于设置元素在内联轴上的行方向顶端边框样式。
- border-inline-start-width: 用于设置元素在内联轴上的行方向顶端边框宽度。
border-radius: 用于设置元素的圆角半径。
- border-bottom-left-radius: 用于设置元素左下角的圆角半径。
- border-bottom-right-radius: 用于设置元素右下角的圆角半径。
- border-top-left-radius: 用于设置元素左上角的圆角半径。
- border-top-right-radius: 用于设置元素右上角的圆角半径。
- border-end-end-radius: 用于设置元素在块轴下边框和行末端相交处的角的半径。与 border-bottom-right-radius 效果一样。
- border-end-start-radius: 用于设置元素在块轴下边框和行顶端相交处的角的半径。与 border-bottom-left-radius 效果一样。
- border-start-end-radius: 用于设置元素在块轴上边框和行顶端相交处的角的半径。与 border-top-right-radius 效果一样。
- border-start-start-radius: 用于设置元素在块轴上边框和行顶端相交处的角的半径。与 border-top-left-radius 效果一样。
border-image: 用于将图像用作元素的边框。
- border-image-outset: 定义图像边框相对于元素边框的偏移量。
- border-image-repeat: 定义如何重复图像以填充边框。
- border-image-slice: 定义如何将图像分割成 9 个部分，用于绘制边框。
- border-image-source: 定义图像源，可以是 URL 或渐变。
- border-image-width: 定义图像边框的宽度。

画三角形

设置一个盒子；
设置四周不同颜色大小的边框border；
给盒子的宽高设置为0，仅保留边框border；
得到四个三角形，选择其中一个或多个三角形（边框）后，其他三角形（边框）颜色设置为透明transparent；

盒模型

margin：用于同时设置元素的所有四个边（上、右、下、左）的外边距。
- margin-bottom：用于设置元素的底部的外边距。
- margin-left：用于设置元素的左边的外边距。
- margin-right：用于设置元素的右边的外边距。
- margin-top：用于设置元素的顶部的外边距。
margin-block：逻辑属性，用于设置元素的顶部和底部的外边距。
- margin-block-start：逻辑属性，用于设置元素顶部的外边距。
- margin-block-end：逻辑属性，用于设置元素底部的外边距。
margin-inline：逻辑属性，用于设置元素的左边和右边的外边距。
- margin-inline-start：逻辑属性，用于设置元素左边的外边距。
- margin-inline-end：逻辑属性，用于设置元素右边的外边距。
padding：用于一次性设置一个元素的所有内边距。
- padding-bottom：用于设置一个元素的底部内边距。
- padding-left：用于设置一个元素的左侧内边距。
- padding-right：用于设置一个元素的右侧内边距。
- padding-top：用于设置一个元素的顶部内边距。
padding-block：用于设置在块轴的内边距。
- padding-block-start：设置块轴开始方向的内边距。
- padding-block-end: 设置块轴结束方向的内边距。
padding-inline:用于设置在行内轴的内边距。
- padding-inline-start：设置行内轴开始方向的内边距。
- padding-inline-end: 设置行内轴结束方向的内边距。
box-decoration-break：用于控制元素在跨越多个行内框或块容器时，内部框的装饰如何呈现。通常用于处理元素被分割到多行时的装饰效果。
box-shadow：用于在元素周围创建一个或多个阴影效果。可以设置阴影的颜色、偏移、模糊半径和扩散半径。
box-sizing：用于控制盒模型的大小计算方式。
- content-box：默认值，标准盒模型，width和height只表示content内容宽高。
- border-box：怪异盒模型，width和height只表示盒子宽高，包含content、padding和border部分。

外边距合并

兄弟元素之间下垂直外边距合并

两个垂直的盒子任意一方添加行内块属性display:inline-block；
给盒子设置margin-bottom和margin-top值；
- 两个为正数，则取最大数；
- 一正一负，则取相加得出值；
- 两个负数，则取叠加值；

外边距塌陷

父子元素之间上外边距合并

给父级设置一个 border或padding值；
给父级设置一个overflow: hidden；
转换成行内块元素；
设置浮动float；

变量

--*：一种特定格式的标识符，以两个破折号（--）开头，后面跟着一个有效的标识符。通常用于在:root中定义CSS自定义属性（CSS变量），也可以用于某些属性的值，尤其是与CSS变量相关的场景。

css

:root {
    --main-bg-color: coral; /* 定义一个名为 --main-bg-color 的CSS变量 */
    --padding-value: 15px;  /* 定义一个名为 --padding-value 的CSS变量 */
}

body {
    background-color: var(--main-bg-color); /* 使用CSS变量 */
    padding: var(--padding-value);          /* 使用CSS变量 */
}

颜色

color: 用于设置元素文本的颜色。
color-scheme: 用于指定用户代理应该使用的颜色方案。
forced-color-adjust: 用于指定用户代理是否强制应用强制颜色（例如高对比度模式）对文档进行调整。
print-color-adjust: 用于指定打印时颜色的渲染方式，可以确保打印版本尽可能接近屏幕显示。

容器

container：用于定义一个元素是否被视为容器。
container-name：用于为容器指定一个名称。
container-type：用于定义容器的类型。

独立容器

contain: 用于指定元素是否应该被包含在它的边界框内。
contain-intrinsic-size：用于设置元素的内在宽度和高度。
- contain-intrinsic-inline-size：用于设置元素的内在内联尺寸，对于水平布局的元素通常是宽度，对于垂直布局的元素通常是高度。
- contain-intrinsic-block-size：用于设置元素的内在块尺寸，对于水平布局的元素通常是高度，对于垂直布局的元素通常是宽度。
contain-intrinsic-height：设置元素的内在高度。
contain-intrinsic-width：用于设置元素的内在宽度。

与 BFC 的区别

BFC 是一种布局环境，它影响文档流中元素的布局和相互作用。创建 BFC 的常见方式包括使用 overflow, display, float 和 position 等属性。
Containment 更注重性能优化，允许开发者显式地告诉浏览器某个元素的布局、样式和绘制是独立于文档流的其他部分的。这可以减少不必要的布局重排和重绘。

显示方式

display: 用于设置元素的显示方式。
- contents：元素本身不生成盒子，但其子元素会正常生成。
- none：元素不显示，并从文档布局中消失，在网页中不占位置。
- flow-root：创建一个块级流容器，可以包含浮动元素。
- table：表示元素应该像<table>元素一样显示。
- flex：表示元素应该像一个灵活的容器一样显示，其子元素可以使用Flexbox布局。
- grid：表示元素应该像一个网格容器一样显示，其子元素可以使用Grid布局。
- block：元素显示为块级元素，占据一整行，下一个元素在新行开始。
- inline：元素在行内显示，不会开始新行，其宽度只与内容宽度一致。
- ist-item：元素显示为一个列表项，通常伴有项目符号或数字。
- inline-block：元素生成一个行内块元素。
- inline-table：元素显示为一个内联表格，类似于<table>，但是作为行内元素显示。
- inline-flex：元素显示为一个内联灵活容器。
- inline-grid：元素显示为一个内联网格容器。
- table-row-group：类似于 <tbody> HTML 元素。
- table-header-group：类似于 <thead> HTML 元素。
- table-footer-group：类似于 <tfoot> HTML 元素。
- table-row：类似于 <tr> HTML 元素。
- table-cell：类似于 <td> HTML 元素。
- table-column-group：类似于 <colgroup> HTML 元素。
- table-column：类似于 <col> HTML 元素。
- table-caption：类似于 <caption> HTML 元素。

滤镜

filter: 用于对元素内容进行图像处理。
- blur(): 应用高斯模糊效果。括号内的值定义了模糊的程度，值越大，图像越模糊。
- brightness(): 调整元素的亮度。值为1或100%时不会改变图像。小于1的值会使图像变暗，大于1的值会使图像变亮。
- contrast(): 调整图像的对比度。值为1或100%时不改变图像。值小于1或100%会减少对比度，值大于1或100%会增加对比度。
- drop-shadow(): 给元素添加阴影效果，类似于box-shadow，但是它适用于元素本身的形状。可以指定阴影的偏移量、模糊半径和颜色。
- grayscale(): 将图像转换为灰度。值为1或100%时完全转换为灰度，值为0时不应用灰度效果。
- hue-rotate(): 给图像应用色相旋转。值定义了色轮上的旋转角度，从而改变图像的实际颜色。
- invert(): 反转图像的颜色。值为1或100%时完全反转，值为0时不反转颜色。
- opacity(): 使图像变得更透明。值为1或100%时完全不透明，值为0时完全透明。
- saturate(): 调整图像的饱和度。值为1或100%时不改变饱和度。值小于1或100%会减少饱和度，值大于1或100%会增加饱和度。
- sepia(): 将图像转换为深褐色。值为1或100%时完全转换为深褐色，值为0时不应用效果。
backdrop-filter：用于创建一个视觉效果，可以在元素的背景和元素内容之间添加模糊效果（毛玻璃）或颜色变化。

字体

font: 用于定义元素的字体
- font-family：用于定义元素的字体，可以指定一个或多个字体族，以备系统中没有第一个字体时使用备用字体。
- font-size：用于设置文本的大小，可以使用相对单位（如 em 或 rem）或绝对单位（如 px）。
- font-stretch：用于指定字体的紧缩或拉伸程度，可选择 normal、condensed、expanded 等值。
- font-style：定义文本的风格，可以设置为 normal、italic 或 oblique。
- font-weight：控制文本的粗细程度，可以取值为 normal、bold 或使用数字表示相对粗细。
- font-variant：设置字体的大小写。可以使用 normal、small-caps 等值。
  - font-variant-alternates: 控制 OpenType 字体中替代字形的显示。
  - font-variant-caps: 定义文本中大写字母的变体效果，如小型大写字母。
  - font-variant-east-asian: 控制文本在使用东亚字符集时的显示效果，如中文、日文、韩文等。
  - font-variant-emoji: 用于控制文本中 Emoji 字符的显示方式。
  - font-variant-ligatures: 控制文本中是否启用连字，如字母之间的连接效果。
  - font-variant-numeric: 控制文本中数字的显示风格，如旧式数字或连字数字。
  - font-variant-position: 控制文本中数字和字母的位置，如上标或下标。
  - font-variation-settings: 允许指定字体轴变化的值，用于更灵活地控制字体外观。
font-feature-settings: 允许开启或关闭 OpenType 字体的特定特性，例如 ligatures（连字）和 stylistic alternates（字形替代）。
font-kerning:控制字母之间的距离，使其在视觉上更加平滑和一致。
font-language-override: 用于指定元素中的文本所使用的 OpenType 语言特性，以适应不同语言的字形需求。
font-optical-sizing: 控制字体是否启用光学大小调整，以提高字体在不同大小下的可读性。
font-palette: 用于指定颜色字体的调色板，使文本在不同颜色主题下保持一致。
font-size-adjust: 用于调整字体大小以适应不同屏幕分辨率。
font-synthesis: 控制浏览器是否合成字体样式，包括合成粗细、倾斜和小型大写字母。
- font-synthesis-small-caps: 控制是否将小型大写字母合成为正常大写字母。
- font-synthesis-style: 控制是否合成字体的斜体风格。
- font-synthesis-weight: 控制是否合成字体的粗细程度。
- font-synthesis-position: 定义合成字体样式时，是否考虑基线偏移。

分页换行

break-after：用于控制当前元素之后是否换行。
break-before：用于控当前元素之前是否换行。
break-inside：用于控制当前元素内部是否换行。
orphans：指定元素在页面上分页之前必须保留的最小行数。
widows：用于设置分页媒体上，页面顶部允许的最小行数。

图像

image-orientation：用于修正某些图片的预设方向。
image-rendering：用于控制图像的缩放算法。
object-fit：指定替换元素的内容应如何填充其容器。
object-position：指定替换元素的内容在其容器内的对齐方式。

计数器

counter-increment: 用于增加或减少指定名称的 CSS 计数器值，或阻止所有计数器或单个计数器值的更改。
counter-reset: 用于将指定名称的 CSS 计数器重置为指定值，或重置隐藏在不太具体的规则中定义的计数器。
counter-set: 用于设置指定名称的 CSS 计数器值。

列表项

list-style: 用于同时设置列表项的标记类型、图像和位置。
- list-style-image: 用于将图像设置为列表项的标记。
- list-style-type: 用于设置列表标记的位置(内边距或外边距)。
- list-style-position: 指定列表项标记的类型，可以是内置的符号类型（如圆圈、方块）或字符串。

遮罩

clip-path: 用于定义元素的可见区域，以剪裁或隐藏元素的部分区域。
mask: 用于设置一个元素的遮罩图层。
- mask-clip: 定义遮罩的绘制区域。
- mask-image: 指定一个或多个遮罩图像。
- mask-mode: 定义遮罩图像的模式（如 alpha 或 luminance）。
- mask-origin: 设置遮罩图像的定位区域。
- mask-position: 设置遮罩图像的初始位置。
- mask-repeat: 定义遮罩图像是否以及如何重复。
- mask-size: 指定遮罩图像的尺寸。
- mask-composite: 描述如何将多个遮罩层组合在一起。
mask-border: 用于指定元素边框的遮罩。
- mask-border-mode: 指定边框遮罩的混合模式。
- mask-border-outset: 设置边框遮罩的外延。
- mask-border-repeat: 定义边框遮罩的重复方式。
- mask-border-slice: 定义如何将图像切片以适应边框。
- mask-border-source: 指定边框遮罩的图像。
- mask-border-width: 设置边框遮罩的宽度。
mask-type: 定义遮罩是一个透明度遮罩还是一个亮度遮罩。

运动路径

offset: 用于指定元素的运动。
- offset-path: 指定元素运动的路径。
- offset-distance: 定义元素沿着 offset-path 的路径移动的距离。
- offset-position: 指定元素的起始位置。
- offset-rotate: 控制元素沿着路径移动时的旋转方式。
- offset-anchor:定义元素中用作运动路径锚点的点。

溢出

overflow: 控制元素的溢出行为，只适用于块元素。
- overflow-x: 控制水平方向的溢出行为，只适用于块元素。
- overflow-y: 控制垂直方向的溢出行为，只适用于块元素。
overflow-block: 用于指定在块轴（通常是垂直方向）上的溢出行为。
overflow-inline: 用于指定在行内轴（通常是水平方向）上的溢出行为。
overflow-anchor：用于控制元素溢出时滚动条的锚点位置。
overflow-clip-margin: 用于定义当 overflow 属性设置为 clip 时，元素的可视框（视觉框架）之外的裁剪边界的扩展范围。

Flex

flex：用于设置弹性元素的子元素的伸缩性。
- flex-basis：用于设置弹性元素在主轴上的初始大小。默认值为 auto，即元素的大小由其内容决定。
- flex-grow：定义元素在 flex 容器中剩余空间分配时的增长比例。默认值为 0，表示元素不会增长。
- flex-shrink：定义元素在 flex 容器中空间不足时的收缩比例。默认值为 1，表示元素会按比例收缩。
flex-flow：定义 flex 容器中元素的排列方向和换行规则。
- flex-direction：定义 flex 容器中子元素的排列方向。
- flex-wrap：定义 flex 容器中元素是否换行。
order：用定义元素在 flex 容器中的排列顺序。默认值为 0，表示元素按照在 HTML 中的顺序排列。
gap: 用于设置网格布局中行和列之间的间距。
- row-gap:用于设置网格布局中行之间的间距。
- column-gap:用于设置网格布局中列之间的间距。
justify-content：控制 flex 容器中 flex 行在主轴上的水平对齐方式。
- start: 将 flex 行对齐到 flex 容器的起始位置。
- end: 将 flex 行对齐到 flex 容器的结束位置。
- center: 将 flex 行水平居中。
- space-between: 将 flex 行均匀分布，并在它们之间留出相等的间距。
- space-around: 将 flex 行均匀分布，并在它们和 flex 容器的边缘之间留出相等的间距。
- space-evenly: 将 flex 行均匀分布，并在它们之间和 flex 容器的边缘之间留出相等的间距。
justify-items：控制 flex 容器中 flex 项在主轴上的垂直对齐方式。
- stretch: 将 flex 项拉伸到 flex 容器的高度。
- center: 将 flex 项垂直居中。
- flex-start: 将 flex 项对齐到 flex 容器的顶部。
- flex-end: 将 flex 项对齐到 flex 容器的底部。
- baseline: 将 flex 项的基线对齐到 flex 容器的基线。
- first baseline: 将第一个 flex 项的基线对齐到 flex 容器的基线。
- last baseline: 将最后一个 flex 项的基线对齐到 flex 容器的基线。
- space-between: 将 flex 项垂直均匀分布，并在它们之间留出相等的间距。
- space-around: 将 flex 项垂直均匀分布，并在它们和 flex 容器的边缘之间留出相等的间距。
- space-evenly: 将 flex 项垂直均匀分布，并在它们和 flex 容器的边缘之间留出相等的间距。
align-content：控制 flex 容器中flex 行在交叉轴上的对齐方式。
- stretch: 将 flex 行拉伸到 flex 容器的高度。
- center: 将 flex 行在交叉轴上居中。
- flex-start: 将 flex 行在交叉轴上对齐到 flex 容器的顶部。
- flex-end: 将 flex 行在交叉轴上对齐到 flex 容器的底部。
- space-between: 将 flex 行在交叉轴上均匀分布，并在它们之间留出相等的间距。
- space-around: 将 flex 行在交叉轴上均匀分布，并在它们和 flex 容器的边缘之间留出相等的间距。
- space-evenly: 将 flex 行在交叉轴上均匀分布，并在它们和 flex 容器的边缘之间留出相等的间距。
align-items：控制 flex 容器中 flex 项在交叉轴上的对齐方式。
- flex-start: 将 flex 项在交叉轴上对齐到 flex 容器的顶部。
- flex-end: 将 flex 项在交叉轴上对齐到 flex 容器的底部。
- baseline: 将 flex 项的基线对齐到 flex 容器的基线。
- first baseline: 将第一个 flex 项的基线对齐到 flex 容器的基线。
- last baseline: 将最后一个 flex 项的基线对齐到 flex 容器的基线。
- space-between: 将 flex 项在交叉轴上均匀分布，并在它们之间留出相等的间距。
- space-around: 将 flex 项在交叉轴上均匀分布，并在它们和 flex 容器的边缘之间留出相等的间距。
- space-evenly: 将 flex 项在交叉轴上均匀分布，并在它们和 flex 容器的边缘之间留出相等的间距。
align-self：控制单个 flex 项在交叉轴上的对齐方式。
- auto: 使用父容器的 align-items 属性值。
- stretch: 将 flex 项拉伸到 flex 容器的高度。
- center: 将 flex 项在交叉轴上居中。
- flex-start: 将 flex 项在交叉轴上对齐到 flex 容器的顶部。
- flex-end: 将 flex 项在交叉轴上对齐到 flex 容器的底部。
- baseline: 将 flex 项的基线对齐到 flex 容器的基线。
- first baseline: 将 flex 项的基线对齐到 flex 容器的基线。
- last baseline: 将 flex 项的基线对齐到 flex 容器的基线。
- space-between: 将 flex 项在交叉轴上均匀分布，并在它们之间留出相等的间距。
- space-around: 将 flex 项在交叉轴上均匀分布，并在它们和 flex 容器的边缘之间留出相等的间距。
- space-evenly: 将 flex 项在交叉轴上均匀分布，并在它们和 flex 容器的边缘之间留出相等的间距。
place-content: 定义 flex 容器中的元素在容器中如何对齐和分配空间。
place-items: 定义 flex 容器中的每个元素如何在其分配的空间内对齐。
place-self: 用于在 flex 布局中控制单个元素在容器中的对齐和定位。

Grid

grid:
- grid-auto-flow: 控制网格项目的自动布局流向，可以是 "row"、"column" 或 "dense"。
- grid-auto-rows: 定义没有明确指定大小的网格的行的大小。
- grid-auto-columns: 定义没有明确指定大小的网格的列的大小。
- grid-template: 用于定义网格的行和列的大小和结构。
  - grid-template-columns: 定义网格的列的大小和结构，可以指定一个或多个值。
  - grid-template-rows: 定义网格的行的大小和结构，可以指定一个或多个值。
  - grid-template-areas: 用于定义网格区域的布局，通过为每个区域分配一个名称，然后在容器中定义每个项目的区域。
grid-area: 用于指定项目所占的网格区域，可以同时设置行和列。
- grid-row: 定义项目所占的网格行的位置，可以同时设置起始和结束行。
  - grid-row-start: 定义项目的起始网格行位置。
  - grid-row-end: 定义项目的结束网格行位置。
- grid-column: 定义项目所占的网格列的位置，可以同时设置起始和结束列。
  - grid-column-start: 定义项目的起始网格列位置。
  - grid-column-end: 定义项目的结束网格列位置。
order：用定义元素在 grid 容器中的排列顺序。默认值为 0，表示元素按照在 HTML 中的顺序排列。
gap: 用于设置网格布局中行和列之间的间距。
- row-gap:用于设置网格布局中行之间的间距。
- column-gap:用于设置网格布局中列之间的间距。
justify-content：用于控制网格行或列中的项目在主轴上的对齐方式。
- flex-start：将项目对齐到主轴的起始位置。
- flex-end：将项目对齐到主轴的末尾位置。
- center：将项目居中对齐到主轴。
- space-between：将项目均匀分布在主轴上，并在它们之间留出相等的间距。
- space-around：将项目均匀分布在主轴上，并在它们和主轴的两端留出相等的间距。
- space-evenly：将项目均匀分布在主轴上，并在它们和主轴的两端留出相同的间距。
- stretch：将项目拉伸到主轴的长度。
justify-items：用于控制网格容器中的所有项目在交叉轴上的对齐方式。
- stretch：将项目拉伸到交叉轴的长度。
- flex-start：将项目对齐到交叉轴的起始位置。
- flex-end：将项目对齐到交叉轴的末尾位置。
- center：将项目居中对齐到交叉轴。
- space-between：将项目均匀分布在交叉轴上，并在它们之间留出相等的间距。
- space-around：将项目均匀分布在交叉轴上，并在它们和交叉轴的两端留出相等的间距。
- space-evenly：将项目均匀分布在交叉轴上，并在它们和交叉轴的两端留出相同的间距。
justify-self：用于控制单个网格项在交叉轴上的对齐方式。
- auto：使用父容器的 justify-items 属性值。
- flex-start：将项目对齐到交叉轴的起始位置。
- flex-end：将项目对齐到交叉轴的末尾位置。
- center：将项目居中对齐到交叉轴。
- space-between：将项目均匀分布在交叉轴上，并在它们之间留出相等的间距。
- space-around：将项目均匀分布在交叉轴上，并在它们和交叉轴的两端留出相等的间距。
- space-evenly：将项目均匀分布在交叉轴上，并在它们和交叉轴的两端留出相同的间距。
- stretch：将项目拉伸到交叉轴的长度。
align-content：用于控制网格容器中的所有项目在交叉轴上的对齐方式。
- stretch：将项目拉伸到交叉轴的长度。
- flex-start：将项目对齐到交叉轴的起始位置。
- flex-end：将项目对齐到交叉轴的末尾位置。
- center：将项目居中对齐到交叉轴。
- space-between：将项目均匀分布在交叉轴上，并在它们之间留出相等的间距。
- space-around：将项目均匀分布在交叉轴上，并在它们和交叉轴的两端留出相等的间距。
- space-evenly：将项目均匀分布在交叉轴上，并在它们和交叉轴的两端留出相同的间距。
align-items:用于控制网格容器中同一行或列中的项目在块轴上的对齐方式。
- stretch：将项目拉伸到块轴的长度。
- flex-start：将项目对齐到块轴的起始位置。
- flex-end：将项目对齐到块轴的末尾位置。
- center：将项目居中对齐到块轴。
- space-between：将项目均匀分布在块轴上，并在它们之间留出相等的间距。
- space-around：将项目均匀分布在块轴上，并在它们和块轴的两端留出相等的间距。
- space-evenly：将项目均匀分布在块轴上，并在它们和块轴的两端留出相同的间距。
align-self：用于控制单个网格项在块轴上的对齐方式。
- auto：使用父容器的 align-items 属性值。
- flex-start：将项目对齐到块轴的起始位置。
- flex-end：将项目对齐到块轴的末尾位置。
- center：将项目居中对齐到块轴。
- space-between：将项目均匀分布在块轴上，并在它们之间留出相等的间距。
- space-around：将项目均匀分布在块轴上，并在它们和块轴的两端留出相等的间距。
- space-evenly：将项目均匀分布在块轴上，并在它们和块轴的两端留出相同的间距。
place-content: 定义 Grid 容器中的元素在容器中如何对齐和分配空间。
place-items: 定义 Grid 容器中的每个元素如何在其分配的空间内对齐。
place-self: 用于在 Grid 布局中控制单个元素在容器中的对齐和定位。

多列

column-fill: 用于设置如何填充列，以平衡内容在列中的高度。
column-gap: 用于设置列之间的间距。
column-span: 用于设置元素应跨越多少列。
column-rule: 用于列之间分隔线。
- column-rule-color: 用于设置列之间分隔线的颜色。
- column-rule-style: 用于设置列之间分隔线的样式，如实线、虚线等。
- column-rule-width: 用于设置列之间分隔线的宽度。
columns: 用于定义多列布局的宽度和列数。
- column-count: 用于设置元素的列数。
- column-width: 用于设置列的宽度。

定位

top：物理属性，用于设置相对定位或绝对定位元素的顶部边缘与其包含块（对于相对定位）或文档窗口（对于绝对定位或固定定位）顶部的距离。
right：物理属性，用于设置相对定位或绝对定位元素的右侧边缘与其包含块（对于相对定位）或文档窗口（对于绝对定位或固定定位）右侧的距离。
bottom：物理属性，用于设置相对定位或绝对定位元素的底部边缘与其包含块（对于相对定位）或文档窗口（对于绝对定位或固定定位）底部的距离。
left：物理属性，用于设置相对定位或绝对定位元素的左侧边缘与其包含块（对于相对定位）或文档窗口（对于绝对定位或固定定位）左侧的距离。
inset：逻辑属性，用于设置元素相对于其包含块的定位，包含了 top、right、bottom 和 left 四个方向的值。
inset-inline：逻辑属性，用于设置元素在内联轴上的定位，对应于水平方向的定位。包含了 inset-inline-start 和 inset-inline-end 两个方向的值。
- inset-inline-start：逻辑属性，用于设置元素在内联轴上的开始位置，对应于水平方向的定位。
- inset-inline-end：逻辑属性，用于设置元素在内联轴上的结束位置，对应于水平方向的定位。
inset-block：逻辑属性，用于设置元素相对于其包含块的定位，包含了 top、bottom 两个方向的值。
- inset-block-start：逻辑属性，用于设置元素在块轴上的开始位置，对应于垂直方向的定位。
- inset-block-end：逻辑属性，用于设置元素在块轴上的结束位置，对应于垂直方向的定位。
float：用于使元素浮动，使其脱离文档流，并沿着包含块的左侧或右侧移动，直到遇到包含块或另一个浮动元素。
clear：用于指定元素的哪一侧不允许有浮动元素。通常用于解决浮动元素引起的父元素高度坍塌问题。
position：用于指定元素的定位方式。常见的值包括 relative、absolute、fixed 和 static。
z-index：用于设置元素的堆叠顺序，只针对拥有定位属性（position）的元素生效。

清除浮动float

使用clear属性: 在浮动元素之后的元素上应用clear属性，可以阻止它与前面的浮动元素在同一行显示。
css
```
.clear-element {
  clear: both; /* 或者 'left' 或 'right'，取决于需要清除哪个方向的浮动 */
}
```
空的清除元素: 通过添加一个空的元素，并在该元素上使用clear属性。这种方法虽然有效，但增加了额外的HTML标记。
html
```
<div class="floating-element"></div>
<div class="clear"></div> 
```
css
```
.clear {
  clear: both;
}
```
使用伪元素清除浮动: 这种方法不需要额外的HTML元素。它使用:after伪元素在父容器的末尾创建一个看不见的元素，并应用clear属性。
css
```
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
```
使用overflow属性: 设置父容器的overflow属性为auto或hidden（有时也可以是scroll），这可以使父容器扩展以包含浮动的子元素。
css
```
.parent {
  overflow: auto; /* 或 'hidden' */
}
```
使用Flexbox或Grid布局: 使用现代的CSS布局系统，如Flexbox或Grid，可以避免浮动相关的问题。在这些布局中，清除浮动通常不再必要。
css
```
.container {
  display: flex; /* 或 'grid' */
}
```

文档流

静态定位static
- static 是所有元素的默认定位方式。
- 元素按照正常的文档流进行布局，即元素在页面上的位置由它在HTML文档中的位置决定。
- top, right, bottom, left 和 z-index 属性对静态定位的元素没有影响。
- margin: auto 在水平方向上通常有效，可以使元素在其父元素中水平居中，前提是元素有确定的宽度。垂直方向上通常没有效果。
相对定位 relative
- relative 定位的元素首先按照正常文档流放置，然后相对于其正常位置进行偏移。
- 设置 top, right, bottom, left 属性可以控制元素相对于其正常位置的偏移。
- 相对定位的元素仍保留在文档流中，即它原本占据的空间仍然保留。
- margin: auto 在水平方向上通常有效，可以使元素在其父元素中水平居中，前提是元素有确定的宽度。垂直方向上通常没有效果。
绝对定位absolute
- absolute 定位的元素被移出正常文档流，并相对于其最近的已定位（非 static）父级元素进行定位。
- 如果没有已定位的父级元素，则将相对于浏览器(要先给浏览器设置高度为100vh)进行定位。
- 可以使用 top, right, bottom, left 属性来指定位置。
- 绝对定位的元素不占据原来的空间。
- margin: auto 非常有用，特别是当与 top, right, bottom, left 结合使用时。如果元素的对立面（比如 left 和 right）都被设置了，margin: auto; 可以在水平或垂直方向上居中元素。
- 子绝父相：让子元素相对于父元素进行自由移动
- 子绝父绝：在使用子绝父相的时候，发现父元素已经有绝对定位了，此时直接设置子元素为绝对定位即可
固定定位fixed
- fixed 定位的元素相对于浏览器窗口进行定位，即使窗口滚动，它也不会移动。
- 它使用 top, right, bottom, left 属性来指定位置。
- 固定定位的元素被移出正常文档流，不占据原来的空间。
- 通常用于创建始终位于页面特定位置的UI元素，如固定顶部导航栏。
- margin: auto 可以用来在水平或垂直方向上居中元素，尤其是当元素的对立面定位被指定时。
粘性定位sticky
- sticky 定位是相对定位和固定定位的混合体。
- 它根据用户的滚动位置相对于其最近的滚动祖先和包含块（最近的块级祖先）进行定位。
- 当元素在视口内到达指定的位置时（通过 top, right, bottom, left 设置），它就像fixed定位一样“粘”在那个位置。
- 当用户继续滚动时，它可能又回到文档流中，表现得像relative定位。
- margin: auto; 的表现类似于相对定位。但是一旦元素变得“粘滞”，它的行为更像是固定定位的元素，尽管margin: auto在这种情况下不太常用。

居中对齐

水平居中
- 对于行内或行内块元素（如文本或链接）:使用 text-align: center; 在其父元素上。
- 对于块级元素（如div）:
  - 使用 margin: 0 auto; 来居中一个固定宽度的块元素。
  - 使用 display: flex; justify-content: center; 在父元素上实现弹性盒子布局中的居中。
  - 使用 display: grid; place-items: center; 在父元素上实现网格布局中的居中。
  - 使用定位（适用于绝对或相对定位元素）:
    - 设置 position: absolute; left: 50%; 然后使用 transform: translateX(-50%); 来偏移元素。
    - 设置 position: absolute; left: 0; right: 0; margin: auto;。
垂直居中
- 对于行内元素或行内块元素:使用 line-height 当它和容器高度相等时，适用于单行文本。
- 对于块级元素:
  - 使用 display: flex; align-items: center; 在父元素上实现弹性盒子布局中的居中。
  - 使用 display: grid; place-items: center; 在父元素上实现网格布局中的居中。
  - 使用定位和变换：
    - 设置 position: absolute; top: 50%; 然后使用 transform: translateY(-50%);。
    - 设置 position: absolute; top: 0; bottom: 0; margin: auto;。
- 对于表格:父元素设置为 display: table;，子元素设置为 display: table-cell; vertical-align: middle;。
水平和垂直居中
- 使用Flexbox:父元素设置 display: flex; justify-content: center; align-items: center;。
- 使用Grid:父元素设置 display: grid; place-items: center;。
- 绝对定位和已知尺寸元素:设置 position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);。
- 绝对定位和未知尺寸元素:设置 position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto;。

图形

shape-outside：定义了一个可以使文本环绕的形状。
shape-margin：定义了shape-outside形状周围的外边距，可以用来控制文本与形状的距离。
shape-image-threshold：用来设置使用 shape-outside 属性定义的图像时，图像的透明度阈值。

表格

border-collapse: 用于控制表格中相邻单元格的边框是否合并。
border-spacing: 用于设置表格元素的单元格之间的边框间距。
caption-side：用于设置表格标题的位置，决定标题是在表格的顶部还是底部显示。
empty-cells：用于控制表格中空单元格（即不包含内容的单元格）的边框显示方式
table-layout：用于控制表格的布局方式。

文本

hanging-punctuation：用于控制标点符号在行尾的位置。
hyphenate-limit-chars：用于指定在文本中的哪些字符位置可以进行断字（连字符处理）。
hyphenate-character：用于指定单词断字时的连字符（hyphen）的样式。
hyphens：用于控制是否允许单词在行尾处被拆分。
letter-spacing：用于调整文字之间的间距，即字母间距。
line-break：用于指定如何处理文本换行的规则。
line-height：用于指定文本行间的距离（行高）。
overflow-wrap：用于控制文本换行方式。
text-overflow: 用于指定当文本溢出包含元素时显示的省略标记。
tab-size：用于指定制表符（tab）的宽度。
text-align：用于设置文本的水平对齐方式。
text-align-last：用于设置多行文本的最后一行的对齐方式，特别是在使用 justify 对齐时。
text-indent：用于设置文本块的首行缩进。
text-justify：指定当 text-align 设置为 justify 时的对齐方法。
text-size-adjust：用于控制浏览器是否和如何调整文本的大小以提高可读性，主要用于移动设备。
text-transform：用于控制文本的大小写转换。
text-wrap：用于指定当单词太长而无法放入一行时的换行策略。
text-rendering：提供了控制文本渲染的方式，以优化速度、清晰度或几何精度。
text-decoration：用于设置文本的装饰效果，如下划线、删除线等。
- text-decoration-color：用于指定文本装饰线的颜色。
- text-decoration-line：用于指定应用到文本的装饰线的类型。
- text-decoration-skip-ink：用于控制文本装饰（如下划线）是否应“跳过”字形的笔画。
- text-decoration-style：定义了文本装饰线（如下划线、删除线）的样式。
- text-decoration-thickness：用于设置文本装饰线的粗细。
text-emphasis：用于设置强调标记.
- text-emphasis-color：用于设置强调标记的颜色。
- text-emphasis-style：用于给文本添加强调标记（如圆点、圈、双圆点）。
- text-emphasis-position：用于设置文本强调标记的位置。
text-shadow：文本添加阴影。
text-underline-offset：用于调整文本下划线的位置，相对于文字基线的偏移。
text-underline-position：用于设置下划线相对于文本的位置。
white-space：用于设置如何处理元素内的空白字符。
word-break：用于指定如何在单词内部进行换行。
word-spacing：用于设置单词之间的空间。
vertical-align：设置元素的垂直对齐方式。

单行文本溢出

css

white-space:nowrap; /* 文本不换行 */
overflow:hidden; /* 单行文本溢出隐藏 */
text-overflow:ellipsis; /* 单行文本溢出变为省略号 */

多行文本溢出

css

overflow: hidden; /* 多行文本溢出隐藏 */
text-overflow: ellipsis; /* 多行文本溢出变为省略号 */
display: -webkit-box;
-webkit-line-clamp: 2; /* 第几行文本变为省略号 */
-webkit-box-orient: vertical;

基线对齐

只针对inline、inline-block、table有效；
属性值top、middle、bottom，与line-height有关
属性值baseline、text-top、text-bottom，与font-size有关

行高

让单行文本垂直居中可以设置line-height: 文字父元素高度；
网页精准布局时，会设置line-height: 1 可以取消上下间距；

变形

backface-visibility：用于在 3D 动画中指定一个元素的背面在旋转时是否可见。
matrix(a, b, c, d, e, f): 一个2D变换函数，将所有2D变换（平移、旋转、缩放和倾斜）组合成一个。参数代表这些变换的矩阵值。
matrix3d(...): matrix函数的3D版本，允许在3D空间中进行复杂的变换，包括所有3D变换函数。
perspective(n): 这个函数不直接修改元素，而是影响子元素的3D变换，通过提供深度感。参数定义了用户与z=0平面之间的距离。
perspective-origin：用于设置perspective属性定义的视角的起源点（即消失点）。
rotate(angle): 围绕其原点旋转元素。角度可以是度（deg）、弧度（rad）或梯度（grad）。
rotate3d(x, y, z, angle): 围绕由x、y和z参数定义的轴在3D空间中旋转元素。角度定义旋转的程度。
rotateX(angle): 围绕X轴旋转元素一个给定的角度。
rotateY(angle): 围绕Y轴旋转元素一个给定的角度。
rotateZ(angle): 围绕Z轴旋转元素一个给定的角度，实际上与2D旋转函数类似。
scale(x, y): 按给定的x（宽度）和y（高度）因子缩放元素。如果省略y值，假定它等于x。
scale3d(x, y, z): 在3D空间中缩放元素。它是沿X、Y和Z轴缩放的简写。
scaleX(factor): 按给定因子沿X轴缩放元素。
scaleY(factor): 按给定因子沿Y轴缩放元素。
scaleZ(factor): 沿Z轴缩放元素的给定因子，用于3D变换。
skew(x-angle, y-angle): 通过给定的x角度和y角度倾斜元素，沿X轴和/或Y轴扭曲元素。
skewX(angle): 按给定角度沿X轴倾斜元素。
skewY(angle): 按给定角度沿Y轴倾斜元素。
transform：用于设置元素二维或三维变换，包括旋转、缩放、倾斜等。
transform-box：定义变换作用于元素哪个区域。
transform-origin：定义变换的原点位置，即变换围绕哪个点进行。
transform-style：用于指定子元素是位于3D空间中还是被平面化。
translate(x, y): 按给定的x（水平）和y（垂直）距离移动元素。如果省略y，假定它为0。
translate3d(x, y, z): 在3D空间中移动元素。它是沿X、Y和Z轴平移的简写。
translateX(distance): 按给定距离沿X轴移动元素。
translateY(distance): 按给定距离沿Y轴移动元素。
translateZ(distance): 按给定距离沿Z轴移动元素，用于3D变换。

过渡

transition：用于在一定时间内平滑地改变一个或多个CSS属性的值。
transition-delay：单独指定在开始过渡效果之前等待的时间。
transition-duration：定义过渡效果花费的时间。
transition-property：指定应用过渡效果的CSS属性。
transition-timing-function：定义了过渡的速度曲线。
@starting-style：

书写模式

direction：用于设置元素的文本方向。推荐使用 HTML dir 属性代替。
text-combine-upright：用于控制如何组合和显示垂直方向上的字符。
text-orientation：用于设置文本在垂直方向的方向和旋转方式。
unicode-bidi：控制如何处理文本的双向排列。
writing-mode：定义了文本的书写方向。

层叠与继承

all：所有 CSS 属性的简写属性，用于将所有元素的样式属性重置为其初始值或继承值。
- initial: 将所有属性重置为它们的初始值。
- inherit: 将所有属性设置为从父元素继承的值。
- unset: 将所有属性重置为其继承值（如果有），否则重置为其初始值。
- revert：用于撤销所有之前规则集对属性的更改，恢复到浏览器的默认样式。
- revert-layer：用于恢复到特定层级的默认样式。

滚动条

scrollbar-color: 自定义滚动条的颜色。
scrollbar-gutter: 用于控制滚动容器周围的空间，以及是否应该保留额外的空间用于滚动条。
scrollbar-width 用于设置滚动条的宽度。
scroll-behavior：控制滚动时的流畅度和动画效果。
scroll-margin：用于设置元素的滚动边距。
- scroll-margin-top：控制元素垂直滚动的顶部与视口顶部的边距。
- scroll-margin-bottom：控制元素垂直滚动的底部与视口底部的边距。
- scroll-margin-left：控制元素水平滚动的左侧与视口左侧的边距。
- scroll-margin-right：控制元素水平滚动的右侧与视口右侧的边距。
scroll-margin-block：控制元素在块轴上的滚动边距。
- scroll-margin-block-end：控制元素在块轴上的底部与视口底部的边距。
- scroll-margin-block-start：控制元素在块轴上的顶部与视口顶部的边距。
scroll-margin-inline：控制元素在行内轴上的滚动边距。
- scroll-margin-inline-end：控制元素在行内轴上滚动的右边与视口右边的边距。
- scroll-margin-inline-start：控制元素在行内轴上滚动的左边与视口左边的边距。
scroll-padding：用于设置元素的滚动内边距。
- scroll-padding-top：控制元素垂直滚动的顶部与视口顶部的内边距。
- scroll-padding-bottom：控制元素垂直滚动的底部与视口底部的内边距。
- scroll-padding-left：控制元素水平滚动的左侧与视口左侧的内边距。
- scroll-padding-right：控制元素水平滚动的右侧与视口右侧的内边距。
scroll-padding-block：控制元素在块轴上的滚动内边距。
- scroll-padding-block-end：控制元素在块轴上的底部与视口底部的内边距。
- scroll-padding-block-start：控制元素在块轴上的顶部与视口顶部的内边距。
scroll-padding-inline：控制元素在行内轴上的滚动内边距。
- scroll-padding-inline-end：控制元素在行内轴上滚动的右边与视口右边的内边距。
- scroll-padding-inline-start：控制元素在行内轴上滚动的左边与视口左边的内边距。
scroll-snap-align：指定元素如何对齐到滚动容器的捕捉位置。
scroll-snap-stop：控制当用户滚动通过捕捉点时是否必须停止。
scroll-snap-type：设置滚动容器上的滚动捕捉行为。

其他

accent-color：用于定义元素强调色，如 <input type="checkbox"> <input type="radio"> <input type="range"> <progress> 。
appearance：指定用户代理（User Agent，例如浏览器）中表单控件（如按钮、输入框等）的外观样式。
caret-color：用于设置文本输入域（例如 input 和 textarea）中的文本插入光标 (caret) 的颜色。
cursor：用于设置鼠标指针的样式。
outline：用于设置一个元素的轮廓样式、宽度和颜色。
- outline-color：用于指定轮廓的颜色。
- outline-style：用于定义轮廓的样式。
- outline-width：用于设置轮廓的宽度。
outline-offset：用于设置轮廓与元素边缘之间的距离。
pointer-events：用于控制元素穿透，如点赞全屏动画。
resize：调整元素（通常是<textarea>）的大小。
user-select:控制用户能否选中文本。
aspect-ratio: 用于设置元素盒子的宽高比。通常结合 object-fit 一起使用。
block-size: 用于设置元素在块轴（垂直方向）上的尺寸。对于水平书写模式（例如英语、拉丁语系语言）：block-size 等同于 height，控制元素的垂直大小。对于垂直书写模式（例如日语、中文）：block-size 等同于 width，控制元素的水平大小。
content：用于在伪元素中插入内容。
height: 用于设置元素的高度。
width: 用于设置元素的宽度。
inline-size：用于定义元素在行内方向的尺寸。
max-block-size: 逻辑属性，用于设置元素的最大块级方向尺寸(高度)。
max-inline-size: 逻辑属性，用于设置元素的最大内联方向尺寸(宽度)。
max-height: 设置元素的最大高度。
max-width: 设置元素的最大宽度。
min-block-size: 逻辑属性，用于设置元素的最小块轴方向尺寸(高度)。
min-inline-size: 逻辑属性，用于设置元素的最小内联轴方向尺寸(宽度)。
min-height: 设置元素的最小高度。
min-width: 设置元素的最小宽度。
opacity: 用于设置元素的不透明度。
overscroll-behavior：用于定义当滚动到容器的边界时是否应该将滚动事件传递给父容器（即滚动链），以及是否应该显示滚动边界反馈（如滚动条的弹跳效果）。
- overscroll-behavior-x：控制水平方向的滚动边界行为。
- overscroll-behavior-y：控制垂直方向的滚动边界行为。
overscroll-behavior-block：控制在块轴上的滚动边界行为。
overscroll-behavior-inline：控制在行内轴上的滚动边界行为。
page：指定元素的内容是否应该开启新页面。主要适用于分页媒体，如打印机。
page-break-after：指定元素后面是否强制换页。
page-break-before：指定元素前面是否强制换页。
page-break-inside：指定元素内部是否允许断页。
paint-order：用于控制SVG元素的填充(fill)、描边(stroke)和文本(markers)的绘制顺序。
quotes: 用于指定嵌入文本（如直接引语）的开头和结尾使用的引号类型。
touch-action：用于指定触摸屏用户如何操纵元素的区域。
visibility：用于控制元素是否可见，并且在网页中占位置。
will-change：用于提前告知浏览器元素可能会有哪些变化，这有助于浏览器优化渲染性能。

-moz-*

-moz-image-region（非标准）：用于指定要显示的图像的矩形区域，有效地允许在样式中进行类似精灵图的行为。
-moz-orient（非标准）：设置盒子中内容的方向。可以用来指定水平或垂直方向。
-moz-user-focus（非标准）：用于控制用户与之交互时（例如，通过键盘导航）元素的焦点行为。

-webkit-*

-webkit-border-before（非标准）：定义元素前边框的样式，类似于标准的 border 属性。
-webkit-box-reflect（非标准）：创建元素的镜像反射效果，如模拟水面反射。
-webkit-line-clamp：限制在一个块元素中显示的文本行数。通常与 -webkit-box 属性一起使用来创建“多行文本溢出省略”效果。
-webkit-mask-attachment（非标准）：定义遮罩图像是否固定（fixed）或者随对象内容滚动（scroll）。
-webkit-mask-box-image（非标准）：一次性为整个元素设置遮罩图像。它能让你将一个图像设置为边框或盒子的遮罩，并定义如何分割和拉伸图像。
-webkit-mask-composite（非标准）：确定多个遮罩层如何组合在一起。
-webkit-mask-position-x（非标准）：指定遮罩图像在水平方向上的位置。
-webkit-mask-position-y（非标准）：指定遮罩图像在垂直方向上的位置。
-webkit-mask-repeat-x（非标准）：定义水平方向上遮罩图像是否应该重复。
-webkit-mask-repeat-y（非标准）：定义垂直方向上遮罩图像是否应该重复。
-webkit-overflow-scrolling（非标准）：控制在iOS设备上滚动容器的滚动行为。
-webkit-tap-highlight-color（非标准）：改变触摸设备上链接或点击可点击元素时的高亮颜色。可以用来自定义或禁用触摸反馈颜色。
-webkit-text-fill-color：指定文本的填充颜色。常与 -webkit-text-stroke 一起使用来创建有特效的文本。
-webkit-text-security（非标准）：改变密码输入框中字符的显示样式。可用于自定义密码字段的符号。
-webkit-text-stroke：定义文本的描边效果。
- -webkit-text-stroke-color：定义文本的描边颜色。
- -webkit-text-stroke-width：定义文本的描边宽度。
-webkit-touch-callout（非标准）：控制当用户在iOS设备上触摸并按住元素时是否显示系统默认的菜单。

At-rules

@charset：定义样式表使用的字符编码。
@import：用于导入其他样式表。
@namespace：声明XML命名空间，用于XML文档中。
@font-face：定义一种字体，包括其源和样式。
@font-feature-values：定义字体特性的命名值。
@font-palette-values：定义字体调色板的值。
@color-profile：定义颜色配置文件。
@keyframes：定义动画的关键帧。
@container：定义容器查询的条件。
@media：定义媒体查询，根据不同的媒体类型和特征应用不同的样式。
@supports：检测浏览器是否支持某些CSS特性，并据此应用不同的样式。
@page：用于打印文档时设置页面的样式。
@counter-style：定义列表项和计数器的样式。
@layer：用于定义和管理样式层。
@property：用于注册自定义属性。

函数

abs()：返回绝对值。
acos()：返回反余弦值。
asin()：返回反正弦值。
atan()：返回反正切值。
atan2()：返回两个参数的反正切值。
cos()：返回余弦值。
exp()：返回 e 的指数。
hypot()：返回所有参数的平方和的平方根。
log()：返回自然对数。
max()：返回一系列值中的最大值。
min()：返回一系列值中的最小值。
pow()：返回数的指数幂。
rem()：返回余数。
round()：返回四舍五入后的值。
sign()：返回数的符号。
sin()：返回正弦值。
sqrt()：返回平方根。
tan()：返回正切值。
calc()：进行数学计算，用于动态计算长度值。
clamp()：根据最小值、最佳值和最大值限制一个范围。
fit-content()：用于网格布局，使元素适应内容大小。
minmax()：用于网格布局，定义最小和最大尺寸。
attr()：返回元素属性的值。
counter()/counters()：返回或格式化计数器的值。
env()：获取环境变量的值。
symbols()：定义列表项的符号样式。
var()：引用自定义属性的值。
cross-fade()：混合两个图像或颜色。
path()：定义剪切路径或形状。
url()：加载外部资源，如图像或字体文件。
mod()：返回两个数相除的余数。
repeat()：用于网格布局，重复某个模式。

数据类型

`<absolute-size>`

这是一个用于字体大小的关键字，它表示一组预定义的大小。这些大小是相对于用户代理（浏览器）的默认字体大小设置的。

xx-small：绝对大小为 medium 大小的 60%。
x-small：绝对大小为 medium 大小的 75%。
small：绝对大小为 medium 大小的 89%。
medium：用户首选的字体大小。该值用作参考中间值。
large：绝对大小比 medium 大 20%。
x-large：绝对大小比 medium 大 50%。
xx-large：绝对大小是 medium 大小的两倍。
xxx-large：绝对大小是 medium 大小的三倍。

`<angle>`

指一个角度值，用于定义各种属性中的角度，如旋转（rotate）或渐变方向（linear-gradient）。

deg：表示以度为单位的角度。一个完整的圆圈是 360deg 。示例：+*-9 0deg 、 90deg 、 14.23deg 。
grad：表示以弧度表示的角度。一个完整的圆圈是 400grad 。示例： 0grad 、 100grad 、 38.8grad 。
rad：表示以弧度表示的角度。一个完整的圆是 2π 弧度，近似于 6.2832rad 。 1rad 为 180/π 度。示例： 0rad 、 1.0708rad 、 6.2832rad 。
turn：表示转数内的角度。一个完整的圆圈是 1turn 。示例： 0turn 、 0.25turn 、 1.2turn 。

`<basic-shape>`

定义了一个基本形状，用于clip-path、shape-outside 和 offset-path属性。

inset()：用于创建一个矩形形状。
circle()：用于创建一个圆形形状。
ellipse()：用于创建一个椭圆形状。
polygon()：用于创建一个多边形形状。
path()：用于定义一个由SVG路径数据指定的形状。

`<blend-mode>`

指定了一个混合模式，用于 background-blend-mode 和 mix-blend-mode 属性。

normal：默认模式。不应用任何混合，元素直接覆盖背景。
multiply：颜色相乘。结果是更暗的颜色。用于创建阴影效果。
screen：颜色相加，结果是更亮的颜色。常用于创建亮点和镜头光晕效果。
overlay：结合 multiply 和 screen 模式。根据背景颜色调整颜色。
darken：将较暗的颜色保留下来。类似于比较两个图层，然后选择较暗的颜色。
lighten：将较亮的颜色保留下来。选择两个图层中较亮的颜色。
color-dodge：通过减小对比度来增亮背景颜色。
color-burn：通过增加对比度来加深背景颜色。
hard-light：类似于 overlay，但是以源颜色（而不是背景颜色）为基础。
soft-light：创建软光效果。类似于天然光线照射。
difference：减去较暗颜色从较亮颜色中。
exclusion：类似于 difference，但对比度较低。
hue：将源图像的色调应用于背景。
saturation：将源图像的饱和度应用于背景。
color：将源图像的色调和饱和度应用于背景。
luminosity：将源图像的亮度应用于背景。

`<box-edge>`

content-box：指的是元素的内容区域，不包括内边距（padding）、边框（border）和外边距（margin）。在box-sizing属性中使用时，宽度和高度只包括内容区域。
border-box：包括内容区域、内边距和边框，但不包括外边距。在box-sizing属性中使用时，宽度和高度包括内容、内边距和边框。
padding-box：包括内容区域和内边距，但不包括边框和外边距。在background-clip或background-origin属性中使用时很有用。
margin-box：包括内容区域、内边距、边框和外边距。
fill-box：用于SVG图形，指的是应用填充（fill）的区域。通常用于transform-origin或background-size属性中。
stroke-box：用于SVG图形，指的是应用描边（stroke）的区域。用于transform-origin属性中，指定变换的原点为描边的范围。
view-box：用于SVG图形，指的是SVG的视图框（viewBox）。通常用于transform-origin属性中，指定变换的原点为SVG的整个视图框。

`<calc-constant>`

在calc()函数中使用的常数。

e：表示自然对数的底数（约等于2.718）。在CSS中，e不是一个内置常量，但可以在计算或自定义函数中作为近似值使用。
pi：表示圆周率π（约等于3.14159）。在CSS中，pi可以在与角度相关的计算中使用，例如，在turn单位（1turn = 2π rad = 360deg）的转换中。
infinity / -infinity：infinity代表正无穷大，而-infinity代表负无穷大。在CSS中，这些概念通常不直接使用，因为CSS的计算和属性值通常需要有限的、明确定义的值。
NaN：代表“非数字”（Not a Number）。在CSS中，如果某个计算或函数的结果不是有效的数字，它可能会返回NaN。例如，在除以零的情况下可能会遇到NaN。但在实际的CSS规则中，NaN通常不是一个有效的值，会导致规则被忽略。

`<color>`

表示一个颜色值。

关键字：<named-color>、<system-color>、currentcolor
十六进制：<hex-color>
颜色空间函数
- sRGB 色彩空间： hsl() 、 hwb() 、 rgb()
- CIELAB 色彩空间： lab() 、 lch()
- Oklab 色彩空间： oklab() 、 oklch()
- 其他颜色空间： color()
混合两种颜色：color-mix()
指定两种颜色：light-dark()

`<custom-ident>`

表示一个自定义的标识符，由字母、数字、或者下划线组成的字符串，不能以数字或破折号加数字开头。通常用于定义变量名、动画名称、计数器名称、网格区域名称等。

css

/* 变量名称 */
:root { --main-color: black; }
element { color: var(--main-color); }

/* 动画名称 */
@keyframes myAnimation { ... }
element { animation-name: myAnimation; }

/* 计数器名称 */
body { counter-reset: section; }
h1 { counter-increment: section; }

/* 网格布局 */
.grid-container {
  grid-template-columns: [start] 1fr [middle] 1fr [end];
}

`<generic-family>`

用于 font 和 font-family 属性。

ui-serif / serif: 衬线字体在字母笔画的末端有小装饰，这些小线条称为衬线。衬线体通常被视为传统和正式，适用于印刷媒体，如书籍和报纸。常见的衬线字体包括Times New Roman和Georgia。
ui-sans-serif / sans-serif: 无衬线字体的笔画末端没有小装饰，线条清晰而简洁。它们通常被认为是现代和干净的，因此非常适用于数字屏幕和平面设计。常见的无衬线字体包括Arial和Helvetica。
ui-monospace / monospace: 等宽字体中每个字符占据相同的水平空间。这种字体常用于代码显示和文档，其中字母对齐是重要的。常见的等宽字体包括Courier New和Monaco。
cursive: 草书字体模仿人类的手写字迹，通常笔画连贯，有时倾斜。这种字体风格适用于更具艺术性或个性化的内容。然而，具体的草书字体在不同的操作系统或浏览器中可能会有很大差异。
fantasy: 幻想字体是具有独特和通常较为装饰性的字体，常用于标题或用于吸引注意力的文本。由于它们的装饰性和独特性，通常不适用于大段的正文文本。
system-ui：指示浏览器使用用户首选的系统字体，确保操作系统和应用程序之间具有一致的外观和感觉。
ui-rounded：从系统中选择圆角无衬线字体，具有柔和的边缘，外观更友好。
math：用于显示数学公式和符号。
emoji：用于显示表情符号。
fangsong：一种介于衬线宋体和草书楷体之间的特殊汉字风格。这种风格经常用于政府文件。

`<length>`

px: 最常用的长度单位，代表屏幕上的一个点。由于屏幕分辨率的不同，一个像素的实际大小也可能不同，但它提供了一种简单且具有一致性的度量方式。
em: 相对于当前元素的字体大小。例如，如果一个元素的字体大小是16px，那么1em就等于16px。它通常用于响应式设计，因为它可以根据父元素的字体大小动态缩放。
rem: 类似于em，但总是相对于根元素（html元素）的字体大小。这意味着无论嵌套结构如何，1rem总是等于根元素的字体大小。
vw/vh: 分别是视窗宽度和视窗高度的百分比。例如，50vw是视窗宽度的50%。这些单位对于创建响应式设计非常有用，因为它们可以根据视窗大小动态调整元素的大小。
vmin/vmax: 分别是视窗宽度和高度中较小值和较大值的百分比。它们在处理不同方向上的视窗尺寸变化时非常有用。
cm/mm/in: 这些是实际长度单位，通常用于打印媒介而不是屏幕显示。它们代表实际的物理尺寸。
pt: 传统印刷行业的长度单位，1pt等于1/72英寸。在屏幕显示上，点通常被视为等于像素。
%: 相对于另一个值的百分比，通常是父元素的尺寸。百分比单位非常适合创建大小随父容器变化的布局。

`<line-style>`

用于 border 和 column属性。

none: 无边框。这会使得元素看起来没有边框。
solid: 实线边框。这是最常见的边框样式，提供了一个连续的实线。
dotted: 点状边框。边框由一系列圆点组成。
dashed: 虚线边框。边框由一系列短线段组成。
double: 双线边框。边框由两个平行的实线组成，中间有空间。
groove: 3D凹槽样式。边框看起来像是被刻入元素中。
ridge: 3D脊状样式。边框看起来像是从元素中凸出来。
inset: 3D内嵌样式。边框给人一种元素被按下去的感觉。
outset: 3D突出样式。边框给人一种元素被拉出来的感觉。

`<overflow>`

用于 overflow、overflow-block、overflow-inline、overflow-x 和 overflow-y属性。

visible: 这是默认值。溢出的内容不会被剪裁，会呈现在元素框之外。
hidden: 溢出的内容会被剪裁，并且不可见。
scroll: 不论内容是否溢出，元素都会提供滚动条。如果内容溢出，则可以通过滚动查看剩余内容。
auto: 浏览器会根据内容是否溢出来决定是否提供滚动机制。如果内容不溢出，浏览器可能不会提供滚动条；如果内容溢出，浏览器将提供滚动条以便查看所有内容。

`<relative-size>`

用于 font 和 font-size 属性。

smaller：元素的大小将比其父元素小 120% 到 150%。
larger：元素的大小将比其父元素大 120% 到 150%。

CSS ​

选择器 ​

Attribute 选择器 ​

Class 选择器 ​

ID 选择器 ​

Element 选择器 ​

Universal 选择器 ​

选择器列表 ​

组合器 ​

后代选择器 ​

子代选择器 ​

相邻兄弟选择器 ​

通用兄弟选择器 ​

伪类 ​

伪元素 ​

属性 ​

动画 ​

背景 ​

单张背景 ​

多张背景 ​

线性渐变 ​

径向渐变 ​

边框 ​

画三角形 ​

盒模型 ​

外边距合并 ​

外边距塌陷 ​

变量 ​

颜色 ​

容器 ​

独立容器 ​

显示方式 ​

滤镜 ​

字体 ​

分页换行 ​

图像 ​

计数器 ​

列表项 ​

遮罩 ​

运动路径 ​

溢出 ​

Flex ​

Grid ​

多列 ​

定位 ​

清除浮动float ​

文档流 ​

居中对齐 ​

图形 ​

表格 ​

文本 ​

单行文本溢出 ​

多行文本溢出 ​

基线对齐 ​

行高 ​

变形 ​

过渡 ​

书写模式 ​

层叠与继承 ​

滚动条 ​

其他 ​

-moz-* ​

-webkit-* ​

At-rules ​

函数 ​

数据类型 ​

<absolute-size> ​

<angle> ​

<basic-shape> ​

<blend-mode> ​

<box-edge> ​

<calc-constant> ​

<color> ​

<custom-ident> ​

<generic-family> ​

<length> ​

<line-style> ​

<overflow> ​

<relative-size> ​

CSS

选择器