-
min-width和max-width用于限制元素宽度上下界，优先于width等规则生效；与flex/grid配合时控制压缩与拉伸边界；响应式中推荐用媒体查询的min-width而非元素级属性；IE11不支持calc()混合单位，且对inline元素无效。
-
使用aspect-ratio和object-fit可实现响应式图片裁切，通过设置容器宽高比并用object-fit:cover裁剪图片，确保图片填充容器且保持比例，常用padding-bottom技巧兼容性好。
-
Webpack核心配置必须理解entry、output、module.rules和plugins四大模块，漏配或错配会导致打包失败；其本质是权衡决策而非简单填空，每项配置均影响运行时行为与产物结构。
-
该错误并非项目代码问题，而是由Chrome浏览器中某款扩展（如QuillBot）劫持并尝试加载本地字体资源所致；只需临时禁用相关扩展即可立即解决，无需修改HTML、CSS或配置manifest文件。
-
HTML语义化标签指具有明确含义的标签，如<article>、<nav>等，能清晰表达内容角色；HTML5引入<header>、<main>、<section>、<aside>、<footer>等新标签，分别用于页面头部、主体内容、章节划分、侧边栏和底部信息；使用语义化标签可提升可访问性、利于SEO、增强代码可读性与维护性，并助力响应式设计；实际开发中应避免滥用<div>，注意嵌套逻辑，结合ARIA属性优化辅助
-
外部CSS不生效最常见原因是href路径错误和浏览器缓存，其次为link标签位置/拼写错误及样式被后加载CSS覆盖；应优先检查Network面板是否返回404或非200状态。
-
::first-letter伪元素仅对块级容器中第一个字母或汉字生效，需避免flex/grid布局，支持color等文本属性但background在旧Safari不稳定，首字下沉推荐float+font-size+line-height组合，中文需注意Safari兼容性，禁用伪元素嵌套。
-
本文详解在Next.js应用中，如何利用router.push()传递动态路由参数（如/user/[id]中的id），并在目标页面中安全、可靠地读取该参数用于数据请求，避免硬编码或依赖localStorage。
-
Tooltip组件通过data-tooltip属性为元素添加提示信息，使用JavaScript监听鼠标事件并动态创建、定位提示框。核心逻辑包括：利用getBoundingClientRect计算位置，确保提示框不越界，并通过append/remove控制显示与隐藏。支持多种元素且无需额外DOM嵌套，可扩展自定义位置、动画和富文本功能，轻量易集成。
-
<mark>标签本身性能开销极小，真正影响首屏速度的是不当CSS样式、大规模无节制渲染及客户端动态插入等误用行为。
-
Grid容器需设position:relative，因absolute定位依赖最近已定位祖先，而grid容器默认static不构成定位上下文，否则子元素将相对于视口定位。
-
禁用date输入框原生校验的两种可靠方式是：①将type="date"改为type="text"并用JS接入第三方日期选择器；②保留type="date"但在表单上添加novalidate属性，同时需自行补全JS验证。
-
::after伪元素通过content属性在元素后插入装饰性内容，常用于添加图标、动画下划线、气泡三角等视觉效果，提升页面美观与可维护性。
-
给ul设置display:flex并配合justify-content、gap和flex-wrap等属性实现li横排与响应式布局，避免使用float、inline-block等过时或易出错方式。
-
解构赋值和扩展运算符是ES6重要特性，前者用于从数组或对象中提取值赋给变量，支持默认值、重命名和嵌套结构，常用于函数参数；后者通过...展开可迭代对象，实现数组合并、对象扩展及函数参数传递，并能结合剩余参数收集多余项。两者提升代码简洁性与灵活性，广泛应用于现代JS开发。
