-
float元素导致父容器高度塌陷，因脱离文档流；推荐用overflow:hidden或display:flow-root触发BFC解决，避免clear:both冗余标签；现代布局应优先使用flex/grid而非float。
-
opacity会使子元素一同变透明，因其作用于整个渲染层；而rgba()仅影响指定颜色属性，不波及后代元素。
-
overflow:auto仅在内容真正溢出限定高度的容器时显示滚动条；需设置height/max-height，避免absolute定位或flex-shrink:0导致计算失效，且需配合white-space、word-break等处理文本溢出。
-
图片容器必须设为position:relative，否则absolute遮罩层会脱离预期位置；遮罩层应使用rgba()设置背景透明度以避免文字发虚；尺寸需设为top:0;left:0;width:100%;height:100%或inset:0确保铺满；图片用display:block和object-fit:cover优化显示。
-
在Bootstrap5的Masonry布局中，因元素动态重排导致原生scrollposition恢复失效；需确保滚动恢复逻辑在Masonry渲染完成后再执行，而非仅依赖window.onload。
-
Flexbox中间元素不居中需检查父容器display:flex及flex-direction，单子元素用margin:auto最简，多子元素则对中间项设margin-left/right:auto并配合align-items:center。
-
最轻量纯CSS画线方案是border，水平线用border-bottom，垂直线推荐background替代border以避免盒模型干扰；斜线用::after伪元素配合transform；高精度曲线用SVG；动态交互线用Canvas。
-
document.title是最直接有效的动态改标题方式，它直接控制HTML页面的<title>标签内容，赋值后立即反映在浏览器标签页上，无需操作DOM节点或重新渲染。
-
CSS中背景默认延伸至边框下方，通过background-clip可控制范围；结合border-style、border-image和border-radius等属性，能实现渐变、圆角、阴影等丰富效果，提升页面视觉层次与可读性。
-
调整HTML字体大小主要通过CSS的font-size属性实现，支持像素、em、rem等单位。1.可使用内联样式快速设置单个元素；2.推荐通过class在CSS中统一管理，提升复用性；3.采用相对单位如rem配合媒体查询，实现响应式适配不同屏幕，确保多设备下的阅读体验，保持样式统一与维护性。
-
Generator函数因能暂停和恢复执行，适用于惰性求值、无限数据流处理、异步流程管理、自定义迭代器及状态机等场景，尤其在需精细控制执行节奏时不可替代。
-
video.duration返回NaN是因元数据未加载完成，须监听loadedmetadata事件并在isFinite(video.duration)为真时读取；动态设src需重新绑定事件；React中需用useRef和useEffect正确管理生命周期。
-
伪元素必须配合content属性使用，否则不渲染；默认为行内级，需设display才能设置宽高；无法被JS操作或绑定事件，仅能通过宿主元素class或data属性间接控制。
-
HTML中无法可靠对齐列表项的根本原因是用空格占位，应改用CSS控制布局：如inline-block+text-align、dl语义化标签或flex布局。
-
答案：CSS滚动效果通过overflow控制溢出行为，结合scroll-behavior实现平滑滚动，利用scroll-snap创建吸附效果，并可通过伪元素和标准属性自定义滚动条样式以提升用户体验与品牌一致性。
