-
通过CSSanimation与background-position结合可实现流畅背景动画，如滚动云层或流动河流，利用@keyframes改变背景位置，配合background-size和多层背景增强视觉效果，适用于banner动效、按钮悬停等场景。
-
HTML5环境可通过jsrsasign库实现RSA加密：导入PEM公钥、调用encrypt方法得十六进制密文，适用于短文本；私钥严禁前端存储，解密须在服务端完成。
-
min-width和max-width用于限制元素宽度上下界，优先于width等规则生效；与flex/grid配合时控制压缩与拉伸边界；响应式中推荐用媒体查询的min-width而非元素级属性；IE11不支持calc()混合单位，且对inline元素无效。
-
使用aspect-ratio和object-fit可实现响应式图片裁切，通过设置容器宽高比并用object-fit:cover裁剪图片，确保图片填充容器且保持比例，常用padding-bottom技巧兼容性好。
-
该错误并非项目代码问题，而是由Chrome浏览器中某款扩展（如QuillBot）劫持并尝试加载本地字体资源所致；只需临时禁用相关扩展即可立即解决，无需修改HTML、CSS或配置manifest文件。
-
HTML语义化标签指具有明确含义的标签，如<article>、<nav>等，能清晰表达内容角色；HTML5引入<header>、<main>、<section>、<aside>、<footer>等新标签，分别用于页面头部、主体内容、章节划分、侧边栏和底部信息；使用语义化标签可提升可访问性、利于SEO、增强代码可读性与维护性，并助力响应式设计；实际开发中应避免滥用<div>，注意嵌套逻辑，结合ARIA属性优化辅助
-
外部CSS不生效最常见原因是href路径错误和浏览器缓存，其次为link标签位置/拼写错误及样式被后加载CSS覆盖；应优先检查Network面板是否返回404或非200状态。
-
::first-letter伪元素仅对块级容器中第一个字母或汉字生效，需避免flex/grid布局，支持color等文本属性但background在旧Safari不稳定，首字下沉推荐float+font-size+line-height组合，中文需注意Safari兼容性，禁用伪元素嵌套。
-
Tooltip组件通过data-tooltip属性为元素添加提示信息，使用JavaScript监听鼠标事件并动态创建、定位提示框。核心逻辑包括：利用getBoundingClientRect计算位置，确保提示框不越界，并通过append/remove控制显示与隐藏。支持多种元素且无需额外DOM嵌套，可扩展自定义位置、动画和富文本功能，轻量易集成。
-
<mark>标签本身性能开销极小，真正影响首屏速度的是不当CSS样式、大规模无节制渲染及客户端动态插入等误用行为。
-
Grid容器需设position:relative，因absolute定位依赖最近已定位祖先，而grid容器默认static不构成定位上下文，否则子元素将相对于视口定位。
-
禁用date输入框原生校验的两种可靠方式是：①将type="date"改为type="text"并用JS接入第三方日期选择器；②保留type="date"但在表单上添加novalidate属性，同时需自行补全JS验证。
-
::after伪元素通过content属性在元素后插入装饰性内容，常用于添加图标、动画下划线、气泡三角等视觉效果，提升页面美观与可维护性。
-
给ul设置display:flex并配合justify-content、gap和flex-wrap等属性实现li横排与响应式布局，避免使用float、inline-block等过时或易出错方式。
-
Checkbox控制抽屉显隐更轻量，因无需事件监听、不触发重排、无运行时依赖，纯CSS通过:checked伪类联动实现；需input与抽屉同DOM上下文，用~或+选择器；推荐transform替代margin实现滑入；移动端须用label显式关联并保障点击区域；抽屉滚动需设overflow-y:auto、明确高度及-webkit-overflow-scrolling:touch。
