-
align-items控制Flex项目在交叉轴上的对齐方式，flex-start使其沿交叉轴起始边缘对齐，flex-end沿结束边缘对齐，具体方向取决于flex-direction：当flex-direction为row时，交叉轴垂直，flex-start向上、flex-end向下对齐；当flex-direction为column时，交叉轴水平，flex-start向左、flex-end向右对齐。align-items作用于容器内所有项目，而单个项目可通过align-self覆盖父容器设置，实现独立对齐。
-
CSS响应式不触发的主因是viewportmeta标签缺失或错误，导致移动端以桌面视口渲染；其次为@media语法不规范、断点不合理、样式优先级冲突或加载顺序不当。
-
box-shadow属性通过设置水平垂直偏移、模糊扩散半径、颜色及内外阴影，实现元素立体效果；常用于卡片、按钮、弹窗等场景，配合过渡动画可增强交互层次，关键在于合理控制参数与透明度，避免视觉冗余。
-
使用连接池复用数据库连接，减少开销；2.批量操作替代单条执行，提升I/O效率；3.为查询字段添加索引，优化SQL语句；4.引入Redis等缓存热点数据，降低数据库负载；5.IndexedDB中合并事务、建立索引并使用游标遍历，提升前端存储性能。
-
可将HTML5项目打包为可执行文件，实现跨平台运行。一、Electron：需安装Node.js和Electron，创建main.js和package.json，使用electron-packager打包。二、Tauri：基于Rust，安装rustup和tauri-app，配置tauri.conf.json，执行npmruntauribuild生成文件。三、NW.js：下载对应版本，配置package.json，将项目压缩为.nw并用nw.exe启动。四、WebView技术：用Go等语言调用WebView库
-
JavaScript正则引擎基于NFA与回溯机制，通过编译为字节码或状态机实现高效匹配。1.编译过程包括词法分析、语法解析生成AST，并转化为可执行结构；2.执行时模拟NFA行为，支持捕获组、反向引用等复杂特性，但回溯可能导致ReDoS；3.优化策略含快速路径、缓存、JIT编译及Boyer-Moore跳转，提升性能；4.特殊功能如断言和反向引用依赖运行时上下文判断与栈管理。
-
<link>标签用于引入外部CSS文件，需放在<head>中并设置rel="stylesheet"和href属性，推荐使用相对路径或根相对路径；加载时应将关键CSS优先内联或预加载，非关键样式延迟加载，并用media属性区分条件样式，避免遗漏rel属性或将标签置于body末尾，以提升页面渲染性能。
-
:focus作用于具体元素，:focus-within响应容器内子元素焦点状态，二者结合可实现表单区域高亮与层级化视觉反馈，提升可访问性与用户体验。
-
HTML原生的<select>标签不支持搜索功能，需通过JavaScript和CSS实现增强。具体步骤包括：1.隐藏原生select元素；2.用input和div/ul构建自定义组件；3.用JavaScript读取选项数据并监听输入事件进行过滤；4.动态更新下拉列表内容；5.处理选项点击事件同步选中值；6.管理焦点与显示/隐藏逻辑；7.引入Select2、Chosen或Tom-select等成熟库可简化开发；8.注意性能优化（如虚拟滚动/AJAX加载）、键盘导航、可访问性（ARIA属性）、移动
-
Grid负责页面整体区域划分，Flex处理组件内部对齐；例如仪表盘中Grid定义header、sidebar、content布局，Flex实现卡片内容居中与导航滚动，响应式下二者协同优化显示。
-
使用ID选择器最合适的情况包括：1.唯一标识元素时，如导航栏、页脚等全局唯一区域；2.需要提升样式优先级时，因ID选择器权重高于类和元素选择器；3.布局结构中作为主要模块标识，有助于SEO和无障碍访问；4.谨慎使用以避免滥用导致维护困难。因其高优先级和唯一性，适用于JavaScript操作及特定样式锁定，但应避免过度依赖以保证样式的复用性和项目的可维护性。
-
边框遮挡背景图的解决方法是设置background-clip:padding-box，使背景仅绘制在内边距区域而不覆盖边框；建议同步设置background-origin:padding-box以确保定位准确，两者配合使用逻辑一致且兼容性良好。
-
答案：WCAG规定普通文本对比度至少4.5:1，大文本至少3:1，需用工具验证，避免仅凭视觉判断，推荐使用深灰#333与白色背景等安全组合，并通过CSS变量和prefers-contrast支持高对比模式以提升可访问性。
-
使用Flexbox和margin实现底部固定布局：容器设为flex列布局并min-height:100vh，main内容区设置margin-top:auto自动填充剩余空间，将footer推至底部，内容少时footer贴底，内容多时自然跟随，无需JS，响应式良好。
-
D3.js适合高定制化复杂交互的可视化项目，需较强前端能力；Chart.js适用于快速开发标准图表，上手简单。1.D3.js功能强大但学习成本高，使用SVG渲染，灵活性强；2.Chart.js基于Canvas，性能优，配置简洁，适合常规报表。两者可结合使用，根据团队能力和需求选择。
