UD5工具箱
CLS 手动计算器 - 模拟布局偏移分数
输入移动距离和视口尺寸，手动模拟单个布局偏移的分数计算方式，加深对 CLS 的理解。
标签： 布局工具 - 网页结构快速搭建
共 16+ 款工具页脚粘底生成器 - 始终在页面底部
生成确保页脚始终在页面底部（即使内容不足）的CSS代码，支持Flexbox/Grid方案。
花园布局设计器 - 拖拽植物规划种植区域
在网格上拖拽不同植物图标，设计菜园或花坛的种植布局，考虑间距与轮作。
CSS Subgrid 布局构建器 - 对齐嵌套网格轨道
拖拽设计包含 Subgrid 的嵌套网格，直观展示子网格如何继承父网格轨道并进行独立调整，生成代码。
流式间距生成器 - 基于视口的动态padding/margin
类似字体工具，针对内外边距产生随视口平滑缩放的CSS值，完善流式布局体系。
围墙花园生成器 - 植物规划布局
在网格上拖拽放置树木、花坛、路径等元素，设计梦想花园布局图。
房间2D家具布局 - 拖拽俯视图看摆放
设定房间尺寸，拖拽床、桌等平面图标到画布，简易规划空间。
布局网格覆盖层 - 可拖调栅格参考线
在任意网页上投射可拖拽调整的栅格覆盖线，用来测量和对齐设计稿。
Flexbox布局生成器 - 在线弹性盒可视化生成
在线Flexbox布局可视化生成器，直观调整主轴、交叉轴对齐、换行等属性，实时显示效果并输出CSS。
布局蓝图生成器 - 线框容器配置
选择页眉、侧边栏、主体、页脚的网格布局，生成基本的布局骨架代码。
简易盆景设计器 - 拖拽树木石头布局
在虚拟盆中拖拽树木、石头、苔藓等元素，设计自己理想的盆景样式。
CSS Grid布局生成器 - 在线栅格代码生成
可视化CSS Grid布局生成工具，拖拽划分行列、设置间距和对齐方式，自动生成Grid容器及子项CSS代码。
Flexbox 高级演练场 - 所有属性可视化控制
通过滑块和开关调整 Flex 容器和子项的所有 CSS 属性，实时观察布局变化，理解弹性盒子。
房间布局规划器 - 家具摆放拖拽
设定房间尺寸，拖拽各种家具图标布置房间，辅助搬家或重新装修。
黄金比例布局尺寸计算 - 1.618展布
输入总宽度，自动生成符合黄金比例的侧边栏和主内容区尺寸。
键盘布局检测器 - 识别物理按键映射
通过按下键位记录code和key值，推断当前键盘布局（如QWERTY、AZERTY）。