-
本文详解如何使用CSSFlexbox将Logo、居中导航栏和右侧按钮精准布局在同一行，解决传统浮动与文本对齐导致的错行问题，并提供可直接运行的完整代码与最佳实践。
-
Grid布局通过定义网格容器和自动填充行实现列对齐，Flexbox结合多列可模拟瀑布流；关键在于使用gap、grid-auto-rows与break-inside:avoid确保视觉整齐。
-
事件委托本质是利用事件冒泡，将监听器绑定在稳定父元素上，通过event.target.closest()安全匹配目标元素，避免重复绑定与内存泄漏，不适用于行内事件或冒泡被阻断等场景。
-
WebRTC是基于JavaScript的浏览器端实时音视频通信标准，通过MediaDevices、RTCPeerConnection和RTCDataChannel三大API实现P2P音视频通话与数据传输，需信令服务器交换SDP和ICE候选以建立连接。
-
首先创建.html文件并保存完整代码，再用浏览器打开即可显示爱心动画；若需嵌入网页，应将含style与script的代码段插入body区域并确保资源路径正确；如动画未显示，可通过F12开发者工具查看Console报错与Network资源加载状态进行调试。
-
使用pointer-events:none可使元素不可点击，该属性禁用鼠标和触摸事件并允许事件穿透至下层元素；需配合cursor:not-allowed、opacity或filter视觉提示，以及tabindex="-1"和aria-disabled="true"确保可访问性，避免仅依赖display或visibility等伪禁用方式。
-
在JavaScript中实现Excel导出可以使用原生API导出CSV文件或使用SheetJS库导出带格式的Excel文件。1)使用Blob对象和URL.createObjectURL方法可以实现简单的CSV导出，适合小型数据集。2)SheetJS库支持复杂的Excel格式导出，但文件较大，处理大数据集时可采用流式处理方法来提升性能。
-
HTML元素本身不能直接调整尺寸与位置，所有布局控制均依赖CSS；html高度设为100%常无效因依赖父容器（初始包含块），需html和body同时设height:100%并清除body默认margin，或改用100vh/100dvh；position:absolute对html无效因其定位上下文始终是视口；zoom和transform:scale()不推荐用于布局缩放，易引发坐标错乱与点击偏移；响应式缩放应使用viewportmeta配合rem与媒体查询。
-
伪类和伪元素不能像函数调用一样连写，但可合法组合为:hover::after表示悬停时渲染伪元素；必须设置content（非none或空值）且父元素需position:relative以支持position:absolute定位；移动端hover不可靠，应配合媒体查询或JS降级。
-
JavaScript性能优化需针对性干预执行效率、内存占用和主线程阻塞；避免循环中重复DOM访问与计算，缓存变量；合理使用Object.freeze()和const；内存泄漏多源于未清理的事件监听器、定时器和闭包悬空引用，须用ChromeMemory面板对比heapsnapshot确认。
-
最简单方案是用:focus伪类改outline；需保留outline-style、兼顾:focus-visible、处理iOSviewport缩放问题。
-
原生<inputtype="date">宽度无法直接用width:100%撑开，因浏览器为其设定了默认min-width（如Chrome约130px），需显式设置min-width:0和box-sizing:border-box才能生效；Flex布局中同样需min-width:0配合flex:1；Safari兼容性最差，建议优先考虑自定义方案。
-
通过重写XMLHttpRequest的open和send方法可拦截AJAX请求，添加认证头、修改请求体或响应数据。2.拦截fetch需替换全局方法，可在请求前修改参数，响应后处理数据。3.使用Proxy可实现动态、可配置的请求拦截。4.注意拦截仅能包裹行为，存在兼容性与调试风险，生产环境慎用。
-
JavaScript中class是基于原型的语法糖，本质为构造函数封装，不改变运行时行为，但强制声明顺序、禁用提升、默认严格模式，并支持私有字段（#）和继承（extends/super）。
-
align-items:center未垂直居中，最常见原因是容器缺少明确高度或子元素为inline元素；需同时满足：父容器为flex、有交叉轴尺寸（如height）、子元素非纯文本或已设为block。
