看透 前端技术 的底层原理
通过可视化动画、图层分解和交互实验，理解HTML标签、CSS、JS等核心技术背后的真实机制。
学习模块
每个模块包含演示、探索、挑战三种交互模式
盒子模型
content / padding / border / margin 四层结构，以及 box-sizing 的作用
→
CSS3 扩展
圆角、阴影、透明度、以及九宫格图片边框的动画演示
→
Display 元素类型
block、inline、inline-block 的核心区别与互相转换原理
→
Flexbox 弹性盒子
主轴、交叉轴与剩余空间按比例分配动画，及常见布局案例库
→
列表
无序、有序、定义列表，以及列表样式属性
→
超链接与伪类
L-V-H-A 原理、锚点、焦点控制与无障碍设计
→
表格 Table
表格合并（colspan/rowspan）、旧属性讲解与 CSS 现代化美化
→
表单 Form
form 容器、input 控件全家桶，以及利用 :checked 伪类实现的高级纯 CSS 美化
→
浮动 Float
用 3D 图层模型理解浮动元素如何脱离文档流、共享浮动图层
→
定位 Position
static / relative / absolute / fixed / sticky 五种定位方式
即将推出
Grid
网格布局的行列定义与区域划分
规划中
为什么用这个平台
分步动画
把抽象的 CSS 规则拆解成一步步的动画，每一步都有文字说明
图层分解
用 3D 视角展示元素如何从文档流"升起"到独立图层
自由探索
拖动滑块、切换开关，实时观察属性变化对布局的影响
概念挑战
针对常见迷思概念设计的选择题，先预测再验证