-
hover:rotate-180不生效主因是inline元素不支持transform，需设inline-block或block；旋转中心偏移应配合origin-*类；动画卡顿需加transition-transform和will-change-transform；动态控制应改用条件class而非仅hover。
-
要成功运行自建HTML网页，首先需保存为.html文件并用浏览器直接打开预览；若需HTTP环境，则可通过Node.js的http-server、Python内置服务器或VSCode的LiveServer插件启动本地服务器，再在浏览器访问对应地址查看效果。
-
选择REM结合视口单位因兼具JS动态控制与CSS原生缩放优势，避免纯方案缺陷。通过JavaScript设置html的font-size实现REM基准，利用calc()混合单位提升自适应性，用预处理器或四舍五入减少精度误差，配合Flexbox增强布局响应能力，对旧浏览器可降级处理。
-
JavaScript通过HistoryAPI实现无刷新导航：用pushState/replaceState修改URL并存状态，popstate监听后退/前进事件恢复状态，back/forward控制跳转，state需同源且可序列化。
-
fr单位与百分比混合使用时，百分比先按容器尺寸占位，fr再分配剩余空间。例如600px容器中设40%和1fr，则第一列240px，第二列360px；若设30%、2fr、1fr，则第一列180px，剩余420px按2:1分，得280px和140px。注意避免100%与fr共存，以防fr失效，推荐主内容用fr、侧边栏用固定或百分比宽度，确保响应式兼容。
-
Bootstrap栅格不生效的主因是结构错误、CSS未加载、断点不匹配或自定义样式覆盖；须严格遵循container→row→col三层嵌套，引入正确CSS文件，合理使用响应式类，并避免干扰flex布局的自定义样式。
-
三种原生HTML5动态日历实现方式：一、table语义化布局，支持可访问性；二、div+CSSGrid响应式布局，适配移动端；三、WebComponents封装自定义元素，支持属性传参与事件派发。
-
使用4个空格统一缩进，嵌套层级逐层增加，闭合标签对齐，块级元素独立成行，借助Prettier等工具自动格式化，提升HTML代码可读性与维护性。
-
答案：通过flex布局实现导航项均匀排列，结合transition属性实现悬停背景色平滑过渡。具体步骤包括：使用display:flex和justify-content分配间距，设置transition:background-color0.3sease实现颜色渐变，配合border-radius和box-shadow提升视觉效果，同时可通过媒体查询适配移动端，整体方案简洁且提升用户体验。
-
JavaScript的Date对象是浏览器提供处理日期和时间的内置工具，其核心在于创建、读取、修改和格式化时间信息。1.创建方式包括newDate()获取当前时间、传入毫秒数指定时间点、使用ISO8601格式字符串或直接传入年月日等参数（注意月份从0开始）。2.获取时间组件通过getFullYear()、getMonth()等方法实现，设置则使用setFullYear()、setMonth()等方法，但会修改原对象。3.常见“坑”有月份从0开始、本地时间和UTC时间混淆、日期字符串解析不一致以及夏令时导致
-
答案：Eruda和VConsole是移动端真机调试的有效工具，通过在页面中注入调试面板解决桌面工具无法直接操作的问题。VConsole轻量，适合查看日志、网络请求和DOM结构；Eruda功能全面，接近ChromeDevTools，支持更深入的JS、CSS和资源调试。两者均可通过CDN或NPM引入，并建议仅在开发环境或通过条件判断在生产环境中按需启用，以避免性能与安全风险。实际使用中，通过右下角按钮唤出面板，可进行console输出、元素检查、网络监控等操作，尤其适用于定位跨设备兼容性问题。为保障安全，应结
-
box-shadow用于元素整体阴影，适合卡片、按钮等组件；text-shadow用于文字阴影，适合标题、标语。1.box-shadow给块级元素加立体感，如卡片布局、按钮悬停、浮层投影；2.text-shadow增强文字表现力，如banner标题、图片文字叠加、艺术风格设计；3.使用技巧上，box-shadow常用偏移+模糊半径或多层阴影，text-shadow建议简单阴影以提升可读性；4.性能方面，box-shadow影响更大，text-shadow较轻量；5.兼容性两者现代浏览器均支持良好，但旧版I
-
animate__animated类可直接触发进入动画，但仅首次渲染生效；悬停动画需手动定义CSS规则；animation-name不支持多值叠加；移动端Safari对animation-play-state支持不稳定。
-
要解决CSS文件跨域引入问题，核心是配置服务器的CORS策略。必须确保托管CSS的服务器在响应头中添加Access-Control-Allow-Origin，指定允许访问的源，如Nginx或Apache配置对应规则；若使用CDN，还需确认其正确转发CORS头部，并注意缓存可能导致新配置未生效，需清理缓存或调整缓存策略以确保更新及时生效。
-
浮动导致父容器高度塌陷是典型问题，推荐用display:flow-root清除浮动；Flex/Grid布局下浮动无效，应直接使用对应布局属性；移动端缩放易引发浮动错位，优先用Flex/Grid或transform替代。
