UD5工具箱
CSS Grid 调试覆盖层 - 显示网格线与区域
在页面上叠加可拖拽的半透明网格线，辅助网格布局对齐。
快捷预设
contain: none
子元素自由影响容器尺寸和布局，无任何限制
场景1: --
场景2: --
场景3: --
场景一：Size 尺寸限制
容器未设置明确高度，由内容撑开。观察切换 contain 值后容器尺寸变化。
子元素 Alpha
子元素 Beta
内容高度: 自动
场景二：Paint 绘制裁剪
容器有固定尺寸，子元素使用绝对定位超出边界。观察裁剪效果。
溢出元素
容器内部区域
溢出: 可见
场景三：Layout 布局隔离
容器内有一个浮动元素。观察 layout containment 是否创建 BFC 包含浮动。
浮动块
这是一段文本内容，它围绕浮动元素排列。浮动元素比文本行高。
BFC: 未创建
contain: size
忽略子元素计算尺寸需明确宽高否则塌陷
contain: paint
裁剪溢出内容独立于 overflow 属性
contain: layout
创建 BFC 隔离布局阻止外边距塌陷
contain: strict
layout+paint+size最严格的三重限制
常见问题与知识点
什么是 CSS Contain 属性？
CSS Contain（CSS 容器限制）允许开发者明确告诉浏览器，某个元素的内部布局、样式、尺寸或绘制与页面的其余部分是独立的。 这使浏览器能够进行渲染优化，提升页面性能，尤其在有大量 DOM 元素或复杂布局时效果显著。
contain: size 为什么会导致元素塌陷？
应用 contain: size 后，元素在计算自身尺寸时会完全忽略子元素，就像子元素不存在一样。
如果元素没有明确的宽高（如 width/height 或 aspect-ratio），其内容尺寸被视为 0，导致塌陷。
解决方法：给容器设置明确的尺寸，或使用 contain: inline-size 仅限制内联轴。
contain: paint 和 overflow: hidden 有什么区别？
两者都会裁剪溢出内容，但机制不同：overflow: hidden 是视觉裁剪，浏览器仍可能计算溢出区域的布局；
contain: paint 则在渲染层面完全跳过容器外内容的绘制，性能更优。
此外，paint containment 还会创建新的层叠上下文和包含块。
contain: layout 创建 BFC 有什么好处？
Layout containment 强制创建块级格式化上下文（BFC），使容器内部布局与外部完全隔离。 浮动元素会被包含、外边距不会塌陷到外部、内部布局变化不会触发外部元素的回流。 这对于独立组件（如卡片、弹窗）非常有用。
strict 和 content 有什么区别？
contain: strict = layout + paint + size（三重限制，最严格）
contain: content = layout + paint（不含 size，尺寸仍由子元素决定）
关键区别：strict 包含 size containment，需要明确设置容器尺寸；content 则保留自然的尺寸计算。
contain: inline-size 有什么特殊之处？
contain: inline-size 仅限制内联轴（水平书写模式下的宽度），块轴（高度）仍然由子元素决定。
这比 contain: size 更灵活，适合需要固定宽度但允许内容撑开高度的场景（如响应式卡片网格）。
contain: style 还存在吗？
contain: style 在 CSS Containment Module Level 1 中存在，用于隔离计数器样式和引号。
但在 Level 2 规范中已被移除（2022年），主流浏览器也已停止支持。不建议在生产代码中使用。
什么时候应该使用 CSS Contain？
适用于独立组件：卡片列表、弹窗模态框、轮播图、评论区、侧边栏小部件等。
这些组件的内容变化不应影响页面其余部分。使用 contain: content 是安全起点，
需要尺寸优化时升级到 contain: strict（记得设置明确尺寸）。可配合 content-visibility: auto 使用获得更强性能提升。
浏览器兼容性如何？
CSS Contain 在现代浏览器中广泛支持：Chrome 52+、Firefox 69+、Safari 15.4+、Edge 79+。
contain: inline-size 在 Chrome 105+、Firefox 101+、Safari 15.4+ 中可用。
移动端 iOS Safari 15.4+、Android Chrome 均支持。对于老旧浏览器，contain 属性会被忽略，不会造成功能问题（渐进增强）。
CSS 系统颜色演示 - Canvas/Window/Highlight 等
展示 CSS 系统颜色关键字（如 CanvasText, LinkText）在明暗模式下的实际渲染值。
CSS属性兼容性表格 - 按使用率排序
搜索CSS属性和选择器，展示在主流浏览器的支持版本和全局使用率百分比。
CSS Grid可视化调试器 - 叠加网格线
为页面上使用CSS Grid的元素显示网格线和名称，辅助布局开发和调试。
CSS混合模式实演 - background-blend-mode
选择多张图片或纯色叠加，切换所有CSS混合模式并实时预览图层效果。
CSS缓动函数试玩场 - 所有预设一览
并列播放所有CSS内置缓动函数（ease, linear等）的动画效果，方便对比选择。
CSS 光标样式预览工具 - 所有内置光标效果展示
列出所有标准 CSS 光标值（pointer, grab, zoom-in 等），鼠标悬停实时查看对应光标样式并复制代码。
视差背景生成器 - 纯 CSS 多层效果
上传图片并设置层位置和滚动速度，生成纯 CSS 的多层视差滚动背景代码。
CSS 作用域演示 - Shadow DOM 样式隔离效果
创建 Shadow DOM 与普通 DOM 元素，对比样式隔离效果，理解 @layer 和 scoped styles。
CSS选择器构造器 - 基于关系和属性构建
通过勾选元素关系（子孙、兄弟）、属性、伪类等条件，自动生成精确的CSS选择器字符串。
字距与字偶距预览器 - 实时调节CSS letter-spacing
输入文本，滑块调节letter-spacing和word-spacing，实时显示效果并复制CSS。
Flexbox 高级演练场 - 所有属性可视化控制
通过滑块和开关调整 Flex 容器和子项的所有 CSS 属性，实时观察布局变化，理解弹性盒子。
内联样式提取合并工具 - 汇总 style 属性为类
提取 HTML 中所有内联 style，智能合并相同样式生成 class，并替换为类名以减小体积。
CSS兼容性速查 - 属性在各浏览器支持图表
搜索CSS属性，显示其在主流浏览器的支持范围和前缀需求，快速避免踩坑。
新拟态设计生成器 - CSS Neumorphism样式代码
调节光源角度、颜色和距离，生成凹凸柔和的新拟态UI元素CSS盒阴影代码，潮流设计工具。
CSS Grid 可视化速查表 - 所有属性一览
将 CSS Grid 容器和项目的属性以图形化卡片展示，点击查看具体效果和代码。
滚动文字横幅生成器 - 替代 marquee 标签
设置文字、速度和方向，生成使用 CSS 动画实现的滚动横幅代码。
CSS Flexbox交互演示 - 在线弹性布局学习
拖拽调节Flex容器和子项属性，即时可视化响应效果，同时显示CSS代码，边学边用。
悬停提示框生成器 - 纯CSS/JS气泡样式定制
选择触发位置、箭头方向与样式，生成轻量悬停提示框代码。
CSS 伪类效果测试场 - 实时查看 :is() :where() :has()
编写带有伪类的选择器，实时高亮匹配的HTML元素，探索现代CSS选择器的能力。
内联CSS提取器 - 将style标签移为外部
提取HTML中所有内嵌 `<style>` 标签的内容，合并生成单独CSS文件。
自定义下拉选择框美化 - 取代原生select
创建带有向下箭头和自定选项风格的自定义选择框HTML+CSS代码。
打印样式表生成 - 一键隐藏无用元素
自动生成适合打印的`@media print`样式，重置背景色、字号并隐藏导航。
CSS 滚动条样式生成器 - ::-webkit-scrollbar 自定义美化
通过可视化控件定制滚动条轨道、滑块、按钮等伪元素样式，即时预览并复制生成代码。
文本高亮效果生成器 - 荧光笔/下划线动画
制作像荧光笔划过的高亮背景或扫描下划线效果，导出类名。
HTML内联样式提取器 - 批量整理为独立CSS
提取HTML中内联style属性或嵌入式style标签，转变为独立CSS规则，辅助样式重构。
CSS Clip-Path生成器 - 在线裁剪形状代码
拖拽顶点或选择预定义形状，可视生成CSS clip-path多边形、圆形、椭圆等，实时预览并复制代码。
预设动画库 - 常用CSS关键帧
浏览并一键复制常见CSS动画（跳动、淡入、滑动等）的@keyframes代码。
布局网格覆盖层 - 可拖调栅格参考线
在任意网页上投射可拖拽调整的栅格覆盖线，用来测量和对齐设计稿。
毛玻璃效果生成器 - CSS Glassmorphism在线
调整透明度、模糊度和边框，实时预览毛玻璃UI卡片，生成兼容CSS backdrop-filter代码。