-
三根线必须用绝对定位而非margin，因transform动画对margin无效，绝对定位可精准控制top和width、不占文档流；父容器需设position:relative，三条线统一用display:block+width:100%，以中间线为轴心对称布局，transform-origin必须设为center，伪元素扩大点击热区。
-
JavaScript链表需手动实现，核心是用对象模拟节点并通过next指针串联；所有操作（访问、修改、插入、删除）必须从头节点遍历，无法随机访问。
-
重置样式被框架覆盖的根本原因是CSS加载顺序决定层叠优先级，需确保reset.css在框架CSS前引入；Bootstrap5的reboot.css与自定义重置易冲突；Tailwind已内置等效重置；iOS表单控件需针对性覆盖UA样式。
-
路由守卫是前端权限控制第一道防线，仅做可见性过滤和轻量准入检查，核心权限必须由后端接口返回并校验；适合拦截未登录访问、角色无权路由及动态菜单过滤，不适用于接口权限、字段级控制或绕过地址栏的假安全。
-
原生<inputtype="color">在Chrome、Edge、Safari15.4+、Firefox112+中可用，旧版Safari和部分安卓WebView不支持，仅显示文本框或空白；值始终为7位小写十六进制（如#a3c4ff），不支持透明度或命名色。
-
HTML原生<progress>标签需同时设置合法value和max值才能正常渲染，缺一不可；须用浏览器前缀伪元素自定义样式；动态更新应避免高频赋值；语义上仅用于任务完成度，不可与<meter>混用。
-
display:none让transition失效，因其是离散属性，无中间状态；应改用visibility+opacity、max-height+overflow或JS强制触发布局等替代方案。
-
父div高度塌陷主因是子元素浮动脱离文档流，导致父容器无法感知其高度；解决法包括overflow:hidden、伪元素清除浮动或display:flow-root；此外需排查绝对定位、显式height:0、Flex/Grid内容缺失及多因素叠加影响。
-
父容器高度塌陷是因浮动元素脱离文档流导致，clearfix通过伪元素触发BFC并清除浮动来解决；标准写法为.clearfix::after{content:"";display:table;clear:both}，需注意兼容性与display设置。
-
本文介绍一种纯HTML+CSS方案，无需JavaScript，即可让有序列表中自动生成的编号（如“(1)”“(2)”）成为可点击的锚点链接，直接跳转至对应列表项的页面锚记位置。适用于Wiki等不支持脚本的静态内容场景。
-
被邮件客户端直接删除的HTML标签主要包括：1.<script>、<iframe>、<object>、<embed>、<form>几乎100%被静默删除；2.<style>在Gmail中完全失效；3.<svg>在iOSMail中可能渲染为空白。
-
隐藏滚动条需通过CSS实现，首先在Shopify主题的自定义CSS中添加::-webkit-scrollbar{width:0}隐藏Webkit浏览器滚动条，再用scrollbar-width:none隐藏Firefox滚动条，确保跨浏览器兼容；该操作不影响网站性能，但可能削弱用户对可滚动性的感知，降低可用性；为保障体验，应提供视觉提示如裁剪内容或向下箭头，并确保键盘导航正常；推荐通过主题编辑器的自定义CSS区域安全添加代码，避免直接修改核心文件，防止更新覆盖或出错崩溃。
-
本文详解如何利用现代CSS选择器（特别是:has()和兄弟组合符）精准选中文档中第一个包含<p>的<section>内的首个<p>的首字母，避免误匹配，并兼顾性能与可维护性。
-
marginauto仅对设置了明确width的块级元素实现水平居中，不支持垂直居中；在flex/grid容器、inline元素或未设width时失效，且受box-sizing和父容器overflow影响。
-
异步组件加载完成前路由守卫不能直接放行，需在beforeEach中await组件import()Promise解析后再next()；推荐用resolveComponent预加载、Suspense兜底、Map缓存已加载组件，并注意SSR场景下的服务端兼容处理。
