-
浮动元素撑不开父容器时，应优先用overflow:hidden或auto触发BFC；左右浮动间距不一致需统一margin侧向设置；清除浮动后空白由清除元素的盒模型属性引起，应用伪元素并设height:0等属性消除；移动端应避免依赖浮动，改用响应式布局。
-
答案：前端水印通过叠加文字或图形保护版权，常用方案包括CSS/JS叠加、Canvas绘制、视频嵌入及增强防护。1.使用div+JS生成含用户信息的半透明网格水印；2.利用canvas绘制难删除的背景图，支持个性化内容；3.在video播放器上叠加动态位置水印防录屏；4.结合禁右键、监控全屏等措施提升安全性。水印需会话级更新，平衡警示性与体验，实现低成本高效防护。
-
手风琴用checkbox而非radio是因需支持“全部收起”，checkbox天然支持点击切换与:checked伪类闭环控制；radio无法取消选中，除非JS干预。
-
Nginx的return301必须带$request_uri，否则会截断查询参数导致跳转丢失；$uri不含参数，$host避免多域名绑定错误；私钥权限须为600且属主为nginx用户；HTTP→HTTPS重定向必须在独立80端口server块中配置，续期后需手动reload。
-
JavaScript通过事件循环实现异步并发，利用WebWorkers进行多线程计算，避免主线程阻塞，结合rAF、IntersectionObserver、requestIdleCallback等技术优化渲染性能，提升页面响应性。
-
HTML5<inputtype="date">在旧浏览器中直接回退为文本框而非兼容，需运行时检测支持性：创建临时input并判断input.type==='date'；不支持时推荐flatpickr（配dateFormat:"Y-m-d"）并校验格式、同步value、处理Safari时间戳兼容性。
-
气泡位置偏移的根本原因是absolute定位参考系错误，应给父容器设position:relative以确保以该容器为锚点；箭头推荐伪元素+border+rotate实现；动画只用transform和opacity避免重排；多气泡用DOM顺序控制层叠，隐藏时先动画再remove。
-
autocomplete="off"在现代浏览器中基本失效，因Chrome≥76、Firefox、Edge会结合name、type、label等语义信息主动忽略它；密码字段应改用autocomplete="new-password"并配合type="password"，用户名/邮箱等字段需组合随机name、隐藏假字段、非语义placeholder等策略破坏浏览器语义推断。
-
锚点跳转失效主因是id与href匹配细节或DOM状态异常：id须全局唯一且不以数字开头；href需为合法hash格式；目标元素须已渲染且可见；可用scrollIntoView()替代或监听hashchange手动滚动，并用scroll-margin-top解决吸顶遮挡。
-
div和span的本质区别在于渲染行为与语义：div默认块级、触发BFC、可设宽高；span默认行内、不响应宽高、支持vertical-align，且不可嵌套块级元素。
-
本文介绍如何利用useState和useEffect配合clearTimeout，实现一组按序触发、自动重置并无限循环的定时任务（如task1→task2→task3→重启），确保每次循环前旧定时器被正确清除，避免内存泄漏和逻辑错乱。
-
ES6中使用字符串的trimStart()方法可直接去除开头的空白字符。该方法会移除字符串头部的所有空白符（包括空格、制表符、换行符等），并返回一个新字符串，原始字符串不会被修改。1.trimStart()的使用方式为在字符串变量后直接调用，如originalString.trimStart()。2.它适用于处理用户输入、解析API数据、命令行参数清洗等场景，尤其在仅需去除前导空格而保留结尾空格时非常有用。3.与trim()不同，trimStart()只处理字符串开头部分，而trimEnd()则专注于末尾
-
html2canvas并非所见即所得快照工具，而是通过解析样式并重绘实现转换，不处理transform动画、iframe及跨域图片等原生渲染行为；其不继承浏览器默认样式表，需显式声明字体、颜色等CSS规则，并配置useCORS、scale等参数以保障截图质量。
-
在现代前端开发中，CSS的兼容性和代码效率至关重要。PostCSS是一个强大的工具，能将CSS解析成抽象语法树（AST），然后通过插件对样式进行转换和优化。结合合适的插件，你可以自动添加浏览器前缀、压缩代码、使用未来CSS特性，而无需手动处理繁琐细节。安装与配置PostCSS要在项目中使用PostCSS，首先需要将其集成到构建流程中。大多数现代项目使用Webpack、Vite或Parcel，这些工具都支持PostCSS配置。以Webpack为例，先安装PostCSS
-
能，但需正确实现：aria-label失效常因语义缺失或交互劫持；role="button"比div+onclick可靠因其显式声明交互意图并支持键盘焦点；aria-live需注意polite/assertive行为、DOM更新方式及初始存在；表单必须用显式label或aria-labelledby而非placeholder；焦点管理是动态组件可访问关键。
