-
HTML原生<inputtype="number">不支持直接显示序数文本（如"1st"），但可通过JavaScript动态转换数值并渲染到外部元素，实现视觉上的序数展示。
-
本文介绍如何利用IntersectionObserverAPI，在页面滚动至指定区域时精准控制章节标题的字体大小变化，特别适用于Elementor构建的WordPress粘性分段布局，解决因sticky定位导致传统scroll监听失效的问题。
-
<strong>表示内容具有强语义重要性，影响读屏器语调但不提升SEO权重，不可嵌套强化，区别于仅作视觉加粗的<b>和表语气的<em>，不应滥用作样式控制。
-
本文介绍如何利用CSS媒体查询，在移动端图像背景与文字重叠导致可读性下降时，精准、无JavaScript地切换文本颜色，提升响应式体验。
-
hover放大无动画因未加transition或位置错误；需在常态样式写全transition:transform0.2sease；亚像素模糊可加will-change:transform；移动端需JS或:active替代:hover；scale不占位应配transform-origin且避免影响布局。
-
推荐使用addEventListener绑定事件，支持多监听、捕获/冒泡控制；onclick写法易出错且耦合结构与行为；jQuery的on()支持事件委托，适合动态元素。
-
WebSocket通过newWebSocket(url)建立持久双向连接，支持ws/wss协议；监听open/close/error/message事件处理状态与消息；send()发送数据需确保readyState为OPEN；需服务端WebSocket支持及Nginx等中间件配置Upgrade头。
-
纯CSS无法让伪元素边框自动贴合文字长度，但可用transform:scaleX()配合inline-block容器模拟可变长效果；需设width:100%、transform-origin:leftcenter，并处理换行、继承、居中及兼容性问题。
-
合理设置Grid容器与项目的背景及边框颜色可提升视觉层次与可读性，通过background-color、border和gap等属性搭配实现清晰布局；利用伪类与媒体查询增强响应式表现，结合CSS自定义属性统一管理配色，提高维护性与扩展性。
-
纯HTML实现返回顶部需用<ahref="#top">指向带id="top"的顶部元素（不可设在<body>），配合html{scroll-behavior:smooth}启用平滑滚动，固定按钮需设z-index≥100并处理iOS兼容性；JS仅在路由、IE兼容或动态偏移时必要。
-
HTML5实现元素转动动画有五种方法：一、CSS3transform配合@keyframes；二、JavaScript动态修改style.transform；三、CanvasAPI的save/rotate/restore；四、SVGtransform属性或SMIL动画；五、WebAnimationsAPI精确控制。
-
box-shadow支持逗号分隔多层阴影，从前到后叠加，无需嵌套元素；外阴影默认、内阴影需inset；典型卡片用04px12px-2pxrgba(0,0,0,0.1)和inset01px2pxrgba(0,0,0,0.05)组合。
-
HTML<select>元素无法通过CSS的overflow属性控制下拉列表滚动，因其弹出菜单由系统/浏览器UI层独立绘制、脱离DOM；可靠方案仅有两个：一是用size属性转为多行常驻列表并配合height和overflow-y:auto，二是用JavaScript构建完全自定义下拉组件以实现滚动、搜索及可访问性支持。
-
应使用伪元素::before实现独立遮罩层，而非直接在背景图上叠加rgba()；需设置容器position:relative、z-index分层，并可配合渐变或background-blend-mode提升适应性。
-
点击不到浮动元素？其实是层叠上下文没对齐浮动元素本身不创建新的层叠上下文，float只影响文档流和盒模型位置，不改变z-index的生效条件。所以“点击穿透”往往不是浮动本身的问题，而是你期望响应点击的元素被其他元素（比如父容器、兄弟节点或伪元素）视觉遮挡却未参与层叠排序。为什么加position:relative有时能“修复”点击问题给浮动元素加position:relative的本质作用是让它成为层叠上下文的“参与方”——哪怕没设z-index，它也会在层叠顺序中获得一个确
