-
百分比宽度的计算基准是父容器的内容区宽度（contentbox），受box-sizing、内边距、边框、浮动、定位及布局上下文共同影响；需确保父元素有明确可计算的宽度，且注意不同定位和布局模式下包含块定义的差异。
-
采用React函数组件与Hooks：已采纳，2023年决定。背景为类组件维护难、逻辑复用差；决策选用函数组件与Hooks；理由包括更优的逻辑封装、社区趋势、团队熟悉；影响涉及更新开发规范、培训成本；替代方案含类组件继承（复杂度高）和HOC（嵌套深）。
-
HTML文字垂直排列需用CSS实现：一、writing-mode设vertical-rl或vertical-lr；二、text-orientation控字符朝向；三、transform旋转容器；四、flex-direction:column逐字堆叠；五、grid布局精确定位字符。
-
使用CSSGrid和Flexbox结合媒体查询可实现响应式多列布局。Grid通过repeat(auto-fit,minmax(250px,1fr))自动调整列数与宽度，适合多数场景；Flexbox利用flex:11250px和flex-wrap实现弹性布局，配合媒体查询在不同屏幕下优化显示。设置合理gap和断点确保视觉舒适，Grid更简洁，Flexbox更灵活，根据需求选择。
-
视差滚动通过不同元素以不同速度移动创造深度感，常用CSS的background-attachment或JavaScript控制transform属性实现。1.使用CSSbackground-attachment:fixed适用于背景图，简单高效但控制有限；2.JavaScript监听scroll事件并结合transform属性可实现更复杂效果，同时推荐使用requestAnimationFrame优化性能；3.IntersectionObserver用于减少非视口内元素的计算开销；4.响应式设计中可通过媒
-
<p>推荐使用box-sizing:border-box，因为它使元素宽高符合视觉直觉——设置width:300px即实际占用300px水平空间，避免padding和border导致宽度意外增加、溢出或布局错位，且一行*{box-sizing:border-box;}即可全局生效。</p>
-
单例模式确保类仅有一个实例并提供全局访问，常用于共享资源管理；工厂模式则通过封装对象创建过程实现解耦，便于扩展不同类型对象的生成；二者结合可提升代码的可维护性与灵活性。
-
<p>JavaScript数组排序需掌握核心算法以应对自定义逻辑与性能优化。内置sort()方法默认按字符串排序，数字排序需传入比较函数(a,b)=>a-b实现升序或b-a降序。冒泡排序通过相邻元素交换实现O(n²)时间复杂度，适合理解基础原理；选择排序每次选取最小值插入，交换次数较少但同样为O(n²)；快速排序采用分治法，以基准值分割数组并递归，平均性能O(nlogn)，效率较高。实际开发中应优先使用内置sort()，其在大量数据时性能更优，仅在特殊需求下手动实现。处理对象数组可按字段
-
HTML5通过<video>元素原生支持视频嵌入，需设置width、height、controls等属性，配合<source>多格式兼容，可配置autoplay、muted、loop等行为，并支持JavaScript控制及CSS响应式布局。
-
可将HTML5应用封装为原生APP的主流方案有五种：一、ApacheCordova，通过CLI创建项目并添加平台构建APK/IPA；二、Capacitor，现代架构，支持现有Web项目集成与原生API调用；三、Tauri仅适用于桌面端，不支持移动平台；四、PhoneGapDesktop提供图形化界面，依赖Cordova引擎；五、WebViewGold为免代码在线SaaS服务，上传ZIP即可生成安装包。
-
HTML页面缓存由服务器HTTP响应头（如Cache-Control、ETag）控制，meta标签无效；验证需通过DevToolsNetwork面板查看Size列和状态码；清除缓存应修改服务端响应头、文件名哈希化或临时加查询参数；SPA中index.html须短缓存以防JS/CSS版本错配。
-
使用position:sticky或fixed可实现导航栏常显。1.sticky在滚动到阈值时粘住，不脱离文档流，需设top值，兼容性较弱；2.fixed使导航栏始终固定于视口，脱离文档流，需为body添加padding防遮挡；3.sticky适合自然滚动后固定，fixed适合始终固定或复杂交互；4.Bootstrap等框架提供sticky-top和fixed-top类快速实现。根据布局与交互需求选择，前者轻量自然，后者控制更强。
-
元素居中需根据场景选择方案：水平居中块级元素用margin:0auto，行内元素用父容器text-align:center；Flexbox通过justify-content和align-items实现灵活的水平垂直居中；Grid使用place-items:center简化二维居中；绝对定位配合transform:translate(-50%,-50%)适用于脱离文档流的精确居中，各方法各有适用场景。
-
可通过四种方式阻止浏览器默认行为：一、调用event.preventDefault()；二、内联事件或jQuery中returnfalse；三、为touchstart等事件设置passive:false；四、移除或禁用HTML默认属性。
-
CSS选择器是精准控制网页元素外观的核心工具，包括元素、类、ID、属性、伪类及组合选择器。首先，元素选择器通过标签名统一设置样式，如p{color:blue;}；其次，类选择器以.开头，作用于具有相同class的多个元素，如.highlight{background-color:yellow;}；ID选择器以#开头，针对唯一元素且优先级更高，如#header{font-size:24px;}；属性选择器通过方括号匹配属性或值，支持精确筛选，如[type="text"]；伪类选择器定义特殊状态，如a:hov
