前端零基础精讲：Canvas3D、CSS3D、文档流、定位全方位复盘

1. <canvas>是HTML5全新新增画布标签，标签本身只是一块空白画布，没有任何原生绘制能力，所有2D图形、3D立体效果，全部依靠JS API手动绘制实现。

• 使用逻辑：获取画布上下文 → JS计算坐标、顶点、光照 → 逐帧渲染画面
• 适用场景：大型网页游戏、3D模型展示、粒子特效、大数据可视化等复杂三维场景
• 优缺点：自由度拉满，性能上限高；但是原生API极其底层，需要手动处理矩阵、透视，学习成本极高

2. CSS 3D（样式实现3D效果）

无需编写JS绘图代码，纯CSS属性即可触发浏览器3D渲染，底层自动走GPU硬件加速，这也是日常开发最常用的轻量化3D方案。

核心关键点：

1. 开启3D空间后，浏览器会独立分层渲染，动画流畅度远超普通2D动画
2. 开发小技巧：哪怕是普通2D动画，也可以手动开启3D空间，强制GPU加速，解决页面动画卡顿、掉帧问题
3. 常用场景：3D立方体、卡片翻转、3D轮播图、立体UI组件

CSS3D通用双层布局规范

所有CSS3D案例，统一遵循双层布局结构，规范写代码不会出错：

• 外层父盒子：负责整体布局、页面居中、设置透视perspective、控制全局视角
• 内层子盒子：负责具体的3D变换（旋转、位移、缩放）

---

二、视口单位vh/vw与页面水平垂直居中

1. CSS3视口相对单位（移动端必备）

以往我们写全屏页面需要JS获取屏幕宽高，CSS3新增vh、vw两个视口单位，原生适配所有设备屏幕：

• vw（viewport-width） ：视口宽度单位，1vw = 屏幕可视宽度的1%
• vh（viewport-height） ：视口高度单位，1vh = 屏幕可视高度的1%

全屏页面基础重置代码（直接复制使用）：

body {
  margin: 0;
  /* 铺满全屏宽高 */
  width: 100vw;
  height: 100vh;
}

2. 3D场景下元素水平垂直居中

结合3D布局，推荐两种零兼容问题的居中方案：

方案1：Flex居中（首选，代码简洁）

.father {
  width: 100vw;
  height: 100vh;
  /* 开启3D透视 */
  perspective: 1000px;
  /* 一行代码实现水平垂直居中 */
  display: flex;
  justify-content: center;
  align-items: center;
}
.son {
  transform-style: preserve-3d; /* 开启子元素3D空间 */
}

方案2：绝对定位居中（传统通用方案）

.father {
  position: relative;
  width: 100vw;
  height: 100vh;
  perspective: 1000px;
}
.son {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  transform-style: preserve-3d;
}

---

三、HTML元素分类：行内元素&块级元素详解

HTML所有标签默认分为两大类，不同类型盒子布局规则完全不同，也是面试基础必考题。

1. 块级元素 block

常见标签：div、ul、li、p、h1-h6

• 独占一行，自动换行，不和其他元素同行显示
• 支持设置宽、高、margin、padding
• 默认宽度自动铺满父容器

2. 行内元素 inline

常见标签：span、a、i、em

• 同行排列，不会独占一行
• 无法设置宽高，尺寸由内部内容撑开
• 上下margin、padding无效，仅左右间距生效

3. 行内块元素 inline-block（开发最常用）

兼顾行内和块级元素全部优点：既能同行排列，又可以自由设置宽高。

inline-block致命坑点（必避坑）

代码中标签之间的换行符、空格（\n、\r），会被浏览器识别为空白字符，自动产生间隙，导致页面出现莫名间距。

两种解决方案：

1. 父容器设置 font-size:0，子元素重置字体大小
2. HTML标签紧贴书写，不换行、不加空格

4. display常见取值与格式化上下文

通过display可以改变元素默认类型，同时创建不同的布局格式化上下文：

• display: block：转为块级元素
• display: inline：转为行内元素
• display: inline-block：转为行内块元素
• display: flex：创建弹性格式化上下文，一维布局神器
• display: grid：创建网格格式化上下文，二维布局神器

---

四、定位position核心精讲：relative与absolute

定位是脱离标准文档流实现特殊布局的核心，3D组件、弹窗、悬浮按钮全部依赖定位，重点掌握相对定位和绝对定位。

1. position: relative 相对定位

• 不脱离文档流：元素原本占有的位置会保留，不会被其他元素挤占
• 定位参考：以元素自身原本的位置作为基准进行偏移
• 常用场景：给子绝对定位元素做父级参照物、微调元素位置、调整层级z-index

.box {
  position: relative;
  top: 10px; /* 相对于自身原始位置，向下偏移10px */
  left: 20px; /* 相对于自身原始位置，向右偏移20px */
}

2. position: absolute 绝对定位

• 完全脱离文档流：原有位置彻底释放，后续元素会直接挤占空位
• 定位参考：向上查找最近一层非static定位的父元素；若无，则相对于html根标签定位
• 高频搭配：配合transform实现无误差居中，广泛用于3D立体面、弹窗、悬浮图标

补充：其余定位方式快速了解

• fixed固定定位：相对于浏览器视口定位，页面滚动位置不变（回到顶部按钮、固定导航栏）
• sticky粘性定位：滚动临界值前跟随文档流，达到阈值后固定，保留文档流占位
• static默认定位：所有元素默认值，无定位偏移，无法作为绝对定位父容器

---

五、全文知识点总结

1. 简单3DUI用CSS3D，自动GPU加速；复杂3D场景、游戏用Canvas+WebGL
2. vh/vw适配移动端全屏页面，无需JS计算屏幕尺寸
3. 行内块空白间隙是原生坑点，开发务必提前规避
4. relative留位做父级，absolute脱流做布局，二者搭配是前端布局核心组合

以上就是本次前端基础全部复盘内容，从底层文档流到3D布局，夯实基础才能轻松应对复杂页面开发～