标签: CSS

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

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

CSS 的 ID 选择器不支持模糊匹配。文章介绍了使用属性选择器实现 ID 属性的模糊匹配方案。通过`[id^="task-"]`（开头匹配）、`[id*="task"]`（包含匹配）、`[id$="-task"]`（结尾匹配）等方法，可以达到类似通配符的效果。

在使用`scrollIntoView`时，导航栏遮挡目标元素是个常见问题。本文提供了多种解决方案，包括推荐的CSS `scroll-margin-top` 属性，以及JavaScript手动计算偏移的`scrollTo`方法，还涉及动态获取导航栏高度和Intersection Observer等。最佳实践建议优先使用CSS方案。

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

CSS通用字体族是数字排版基石，涵盖衬线、无衬线、等宽等。`system-ui`可适配系统UI字体。文章解析了各字体族的特性、适用场景、跨平台适配、性能优化及未来可变字体趋势，强调字体选择是信息密度的艺术。

等宽字体源于打字机，核心在于字符等宽，解决代码对齐、字符混淆和终端兼容问题。现代技术如连字、可变字体和视网膜屏优化不断演进。选择字体需根据场景考虑，并注意渲染问题。CSS Fonts Level 4或将精细控制等宽特性，未来或出现“空间等宽”字体。

本文深入解析了CSS垂直对齐属性`vertical-align`，包括其本质、取值体系、基线原理及常见问题（如图片底部间隙）。探讨了`line-height`的继承与使用，并提供了多种垂直居中方案及现代布局替代方案。最后，给出了实践技巧和设计系统视角下的垂直对齐建议。

本文深入解析CSS定位机制，重点分析了`position: sticky`失效的常见原因及包含块、堆叠上下文等核心概念。对比了不同布局方案与sticky的兼容性，并提供了现代布局替代方案、性能优化策略及问题排查指南，最后展望了CSS Scroll Snap、容器查询等前沿技术。

CSS动画时间函数通过animation-timing-function控制动画速度。分为连续型（贝塞尔曲线）和离散型steps()函数，后者用于分帧动画。需关注性能，为运动敏感用户提供降级方案。未来趋势包括Houdini动画、滚动驱动动画和自定义缓动函数。复杂动画建议用JS实现。

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

本文深入解析CSS高级特性，涵盖文本控制、数字排版、混合模式、格式化上下文及工程化实践。强调white-space、断词算法、数字变体、BFC现代方案、Tailwind兼容与CSS Layer管理。展望CSS Nesting等未来趋势，助力开发者掌握CSS核心原理，应对技术变革。

CSS选择器经历了从基础到逻辑选择器的演进，分为基础、复合、关系和伪类/伪元素四大类。:is()、:where()、:has()、:not()等逻辑选择器功能强大，但需注意特异性和性能。掌握选择器优先级、现代浏览器特性适配和性能优化，能编写更高效可维护的CSS代码。

CSS中，可为同一`font-family`名称设置多个`font-weight`，通过数值或关键字(normal/bold)定义不同粗细的字体文件，浏览器依据`font-weight`值自动切换。需确保字体文件与权重匹配，并可优化文件大小、懒加载非关键权重字体。

`:root`与`html`选择器在CSS中作用范围相似，都指向HTML根元素。关键区别在于优先级：`:root`作为伪类，优先级高于`html`。若两者定义相同属性，`:root`声明会覆盖`html`声明。通常用于定义全局CSS变量，确保文档范围内可访问。

本周报记录了tesseract.js多语言识别的使用方法，推荐使用多个worker分别加载不同语言。同时，探讨了HTML双击选中周围元素的问题，并提供了CSS和JavaScript两种解决方案。最后，介绍了HTML5原生的颜色选择器`<input type="color">`及其用法。

本文总结了 HTML 规范的细节，包括：关闭表单自动填充（`autocomplete="off"`及`new-password"`），各浏览器表现差异，`autocomplete`属性值详解，以及自动填充样式的重置方案（box-shadow）。同时提到了移动端 `cursor: pointer`的影响，域名解析库psl，cookie中domain设置差异，拖拽效果实现，img标签alt属性优化SEO和无障碍，以及iOS拍照图片旋转问题。

本周报主要内容包括：1. 探讨了 `vertical-align` 的 `Line-relative values` 和 `Parent-relative values` 的区别。2. 总结了 `scrollIntoView` 的使用方法和参数选项。3. 提供了树结构和列表互相转换的 JavaScript 实现。

本文全面介绍了 CSS 选择器，包括伪类选择器（如`:active`, `:checked`, `:nth-child`等）、链接伪类、结构伪类、目标伪类和逻辑选择器（`:is`, `:where`, `:not`, `:has`）。同时涵盖了选择器组合器、属性选择器、伪元素以及访问 Shadow DOM 内部元素的方法。

本文总结了CSS的多个细节知识点。包括：`white-space`换行控制，`break-word`和`overflow-wrap`，`font-variant-numeric`控制数字等宽，`mix-blend-mode`混合模式，BFC（块级格式化上下文）的触发条件及作用，以及`@layer`规则，`:first-child`和`:first-of-type`的区别，和tailwindcss兼容性问题。

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

本文探讨了`position: sticky`失效的常见原因，如缺少`top/right/bottom/left`阈值或父元素`display: flex/overflow`属性。针对`display: flex`的替代方案，提出了使用`float: left`及清除浮动的方法。同时，推荐使用`align-self: start`优化`sticky`布局，并详细介绍了`position`属性的各种取值及其与`z-index`的关系，以及`sticky`元素可能存在的性能问题及优化方案。

本文探讨了CSS属性`vertical-align`和`line-height`。`vertical-align`用于设置行内、行内块和表格单元格的垂直对齐方式，默认值为`baseline`。`line-height`定义行高，推荐使用纯数字值，以便随字体大小缩放。结合两者可实现单行文本垂直居中。