CSS杂记

链接HTML文件与CSS样式表

在<head>元素里使用<style>元素嵌入样式表
使用HTML元素的style属性设置样式表
将样式表放在外部文件，然后使用@import指令导入HTML文件
将样式表放在外部文件，然后使用<link>元素链接至HTML文件

@import和<link>有什么区别？
首先，是 HTML 提供的标签，属于 HTML 语义结构的一部分，能够并行加载 CSS 文件，加载效率更高，浏览器在解析 HTML 时遇到标签就会立即开始加载对应的样式文件，有利于页面快速渲染，因此推荐在生产环境中优先使用。而 @import 是 CSS 提供的语法规则，通常用于在一个 CSS 文件中导入另一个 CSS 文件，属于 CSS 级别的语法，加载具有延迟性——只有在外部样式表被解析时才会继续解析 @import 的文件，可能会导致样式闪烁（FOUC）或阻塞渲染，影响性能。此外，旧版本的浏览器（如 IE5）对 @import 的兼容性较差，而的兼容性更好也更稳定。从可维护性角度看，@import 常用于将 CSS 文件模块化，结构清晰，但不适合在 HTML 文件中使用。因此在实际开发中，如果是在 HTML 中引入样式，推荐使用；如果是在 CSS 中组织样式模块，可以使用 @import，但在现代工程化开发中，推荐使用 CSS 预处理器（如 Sass、Less）或模块化方案（如 PostCSS、Vite 等）统一管理样式依赖，更灵活高效。

选择器类型

类型	选择器	说明	示例
万用选择器	`*`	匹配所有元素	`*`
元素选择器	`h1`	匹配指定元素	`p`
子选择器	`>`	匹配指定元素的子元素	`div > p`
后代选择器	空格	匹配指定元素的后代元素	`div p`
相邻兄弟选择器	`+`	匹配指定元素后面的相邻兄弟元素	`div + p`
通用兄弟选择器	`~`	匹配指定元素的所有兄弟元素	`div ~ p`
类选择器	`.`	匹配指定类名的元素	`.class`
ID选择器	`#`	匹配指定 ID 的元素	`#id`
属性选择器	`[]`	匹配指定属性的元素	`[attr]`
伪类选择器	`:`	匹配指定状态的元素	`:hover`
伪元素选择器	`::`	匹配指定元素的特定部分	`::before`

详说属性选择器
- [attr]：匹配具有指定属性的元素
- [attr=value]：匹配属性值完全等于指定值的元素
- [attr~=value]：匹配属性值中包含指定词汇的元素或以空格分隔
- [attr|=value]：匹配属性值以指定值开头的元素或以连字符分隔
- [attr^=value]：匹配属性值以指定值开头的元素
- [attr$=value]：匹配属性值以指定值结尾的元素
- [attr*=value]：匹配属性值中包含指定值的元素
详说伪类选择器
- :link：匹配未访问的链接
- :visited：匹配已访问的链接
- :hover：匹配鼠标悬停的元素
- :active：匹配被激活的元素
- :focus：匹配获得焦点的元素
- :first-child：匹配父元素的第一个子元素
- :last-child：匹配父元素的最后一个子元素
- :nth-child(n)：匹配父元素的第 n 个子元素
- :nth-last-child(n)：匹配父元素的倒数第 n 个子元素
- :nth-of-type(n)：匹配父元素的第 n 个指定类型的子元素
- :nth-last-of-type(n)：匹配父元素的倒数第 n 个指定类型的子元素
- :first-of-type：匹配父元素的第一个指定类型的子元素
- :last-of-type：匹配父元素的最后一个指定类型的子元素
- :only-child：匹配父元素的唯一子元素
- :only-of-type：匹配父元素的唯一指定类型的子元素
- :empty：匹配没有子元素的元素
- :not(selector)：匹配不符合指定选择器的元素
- :enabled：匹配可用的表单元素
- :disabled：匹配禁用的表单元素
- :checked：匹配被选中的表单元素
- :target：匹配当前活动的目标元素
- :lang(language)：匹配指定语言的
详说伪元素选择器
- ::before：在元素内容之前插入内容
- ::after：在元素内容之后插入内容
- ::first-letter：选择元素的第一个字母
- ::first-line：选择元素的第一行
- ::selection：选择被用户选取的部分
  
  伪元素选择器是 CSS 中用于创建和样式化某些“虚拟”元素的一种语法，它不会出现在 DOM 中，但能通过样式实现特定的视觉效果。

