-
vw和vh是基于视口宽度和高度的CSS单位，1vw等于视口宽度的1%，1vh等于高度的1%，可实现元素尺寸的响应式自适应。它们适用于全屏布局（如height:100vh）、响应式字体（如calc(16px+2vw)）、等比容器（如width:80vw;height:80vw）及弹性间距控制。使用时需注意移动端地址栏导致的100vh异常、小屏文字溢出问题，建议结合clamp()限定范围，并为老浏览器提供px回退方案，以提升兼容性与体验一致性。
-
尾递归可安全转循环，关键看递归调用是否为函数最后一个操作且返回值直接来自该调用；非尾递归需手动模拟栈，盲目转循环反而降低性能与可读性。
-
Getter与Setter访问器属性不被子类直接继承，但可通过继承调用父类中public/protected的getter/setter方法；子类可重写以定制逻辑，private访问器不可见；计算型访问器需注意字段结构变化带来的兼容性问题。
-
JavaScript常用设计模式包括单例、观察者、工厂、策略等，其中单例确保全局唯一实例，常通过静态属性或模块导出实现；观察者模式实现一对多依赖通知，发布-订阅则进一步解耦为事件中心通信。
-
手机端fixed定位“不固定”是因iOSSafari和部分安卓WebView对position:fixed实现有缺陷，键盘弹出、滚动或地址栏变化时元素错位；需加transform:translateZ(0)触发硬件加速、避免同时设top/bottom、禁用vh单位、仅对transform/opacity做动画、遮罩层设touch-action:none、用key或nextTick重播动画。
-
博客HTML结构应使用语义化标签：用<article>包裹全文，<h1>作唯一主标题，小节用<h2>～<h4>，代码块嵌套<pre>，引用用<blockquote>，列表用<ul>/<ol>；避免全<div>堆砌、<h1>错放、<pre>不包等返祖错误。
-
flex-1在圣杯布局中慎用，因其等效flex:110%会强制侧栏与中栏等高，破坏视觉错觉；中栏可用flex-1占剩余宽度，侧栏应设flex-none或flex-[0_0_20rem]。
-
HTML5调用摄像头需用navigator.mediaDevices.getUserMedia()获取MediaStream，必须在HTTPS或localhost下运行；成功后通过video.srcObject绑定预览，用canvas.drawImag截帧拍照，MediaRecorderAPI录制视频，注意兼容性与权限管理。
-
本文详解如何仅用纯CSS为<progress>元素添加平滑动画效果，指出关键限制与跨浏览器适配要点，并提供可直接运行的代码示例。
-
当使用position:absolute或fixed的元素被遮挡时，需结合overflow属性解决显示问题。2.父容器设置overflow:hidden会裁剪脱离文档流的定位元素，应改为visible防止截断下拉菜单等组件。3.在可滚动容器中，overflow:auto或scroll会导致浮层面板被隐藏，可通过将浮层移出父级（如使用Portal）、临时修改overflow或改用position:fixed解决。4.必须合理设置z-index并避免祖先元素意外创建层叠上下文，确保定位元素正确显示在顶层。5.
-
display:none彻底移除元素、不占空间、不响应事件、子元素失效，触发重排，SEO不索引；visibility:hidden保留占位、仅重绘、屏幕阅读器可读；opacity:0仍占位可交互，需pointer-events:none禁用点击。
-
不能用<progress>实现环形进度，必须用CSSconic-gradient或SVG；CSS方案轻量但兼容性差（IE不支持），SVG方案兼容性好、可控性强，推荐生产环境使用。
-
z-index不生效的根本原因是元素未处于层叠上下文中；只有在层叠上下文内部，z-index才决定子元素堆叠顺序，跨上下文时父级整体层级优先。
-
JavaScript迭代器核心是next()方法，返回{value,done}对象；实现[Symbol.iterator]()的对象为可迭代对象，供for...of等消费；生成器函数可简化迭代器创建。
-
transition适合两态平滑变化，需触发条件且仅作用于可计算属性；@keyframes适用于多阶段、循环或精确控制的复杂动画；二者混用时animation覆盖transition，应避免冲突。
