标签: 响应式设计

CSS Scroll Snap 模块用于控制滚动容器在滚动结束时自动“吸附”到指定位置。核心属性包括 `scroll-snap-type` (定义捕捉行为), `scroll-snap-align` (定义对齐方式), `scroll-snap-stop` (控制强制性) 和 `scroll-padding` (设置内边距)。文章通过示例展示了其在轮播图、全屏滚动等场景的应用，并强调了使用注意事项和浏览器支持情况。

本文介绍了 CSS 滚动捕捉模块中的 `scroll-margin` 属性，该属性用于定义元素在滚动定位时的外边距空间，解决锚点定位偏移和滚动捕捉精确控制问题。文章详细介绍了其语法、属性值、工作原理和应用场景，例如解决固定导航栏遮挡问题等。

本文解释了 CSS 中 `serif`（衬线体）和 `sans-serif`（无衬线体）通用字体族的使用。它们作为 `font-family` 的备选项，能保证跨平台字体显示。选择时需考虑阅读场景：长文本选用衬线体，屏幕显示和标题选用无衬线体。

CSS度量体系涵盖绝对、相对单位，构成响应式设计的核心。`clamp()`函数和新型视口单位(svh/lvh/dvh)优化排版。像素演进涉及DPR和亚像素渲染。REM/EM之争需根据全局/局部场景选择。性能方面，静态单位优于动态单位。未来，新单位提案和Houdini将提升排版精度和单位操作性。

`:root`和`html`选择器虽指向同一元素，但浏览器处理逻辑不同，`:root`具文档类型自适应性和更高特异性，更适合定义全局CSS变量，配合媒体查询可实现动态响应式。工程实践中应优先使用`:root`，并关注CSS层叠层规范对优先级的影响。

本文介绍了 CSS 中 values and units 的概念，重点讲解了 `<length>` 类型。文章区分了绝对长度单位（如 px, cm, in）和相对长度单位（如 em, rem, vw, vh），并详细解释了它们的含义和使用场景，强调了相对单位在网页开发中实现元素尺寸缩放的优势。