选择器优先级

由选择器的“特异性值”决定

内联样式（a）：如 <div style="color: red;">，它的优先级最高，特异性是 (1,0,0,0)。
ID选择器（b）：如 #app，特异性是 (0,1,0,0)，次于内联样式。
类选择器、伪类、属性选择器（c）：如 .btn、:hover、[type="text"]，特异性是 (0,0,1,0)。
元素选择器和伪元素（d）：如 div、h1、::before，特异性是 (0,0,0,1)。
如果特异性相同，则后写的规则覆盖前写的（就近原则）。
当然还有一个特殊情况是 !important，它会将样式强制提升为最高优先级，但它不是特异性的一部分，优先级体系之外，一般只在必要场景下使用（如第三方样式覆盖）。

颜色、字体、文本与列表属性

颜色属性

color：前景颜色，相对于背景颜色而言，用于设置文本颜色
- 颜色名称：如 red、blue、green
- rgb 值：如 rgb(255, 0, 0)
- 十六进制值：如 #ff0000
- rgba 值：如 rgba(255, 0, 0, 0.5)
- hsl 值：如 hsl(0, 100%, 50%)，hsl 表示色调、饱和度、亮度
- hsla 值：如 hsla(0, 100%, 50%, 0.5)
background-color：背景颜色，用于设置元素的背景颜色，默认值是transparent
opacity：透明度，用于设置元素的透明度，取值范围是 0~1，0 表示完全透明，1 表示完全不透明

字体属性

font-family：字体系列，用于设置元素的字体系列，如 font-family: Arial, sans-serif;
font-size：字体大小，用于设置元素的字体大小，如 font-size: 16px;
- 长度值：如 px、em、rem
- 绝对值：如 xx-small、x-small、small、medium、large、x-large、xx-large
- 相对值：如 smaller、larger
- 百分比值：如 100%
font-weight：字体粗细，用于设置元素的字体粗细，如 font-weight: bold;
- 数值：如 100、200、300、400、500、600、700、800、900
- 关键字：如 normal、bold、bolder、lighter
font-varient：字体变体，用于设置元素的字体变体，如 font-varient: small-caps;
- normal：正常字体
- small-caps：小型大写字体
line-height：行高，用于设置元素的行高，如 line-height: 1.5;
- 数值：如 1.5、2
- 百分比值：如 150%、200%
- 长度值：如 px、em
- normal：默认行高

类型单位含义/全称换算关系参考对象

绝对单位 px 像素（Pixel）屏幕逻辑像素屏幕

pt 点（Point） 1pt = 1/72 inch 印刷单位

pc 派卡（Pica） 1pc = 12pt = 1/6 inch 印刷单位

in 英寸（Inch） 1in = 96px = 2.54cm 实体长度

cm 厘米（Centimeter） 1cm ≈ 37.8px 实体长度

mm 毫米（Millimeter） 1mm = 1/10 cm 实体长度

相对单位 % 百分比相对于父元素的对应属性布局、宽高、边距等

em 相对于当前元素的字体大小所使用字体的大写英文字母M的宽度字体大小、内边距、margin 等

rem 根元素字体大小（root em）根元素 <html> 的 font-size 响应式字体/布局推荐用法

vw 视口宽度的百分比 1vw = 1% 视口宽度响应式横向布局，适配各种屏幕

vh 视口高度的百分比 1vh = 1% 视口高度响应式全屏布局

vmin 较小的视口边（vw或vh） min(vw, vh) 保证元素在所有设备上适配

vmax 较大的视口边（vw或vh） max(vw, vh) 用于控制最大比例布局

ch “0”字符的宽度当前字体中数字“0”的宽度表单输入宽度、等宽排版

ex “x”字符的高度当前字体中小写“x”的高度罕见用法，依赖字体

fr Fraction（分数单位） Grid 剩余空间的分配单位 Grid 布局下分配空间，响应式布局利器

