CSS进阶2
约 710 字大约 2 分钟
2026-03-15
手写笔记
.jpg)
一、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
- 实现文本两端对齐效果
六、核心总结
- SVG:矢量图,代码书写,缩放不失真
- 数据链接:
data URL+ Base64,将资源嵌入代码,减少请求 - 兼容性:通过前缀、Hack、渐进增强/优雅降级解决浏览器差异
- 居中:分场景实现水平/垂直居中,是布局高频考点
- 细节:图片失效时行盒特性、
list-item清除列表样式等
