css知识串烧
CSS 核心知识笔记（精简·深入版）
一、选择器
| 类型 | 示例 | 说明 |
|---|---|---|
| 元素选择器 | div | 选中所有 <div> |
| 类选择器 | .class | 选中 class="class" 的元素 |
| ID 选择器 | #id | 选中 id="id" 的元素（唯一） |
| 伪类选择器 | a:hover | 元素特定状态 |
| 伪元素选择器 | p::before | 元素的虚拟子元素 |
组合使用：嵌套选择器会增加特殊性（权重），越具体的选择器优先级越高。
二、样式权重计算（层叠规则）
当多个规则作用于同一元素时，按以下顺序决定最终样式：
1. 重要性（Importance）
!important > 作者样式表（普通） > 浏览器默认样式
2. 特殊性（Specificity）
计算一个 四位数（进位 256 进制），比较时按千→百→十→个位逐位比较：
| 位 | 来源 | 示例 |
|---|---|---|
| 千位 | 内联样式（style="..."） | 1 或 0 |
| 百位 | ID 选择器的数量 | #id |
| 十位 | 类、属性、伪类选择器数量 | .class、[type="text"]、:hover |
| 个位 | 元素、伪元素选择器数量 | div、::before |
✅ 记忆口诀：内联 > ID > 类/属性/伪类 > 元素/伪元素
3. 源次序
后面声明的规则覆盖前面（代码位置越靠后越优先）。
三、样式最终确定流程
- 声明值 – 无冲突的样式直接应用。
- 层叠冲突 – 有冲突的样式通过权重计算解决。
- 继承 – 未声明的可继承属性（如
color、font-size）从父元素继承。 - 默认值 – 既未声明也无法继承的属性使用浏览器默认值。
四、盒模型（Box Model）
每个元素生成一个矩形区域，由内到外：
内容区（content） + 内边距（padding） + 边框（border） + 外边距（margin）
盒子类型（display）
| 类型 | 特点 |
|---|---|
| 行盒（inline） | 不换行，宽高无效，水平 padding/border/margin 有效，垂直方向不影响周围布局 |
| 块盒（block） | 独占一行，宽高有效 |
| 行块盒（inline-block） | 同行排列，宽高有效，所有 padding/border/margin 有效 |
| 弹性盒（flex） | 一维布局，子项可自动伸缩，对齐强大 |
| 网格盒（grid） | 二维布局，同时控制行与列 |
五、视觉格式化模型（核心布局机制）
浏览器将元素渲染为矩形盒子，并遵循以下布局规则：
1. 常规流（Normal Flow）
- 块盒：宽度默认撑满父容器（
width: auto）。 - 外边距合并（margin collapsing）：相邻块盒的上下外边距取较大值，而非相加。
2. 浮动（Float）
float: left/right使元素变成块盒，脱离常规流，但仍影响周围行盒。- 特点：
- 宽度
auto→ 由内容撑开 margin: auto→ 相当于 0- 浮动盒子会向上/向左排列，避开常规流块盒，但行盒会环绕浮动元素（文字环绕原理）。
- 宽度
- 高度坍塌：父元素忽略浮动子元素高度。
- ✅ 解决方案：清除浮动（
clear: both）或触发 BFC。
- ✅ 解决方案：清除浮动（
3. 定位（Position）
| 定位方式 | 是否脱离文档流 | 参考系 |
|---|---|---|
relative | 否（偏移不影响其他元素） | 自身原位置 |
absolute | 是 | 最近的非 static 祖先 |
fixed | 是 | 视口（viewport） |
sticky | 混合 | 滚动容器 |
⚠️ 绝对定位元素不会发生外边距合并。
六、块级格式化上下文（BFC）
是什么？
一块独立渲染区域，内部布局不影响外部。
如何创建 BFC？
- 根元素
<html> - 浮动元素（
float非none） - 绝对定位元素（
position: absolute/fixed） overflow: auto/scroll/hidden（非visible）
BFC 规则
- 内部浮动会被父元素计算高度（清除坍塌）。
- 边框盒不与浮动元素重叠。
- 内部元素不与外部元素发生外边距合并（同一 BFC 内仍会合并）。
七、body 背景与画布规则
- HTML 有背景 → 背景覆盖视口，body 背景正常（覆盖其边框盒）。
- HTML 无背景 → body 背景覆盖整个画布（视口）。
- 画布背景的百分比参照：
- 宽度百分比 → 相对于视口宽度
- 高度百分比 → 相对于网页高度
八、图片底部白边问题
原因
图片作为行盒（或行内元素），默认与父元素的**基线（baseline）**对齐，基线下方留出空间（为 descender 预留）。
解决方案
- 父元素
font-size: 0（消除基线空间）。 - 图片设为块盒：
display: block。
九、字体与行内格式化细节（深入）
1. 字体度量（Metrics）
字体设计师定义了几条参考线：
- 顶线（top）、上基线（upper baseline）、基线（baseline）、下基线（lower baseline）、底线（bottom）
- content-area = 顶线到底线的高度（文字实际占位）。
font-size设置的是相对大小（金属框与字符的比例），并非 content-area 的精确值。
2. 行高（line-height）与 virtual-area
line-height定义的是 virtual-area（顶线上方 + content-area + 底线下方）。- virtual-area 高度 =
line-height，多余部分（gap）均匀分布在上下。 - 背景 默认覆盖 content-area（不是 virtual-area）。
3. vertical-align 对齐原理
| 值 | 对齐方式 |
|---|---|
baseline（默认） | 元素基线对齐父元素基线 |
middle | 元素中线（content-area 一半）对齐父元素 x-height 一半 |
top / bottom | 元素 virtual-area 顶/底对齐 line-box 顶/底 |
text-top / text-bottom | 元素 virtual-area 顶/底对齐父元素 text-top / text-bottom |
| 数值/百分比 | 相对于基线偏移（百分比相对于自身 line-height） |
4. line-box（行框）
- 一行内所有行盒（inline box）的最高顶边 → 最低底边构成 line-box。
- 不生成 line-box 的条件：元素内无任何行盒 或
font-size: 0。
5. 可替换元素 & 行块盒的基线
- 图片：基线位于图片的下外边距边缘。
- 行块盒（inline-block）：
- 内部有 line-box → 使用最后一行的基线。
- 内部无 line-box → 使用下外边距边缘。
十、堆叠上下文（Stacking Context）
创建条件
- 根元素
<html> z-index不为auto的定位元素（position: relative/absolute/fixed）
层叠顺序（升序）
- 创建堆叠上下文的元素背景/边框
- 负 z-index 的子堆叠上下文
- 常规流非定位块盒
- 非定位浮动盒子
- 常规流非定位行盒
z-index: auto或0的定位子元素- 正 z-index 的堆叠上下文
十一、数据连接（Data URI）
- 语法：
data:[<MIME-type>][;base64],<数据> - 优点：减少 HTTP 请求，适合小图片动态生成。
- 缺点：体积增大（base64 膨胀约 33%），无法单独缓存。
十二、浏览器兼容性策略
| 策略 | 方向 | 写法建议 |
|---|---|---|
| 渐进增强（Progressive Enhancement） | 先兼容老浏览器，再添加新特性 | 先写基础样式，后用 @supports 或特性检测增强 |
| 优雅降级（Graceful Degradation） | 先完成现代浏览器功能，再修补低版本 | 直接使用新特性，然后针对低版本打补丁 |
十三、边框（Border）高级属性
1. border-radius（圆角）
- 可设置 1~4 个值（对应 4 个角）。
- 每个角可独立设置水平/垂直半径：
border-top-left-radius: 20px 10px。 - 等比缩放：当半径超过元素尺寸时，按比例缩小。
2. border-image
border-image-source：图片路径border-image-slice：切割九宫格（上、右、下、左）border-image-repeat：stretch/repeat/round
3. box-shadow
语法：
box-shadow: [inset] offset-x offset-y [blur] [spread] color;
可设置多重阴影，用逗号分隔。
十四、背景（Background）高级属性
| 属性 | 说明 |
|---|---|
background-image | 可多张，叠加显示 |
background-repeat | round（缩放完整填充），space（留空隙填充） |
background-position | 百分比 =（容器尺寸 - 背景图尺寸）× 百分比 |
background-origin | 定位参考点：border-box / padding-box / content-box |
background-size | 宽高（cover / contain） |
background-clip | 裁剪区域，text 值可实现文字镂空背景图（需文字颜色透明） |
background-attachment | fixed 背景固定于视口，产生滚动视差 |
十五、CSS 2D / 3D 变换
2D 变换（transform）
translate()/rotate()/scale()/skew()- 注意：变换后的元素坐标系也会随之改变（旋转后 X/Y 轴方向改变）。
- 镜像：
scaleX(-1)沿 Y 轴镜像，scaleY(-1)沿 X 轴镜像。
3D 变换
perspective：景深（眼睛到屏幕的距离），决定 3D 变形的大小比例。- 原理：物体沿 Z 轴移动时，投影到屏幕上的大小会变化（近大远小）。
十六、过渡与关键帧动画
过渡（transition）
transition: property duration timing-function delay;
关键帧动画（animation）
@keyframes name {
0% { ... }
100% { ... }
}
.element {
animation: name 2s infinite alternate;
}
📌 典型应用：音波动画、唱片旋转、点赞效果等。
十七、Flex 布局（核心速查）
| 属性 | 作用 |
|---|---|
display: flex | 块级弹性容器；inline-flex → 行内块级弹性容器 |
flex-direction | 主轴方向 |
flex-wrap | 换行 |
justify-content | 主轴对齐 |
align-items | 交叉轴单行对齐 |
align-content | 交叉轴多行对齐 |
align-self | 单个项目交叉轴对齐 |
order | 排序（数值越小越靠前） |
flex-basis | 基础尺寸（会被内容撑开） |
flex-grow | 放大比例 |
flex-shrink | 缩小比例 |
flex | 简写：flex: grow shrink basis（默认 0 1 auto） |
十八、Grid 布局（核心速查）
容器属性
display: grid | inline-grid;
grid-template-columns: 100px 1fr 2fr; /* fr 等分剩余空间 */
grid-template-rows: auto 200px;
gap: 10px; /* 行/列间距 */
重复与自适应：
repeat(3, 100px)或repeat(auto-fit, 100px)minmax(100px, 1fr)最小最大范围
区域命名：
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
子项属性
grid-column: 1 / 3; /* 从第1条列线到第3条 */
grid-row: 2 / span 2; /* 从第2行开始占2行 */
grid-area: header; /* 使用命名区域 */
对齐（单元格内）
justify-items/align-items（容器）justify-self/align-self（子项）justify-content/align-content（整体网格在容器内对齐）
自动填充 dense：grid-auto-flow: row dense 允许后续元素填充空缺。
十九、mask（遮罩）
工作原理：遮罩图像亮色区域显示原图，暗色或透明区域隐藏原图（类似“饺子皮模具”）。
常用配合：
mask-image: radial-gradient(circle at var(--x) var(--y), #fff 70px, transparent 100px);
mask-repeat: no-repeat;
示例：鼠标跟随圆形聚光灯效果（见原笔记代码）。
二十、clip-path（裁剪）
按路径或形状裁剪元素，只显示裁剪区域内的内容。
基本形状
/* 圆形 */
clip-path: circle(50% at 50% 50%);
/* 椭圆 */
clip-path: ellipse(40% 30% at 50% 50%);
/* 多边形（三角形） */
clip-path: polygon(50% 0, 0 100%, 100% 100%);
/* 矩形（inset） */
clip-path: inset(20px 30px 40px 10px round 10px);
SVG 路径：clip-path: url(#myClipPath)
动态裁剪动画可实现边框扫描特效（见原笔记示例）。
css知识串烧
http://localhost:8090/archives/csszhi-shi-chuan-shao