类型	单位	含义/全称	换算关系	参考对象
绝对单位	`px`	像素（Pixel）	屏幕逻辑像素	屏幕
	`pt`	点（Point）	1pt = 1/72 inch	印刷单位
	`pc`	派卡（Pica）	1pc = 12pt = 1/6 inch	印刷单位
	`in`	英寸（Inch）	1in = 96px = 2.54cm	实体长度
	`cm`	厘米（Centimeter）	1cm ≈ 37.8px	实体长度
	`mm`	毫米（Millimeter）	1mm = 1/10 cm	实体长度
相对单位	`%`	百分比	相对于父元素的对应属性	布局、宽高、边距等
	`em`	相对于当前元素的字体大小	所使用字体的大写英文字母M的宽度	字体大小、内边距、margin 等
	`rem`	根元素字体大小（root em）	根元素 `<html>` 的 `font-size`	响应式字体/布局推荐用法
	`vw`	视口宽度的百分比	1vw = 1% 视口宽度	响应式横向布局，适配各种屏幕
	`vh`	视口高度的百分比	1vh = 1% 视口高度	响应式全屏布局
	`vmin`	较小的视口边（vw或vh）	`min(vw, vh)`	保证元素在所有设备上适配
	`vmax`	较大的视口边（vw或vh）	`max(vw, vh)`	用于控制最大比例布局
	`ch`	“0”字符的宽度	当前字体中数字“0”的宽度	表单输入宽度、等宽排版
	`ex`	“x”字符的高度	当前字体中小写“x”的高度	罕见用法，依赖字体
	`fr`	Fraction（分数单位）	Grid 剩余空间的分配单位	Grid 布局下分配空间，响应式布局利器

文本属性

text-align：文本对齐方式，用于设置元素内文本的对齐方式，如 text-align: center;
- left：左对齐
- right：右对齐
- center：居中对齐
- justify：两端对齐
text-indent：文本缩进，用于设置元素内文本的首行缩进，如 text-indent: 2em;
text-decoration：文本装饰，用于设置元素内文本的装饰效果，如 text-decoration: underline wavy red;
- none：无装饰
- underline：下划线
- overline：上划线
- line-through：删除线
- text-decoration-color：装饰线颜色
- text-decoration-style：装饰线样式, 如 dotted、dashed、solid、double、wavy
lettter-spacing：字母间距，用于设置元素内文本的字母间距，如 letter-spacing: 2px;
word-spacing：单词间距，用于设置元素内文本的单词间距，如 word-spacing: 2px;
text-transform：文本转换，用于设置元素内文本的大小写转换，如 text-transform: uppercase;
- none：无转换
- uppercase：大写
- lowercase：小写
- capitalize：首字母大写
white-space：空白处理，用于设置元素内文本的空白处理方式，如 white-space: nowrap;
- normal：默认处理方式
- nowrap：不换行
- pre：保留空白
- pre-line：保留换行
- pre-wrap：保留空白和换行
text-shadow：文本阴影，用于设置元素内文本的阴影效果，如 text-shadow: 2px 2px 2px #000;, 水平位移、垂直位移、模糊半径、阴影颜色

列表属性

list-style-type：列表标记类型，用于设置列表项的标记类型，如 list-style-type: disc;
- disc：实心圆
- circle：空心圆
- square：实心方块
- decimal：数字
- decimal-leading-zero：数字前补零
- lower-roman：小写罗马数字
- upper-roman：大写罗马数字
- lower-alpha：小写字母
- upper-alpha：大写字母
- none：无标记
list-style-image：列表标记图片，用于设置列表项的标记图片，如 list-style-image: url('list.png');
list-style-position：列表标记位置，用于设置列表项的标记位置，如 list-style-position: inside;
- inside：内部
- outside：外部

盒模型与布局属性

Box Model

content：内容区域，用于显示元素的内容，如 width、height，min-width、max-width、min-height、max-height 用于设置元素的最小宽度、最大宽度、最小高度、最大高度。overflow 用于设置元素内容溢出时的处理方式，如 overflow: hidden;、overflow: auto;、overflow: scroll;
padding：内边距区域，用于设置元素内边距，如 padding: 10px;
border：边框区域，用于设置元素边框，如 border: 1px solid #000;（solid、dotted、dashed、double、groove、ridge、inset、outset）
margin：外边距区域，用于设置元素外边距，如 margin: 10px;

边界重叠：当两个或多个垂直外边距相遇时，它们将合并为一个外边距，合并后的外边距为相遇外边距中的最大外边距，这种现象称为边界重叠。

