手写笔记

---

一、SVG 扩展

1.1 概念

可缩放的矢量图，由代码书写而成。

1.2 特点

• 该图片只用代码书写而成
• 缩放不会失真（矢量特性，区别于位图）
• 内容轻量（文件体积小）

---

二、数据链接扩展

2.1 概念

data URL：将目标文件的数据直接书写到路径位置，无需额外请求外部文件。

2.2 语法

data: MIME类型, 数据

2.3 Base64 编码

• 一种编码方式，通常用于将二进制数据用一个字符串的字符串表示
• 作用：把图片/字体等二进制资源转成文本，直接嵌入 HTML/CSS，减少网络请求

---

三、浏览器兼容性

3.1 问题产生原因

不同浏览器对 CSS/HTML 新特性的支持程度不同，导致样式表现不一致。

3.2 解决方案

• 厂商前缀：如 -webkit-、-moz-、-ms-，用于兼容实验性 CSS 属性
• CSS Hack（补丁）：针对特定浏览器编写特殊样式，修复兼容性问题
• 渐进增强 & 优雅降级：
  • 渐进增强：先保证基础功能，再逐步为高级浏览器添加增强效果
  • 优雅降级：先构建完整功能，再为低版本浏览器逐步降级保证可用

---

四、居中总结（盒子在其包含块中居中）

4.1 水平居中

场景	实现方法
行盒/行块盒	给父元素设置 text-align: center
常规流块盒	定宽 + margin: 0 auto
绝对定位元素	定宽 + left: 0; right: 0; margin: 0 auto

4.2 垂直居中

场景	实现方法
单行文本	文本所在元素的行高 = 区域高度
行块盒/块盒内多行文本	给盒子设置上下内边距相同（近似方案）
绝对定位元素	定高 + top: 0; bottom: 0; margin: auto 0

---

五、样式补充

5.1 样式补充

• display: list-item：清除盒子默认列表样式（配合 list-style: none 使用）

5.2 图片失效时的宽高问题

• 若 img 元素的 src 失效，img 元素特性和普通行盒一样，无法设置宽高
• 行盒中包含行块盒或可替换元素时，行盒的高度与它内部的行块盒或可替换元素的高度无关

5.3 text-align: justify

• 实现文本两端对齐效果

---

六、核心总结

1. SVG：矢量图，代码书写，缩放不失真
2. 数据链接：data URL + Base64，将资源嵌入代码，减少请求
3. 兼容性：通过前缀、Hack、渐进增强/优雅降级解决浏览器差异
4. 居中：分场景实现水平/垂直居中，是布局高频考点
5. 细节：图片失效时行盒特性、list-item 清除列表样式等