-
min-width定义元素最小宽度，max-width定义最大宽度，二者结合媒体查询可实现响应式布局适配不同设备。
-
用max-width:100%配合height:auto可使图片随容器缩放且保持宽高比；它设宽度上限而不强制拉伸，比width:100%更安全，适用于所有img标签，但需父容器有明确宽度。
-
JavaScript操作iframe需先获取DOM引用，同源时用contentWindow/contentDocument直接操作，跨域时必须用postMessage通信，并校验origin确保安全。
-
事件委托通过在父元素绑定监听器利用事件冒泡处理子元素事件，减少内存占用、提升性能并天然支持动态内容；核心是用event.target识别目标元素，需选择稳定祖先节点且注意冒泡限制。
-
source标签用于为audio、video和picture元素提供多个备选媒体资源，以提升兼容性和加载效率。1.在audio和video中，通过src指定资源路径，type声明MIME类型，浏览器按顺序检查并选择首个支持的格式，避免因格式不支持导致播放失败；2.在picture中，结合media属性的媒体查询和type属性的格式判断，实现响应式图片加载，优先匹配屏幕条件和格式支持，最终由img标签提供兜底方案；3.为优化性能，应将高效格式如WebP或WebM置于前面，正确书写type属性以避免无效请求，
-
多级缓存策略通过分层设计提升前端数据获取效率：优先从内存缓存读取，未命中则依次查找本地存储、IndexedDB或触发网络请求；配合TTL过期、事件更新、版本控制等机制管理生命周期，并支持按场景灵活配置缓存层级与key规则，在保证性能的同时兼顾数据一致性。
-
使用position:sticky可使元素在滚动时吸附到视口指定位置，结合非fixed背景图实现自然滚动效果，通过半透明背景、backdrop-filter毛玻璃、阴影等样式让sticky元素与背景融合，避免父容器设置overflow:hidden以确保sticky生效，同时保证容器高度足够，最终实现导航栏等组件与页面内容协同滚动的视觉体验。
-
Proxy通过handler拦截对象操作，Reflect提供默认行为与操作方法，二者结合实现数据验证、日志记录、权限控制等高级功能。
-
使用CSS工具类可高效管理margin、padding和border样式，通过预定义类如mt-2、p-4、border-rounded等实现快速布局，结合方向与尺寸命名规范，提升开发效率与代码可维护性。
-
首先检查文件扩展名是否为.html或.htm，并确保保存时选择“所有文件”类型避免误存为.txt；确认代码包含<!DOCTYPEhtml>及完整的<html><head><body>结构；使用W3C验证器修正语法错误；对于需HTTP协议的功能，通过Python启动本地服务器访问；排除浏览器兼容性问题，尝试不同浏览器并添加viewport元标签；最后核对外部资源路径，利用开发者工具排查404错误。
-
JavaScript原型链是基于[[Prototype]]隐式引用的对象继承机制，通过逐级向上查找属性和方法实现复用，终点为Object.prototype.__proto__===null。
-
装饰器模式通过包装对象动态扩展功能，保持接口一致。1.使用高阶函数实现日志、性能监控；2.ES装饰器语法支持类和方法增强，如只读、权限控制；3.手动包装对象方法实现缓存、第三方库扩展。符合开闭原则，可组合多个装饰器，但需注意性能与执行顺序，ES装饰器语法仍处提案阶段。
-
校正HTML背景图需配置background-position控制位置、background-size调整尺寸、background复合属性整合设置、background-origin指定定位基准，并检查盒模型与父容器影响。
-
本文旨在指导开发者正确使用JavaScript的document.querySelectorAll方法通过CSS选择器定位并操作HTML元素，特别是表单输入框。我们将重点纠正一个常见错误：误将完整的CSS选择器用方括号[]包裹，导致选择器失效。通过具体的代码示例，文章将展示如何构建有效的CSS选择器，并利用querySelectorAll遍历匹配元素，实现批量修改其属性值。
-
块元素和行内元素的主要区别在于布局行为、尺寸控制、margin和padding以及默认样式。1.块元素独占一行，可设置宽高；2.行内元素不独占一行，宽高设置通常无效；3.块元素四方向margin和padding生效，行内元素垂直方向通常无效；4.块元素有默认margin和padding，行内元素无。