定位方式

display

block: 区块层级，可以设置宽度高度留白与边界
inline: 行内层级，不可以设置宽度高度留白与边界
inline-block: 行内块层级，可以设置宽度高度留白与边界
none: 不占据空间

position

static: 默认定位，元素按照文档流排列
relative: 相对定位，元素相对于自身原始位置定位
absolute: 绝对定位，元素相对于最近的非static定位祖先元素定位
fixed: 固定定位，元素相对于视口定位
sticky: 粘性定位，元素相对于视口定位，直到滚动到指定位置

top、right、bottom、left：用于设置元素的定位偏移量，如 top: 10px;，只有在设置了定位属性后才能使用。

z-index：用于设置元素的堆叠顺序，数值越大越靠前，如 z-index: 1;，只有在设置了定位属性后才能使用。

float：用于设置元素的浮动方式，如 float: left;，取值有 left、right、none，clear 用于设置元素的浮动清除方式，如 clear: both;

visibility：用于设置元素的可见性，如 visibility: hidden;，取值有 visible、hidden

box-shadow：用于设置元素的阴影效果，如 box-shadow: 2px 2px 2px #000;，水平位移、垂直位移、模糊半径、阴影颜色

vertical-align：用于设置元素的垂直对齐方式，如 vertical-align: middle;，取值有 baseline、top、middle、bottom、text-top、text-bottom

什么是 float
float 原本的设计初衷是让元素浮动在文字周围，最初用于实现图文混排（如图像左浮动，文字右环绕），当我们给元素设置 float: left 或 float: right 后，它就会：

脱离标准文档流（不会再占据原本位置）；

在容器中向左或右浮动，后续的非浮动元素会围绕它排列；

仍然保留在 DOM 结构中，但对兄弟元素的布局产生影响；

它的父元素若没有特殊处理，将不再被它撑开高度，这就是所谓“高度塌陷”问题。

什么是 clear
clear 是专门用来控制元素是否可以出现在浮动元素旁边的属性，它的作用是“清除前面浮动元素对我的影响”，可选值包括：

clear: left：不允许出现在左侧有浮动的元素旁；

clear: right：不允许出现在右侧有浮动的元素旁；

clear: both：两边都不允许，必须换行到浮动元素的下方；

clear: none：默认值，不清除任何浮动影响。

二者关系和实际用途
float 用于创建浮动布局，比如实现横向排列、图文环绕；

clear 用于清除浮动影响，保证某些元素不会被环绕，或者用于“清除浮动”本身；
清除浮动的典型场景是父元素被浮动子元素高度塌陷，这时我们会在父元素内部末尾添加一个设置了 clear: both 的元素（推荐用伪元素），如：
1
2
3
4
5
.parent::after {
  content: "";
  display: block;
  clear: both;
}

修改 display 会触发重排（reflow）和重绘（repaint），因为它会影响元素是否参与布局（布局树会发生变化）；
修改 visibility 只会触发重绘（repaint），不会触发重排，因为它不会影响布局，仅仅是改变了元素是否可见。

背景、渐层与表格

背景属性

background-image：背景图片，用于设置元素的背景图片，如 background-image: url('bg.png');
background-repeat：背景重复，用于设置元素的背景图片重复方式，如 background-repeat: no-repeat;
- repeat：默认值，横向纵向都重复
- repeat-x：横向重复
- repeat-y：纵向重复
- no-repeat：不重复
- space：平铺，间距相等，调整间距让图片铺满
- round：平铺，间距不等，调整大小让图片铺满
background-position：背景位置，用于设置元素的背景图片位置，如 background-position: center center;
- top、bottom、left、right、center
- 百分比值：如 50% 50%
- 长度值：如 10px 20px ，第一个值是水平位置，第二个值是垂直位置
background-attachment：背景附着，用于设置元素的背景图片是否随元素滚动，如 background-attachment: fixed;
- scroll：默认值，背景图片随元素滚动
- fixed：背景图片固定在视口
- local：背景图片随元素滚动
background-clip：背景显示区域，如 background-clip: padding-box;
- border-box：默认值，描绘到边框盒
- padding-box：描绘到内边距盒
- content-box：描绘到内容盒
background-origin：背景原点，用于设置元素的背景图片定位原点，如 background-origin: padding-box;
- border-box：默认值，背景图片定位原点在边框盒
- padding-box：背景图片定位原点在内边距盒
- content-box：背景图片定位原点在内容盒
background-size：背景尺寸，用于设置元素的背景图片尺寸，如 background-size: cover;
- auto：默认值，保持原始尺寸
- cover：图片等比例缩放，覆盖整个容器
- contain：图片等比例缩放，适应容器
- 百分比值：如 50% 50%，第一个值是宽度，第二个值是高度
- 长度值：如 100px 200px，第一个值是宽度，第二个值是高度

