-
input在Flex中被压缩是因默认min-width:auto导致内容宽度极小，解决方法是显式设置min-width（如0、120px或配合flex:1），并建议组合flex-shrink:0或flex:11auto以确保稳定显示与交互。
-
CSS的column-count属性用于将内容自动分成指定的列数，如报纸排版般直观。使用时只需设置column-count为一个整数值即可实现多列布局，例如.column-container{column-count:3;}会使内容分为三列。此外，column-count常与column-gap、column-rule等属性配合使用以优化视觉效果。对于响应式设计，推荐结合媒体查询动态调整column-count值，或改用column-width让浏览器根据空间自适应列数。应对跨列元素需用column-sp
-
首先用语义化标签替换无意义div，提升可读性与SEO；分析结构后，用header、nav、main、article、section、aside、footer等标签明确各区域功能；确保h1唯一且标题层级合理，必要时添加aria-label或role及id；最后验证样式、功能及无障碍兼容性，持续优化代码结构。
-
HTML5中应用CSS样式的三种方式：一、用link标签外链CSS文件，需设rel="stylesheet"和正确href路径；二、用style标签内嵌CSS代码，须置于head中并注意语法；三、用style属性添加行内样式，仅作用于单个元素且优先级最高。
-
ServiceWorker是运行在浏览器后台的可编程代理层，支持拦截请求、缓存管理、推送通知和离线访问；需HTTPS注册，独立线程运行，无法访问DOM，通过install/activate/fetch事件实现缓存策略与离线能力。
-
使用AsyncLocalStorage可在Node.js中实现请求上下文跟踪，通过在中间件中调用asyncLocalStorage.run()为每个请求创建独立上下文，使后续异步操作能访问同一请求数据；结合日志系统可自动透传requestId等信息，实现全链路追踪与问题定位。
-
实现响应式导航栏需结合HTML结构、CSS媒体查询与JavaScript交互：桌面端通过flex布局水平排列导航项；移动端用媒体查询隐藏列表，显示汉堡按钮；点击按钮通过JavaScript切换.nav-links的active类控制显隐，配合transition可添加过渡效果。关键在于结构语义化、状态类管理及断点适配。
-
通过优化box-shadow和transition设置可使阴影动画更自然明显。1.设置合理过渡时间（如0.3s~0.5s）；2.增大阴影差值，扩大模糊半径与偏移量；3.使用ease-in-out或cubic-bezier等缓动函数增强视觉反馈；4.避免transition:all导致的干扰，应单独指定box-shadow过渡；5.可启用硬件加速提升渲染性能。示例中卡片悬停时阴影从02px4pxrgba(0,0,0,0.1)过渡到08px24pxrgba(0,0,0,0.3)，配合0.3秒缓动，变化清晰流畅
-
HTML文件双击以file://协议打开时hover可能不生效，主因是本地协议限制、样式未加载或写法错误；应改用本地服务器（如LiveServer）、检查开发者工具中hover计算样式、确认选择器语法及pointer-events设置，并注意移动端hover不可靠。
-
处理韩文与西文混排时，应使用word-break:break-all确保韩文在任意字符处断行，避免溢出；2.对西文部分需用word-break:normal覆盖，以保持单词完整性；3.overflow-wrap:break-word作为兜底策略，防止超长无空格字符串溢出；4.word-break用于语言级断行规则，overflow-wrap解决极端情况下的溢出问题，二者互补协同，确保多语言文本在不同容器中正确换行并保持排版整洁。
-
虎牙直播可通过网页端、PC客户端、浏览器及移动端四步实现HTML5播放：网页端在设置中开启“优先使用HTML5”；PC端在播放设置中选择HTML5并勾选“始终使用”；浏览器需禁用Flash并启用HTML5优先实验选项；移动端访问m.huya.com自动启用HTML5。
-
闭包实现策略模式的核心在于其能封装私有状态并返回可复用的函数，使策略具有独立上下文；2.其优势包括极致的封装性、灵活的参数化、避免this指向问题及便于测试；3.实际挑战包括调试困难、潜在内存泄漏和团队理解成本，可通过保持策略简洁、管理引用和加强文档来规避；4.闭包还可应用于模块模式、单例模式、装饰器模式以及函数柯里化等场景，是JavaScript中实现封装与复用的关键机制。
-
使用Flexbox可让元素自动填充剩余空间，.container设置display:flex，.sidebar固定宽度，.main-content设置flex-grow:1即可占满剩余区域。
-
JavaScript类型判断需组合使用：先用typeof区分6种原始类型（null除外），再用===null单独处理，其余统一用Object.prototype.toString.call()获取内部标签；跨iframe时instanceof失效，应优先用Array.isArray()等专用方法。
-
混淆与压缩可提升前端JavaScript安全性和性能，通过重命名、字符串加密、控制流扁平化等手段增加逆向难度，结合Terser压缩和Obfuscator混淆并在构建流程中分层处理，能有效平衡安全性与可维护性。
