-
created阶段适合发起异步请求、初始化非DOM状态、订阅事件；mounted是DOM操作的正确时机，可安全访问this.$el和this.$refs，执行第三方库初始化、聚焦、尺寸获取等，SSR下需注意浏览器API兼容性。
-
使用:focus伪类可实现输入框聚焦高亮，1.通过设置border-color改变边框颜色；2.结合box-shadow添加发光效果；3.适用于input、textarea等元素；4.需添加outline:none避免默认样式冲突，提升表单交互体验。
-
本文介绍如何使用一个简洁、高效的正则表达式，从结构化日志行中同时捕获“特定标记前”的时间戳与“特定标记后”的数值序列，并通过JavaScript实现批量提取，返回结构化二维数组结果。
-
:valid伪类仅对具备原生校验机制的表单元素生效，需含required、语义化type（如email/number）或pattern；空值在非required字段中默认valid，但type="email"为空时为invalid；状态由浏览器实时计算，不响应JS直接改value；兼容现代浏览器但不支持IE；不可替代业务或后端校验。
-
HTML5网页发布关键在于路径正确、服务可用、域名可达；GitHubPages需严格遵守仓库名和分支规则，Vercel/Netlify需配置路由回退，FTP部署须注意路径、大小写与权限，调试优先查Network面板。
-
使用type="password"可创建密码输入框，通过小眼睛图标用JS切换显示隐藏，结合HTTPS、长度限制和确认框提升安全与体验。
-
Leaflet地图嵌入HTML需三步：①为map容器设宽高；②按序引入leaflet.css、leaflet.js并确保DOM就绪后初始化；③检查瓦片URL、referer限制及坐标系匹配。
-
overflow:hidden对多级嵌套失效是因为它只作用于自身形成BFC的元素，中间未触发BFC的容器会导致溢出“穿透”；需确保真正截断的那层明确设置该属性，并注意flex/grid中min-width:auto、绝对定位脱离文档流及多层嵌套的性能问题。
-
本文讲解如何在页面刷新后仍能准确判断DOM元素是否可水平滚动，并动态显示左右导航箭头，解决useEffect初始检查失效的问题。
-
使用grid-auto-rows实现响应式行高需结合minmax()、fr单位和媒体查询。1.minmax(80px,auto)设置最小行高并允许内容撑开；2.全屏布局用grid-auto-rows:1fr均分视口高度；3.媒体查询在不同断点调整列数与行高，如大屏3列60px、小屏单列40px；4.内容自适应场景用minmax(120px,max-content)平衡可读性与扩展性，配合flex布局优化卡片内容排列。
-
行内元素不能设置宽高是因为其尺寸由内容决定，设计初衷是保持与文本同行。解决方法是通过display:inline-block或block等改变显示模式，从而支持宽高设置。
-
HTML5中class属性用于样式控制和JavaScript操作，需在起始标签内以空格分隔多个合法类名；CSS用“.类名”选择器复用样式；应语义化命名并避免冲突；JavaScript可通过classList动态增删切换单个或多个类。
-
class名重复或嵌套过深易致样式冲突与DOM耦合，BEM命名+作用域限定可切断冲突链；须禁用标签/ID选择器、强制block唯一前缀、元素修饰符挂靠block、样式包裹在:scope或data-component下，并通过stylelint和CI拦截违规写法。
-
卡片组件通过CSS动画可实现悬停放大、3D翻转等交互效果，提升用户体验。
-
Chrome浏览器中，SVG元素的x2="calc(100%-20px)"等CSS函数值在父容器尺寸动态变更时不会自动重新计算，导致视觉未更新；该行为属已知兼容性限制，非bug，推荐用padding+100%的纯CSS方案替代。