渐变属性

linear-gradient：线性渐变，用于设置元素的背景线性渐变效果，如 linear-gradient(to right, red, blue);
- to top、to right、to bottom、to left、to top right、to top left、to bottom right、to bottom left
- angle：如 45deg、90deg
radial-gradient：放射状渐变，用于设置元素的背景放射状渐变效果，如 radial-gradient(circle, red, blue);
- circle、ellipse是渐变形状
- closest-side、closest-corner、farthest-side、farthest-corner是渐变大小
- at：如 at 50% 50%，渐变中心点
repeating-linear-gradient：重复线性渐变，用于设置元素的背景重复线性渐变效果，如 repeating-linear-gradient(to right, red, blue);
repeating-radial-gradient：重复放射状渐变，用于设置元素的背景重复放射状渐变效果，如 repeating-radial-gradient(circle, red, blue);

表格属性

caption-side：表格标题位置，用于设置表格标题的位置，如 caption-side: bottom;
- top：顶部
- bottom：底部
border-collapse：边框合并，用于设置表格边框合并方式，如 border-collapse: collapse;
- separate：默认值，边框分开
- collapse：边框合并
table-layout：表格布局，用于设置表格布局方式，如 table-layout: fixed;
- auto：默认值，根据内容自动调整
- fixed：固定布局，根据表格宽度和列宽度确定单元格宽度
empty-cells：空单元格，用于设置表格空单元格显示方式，如 empty-cells: hide;
- show：默认值，显示空单元格
- hide：隐藏空单元格
border-spacing：边框间距，用于设置表格边框间距，如 border-spacing: 10px;

变形、转场

变形处理

transform：变形效果，用于设置元素的变形效果，如 transform: rotate(45deg);
- rotate(angle)：旋转，顺时针旋转angle角度
- scale(x, y)：缩放，横向缩放x倍，纵向缩放y倍
- translate(x, y)：平移，横向平移x距离，纵向平移y距离
- skew(x-angle, y-angle)：倾斜，横向倾斜x-angle角度，纵向倾斜y-angle角度
- matrix(a, b, c, d, e, f)：矩阵变形
transform-origin：变形原点，用于设置元素的变形原点，如 transform-origin: 50% 50%;
- 百分比值：如 50% 50%
- 长度值：如 100px 200px，第一个值是水平位置，第二个值是垂直位置

转场效果

transition：转场效果，用于设置元素的转场效果，如 transition: width 1s;
- transition-property：转场属性，如 transition-property: width;
  - all：所有属性
  - none：无属性
- transition-duration：转场时长，如 transition-duration: 1s;
- transition-timing-function：转场速度曲线，如 transition-timing-function: ease;
  - ease：默认值，慢速开始，然后变快，然后慢速结束
  - linear：匀速
  - ease-in：慢速开始
  - ease-out：慢速结束
  - ease-in-out：慢速开始和结束
- transition-delay：转场延迟时间，如 transition-delay: 0.5s;

CSS杂记

链接HTML文件与CSS样式表

选择器类型

选择器优先级

颜色、字体、文本与列表属性

颜色属性

字体属性

文本属性

列表属性

盒模型与布局属性

Box Model

定位方式

display

position

什么是 `float`

什么是 `clear`

二者关系和实际用途

背景、渐层与表格

背景属性

渐变属性

表格属性

变形、转场

变形处理

转场效果

链接HTML文件与CSS样式表

选择器类型

选择器优先级

颜色、字体、文本与列表属性

颜色属性

字体属性

文本属性

列表属性

盒模型与布局属性

Box Model

定位方式

display

position

什么是 float

什么是 clear

二者关系和实际用途

背景、渐层与表格

背景属性

渐变属性

表格属性

变形、转场

变形处理

转场效果

什么是 `float`

什么是 `clear`