-
直接改height不生效，因Bootstrap进度条高度由.progress的height和.progress-bar的line-height共同决定，且受::after伪元素影响；需同步调整三者并匹配border-radius。
-
用li:nth-child(3)可选中父元素下第3个子元素且为li的元素，但若前有其他标签则可能不匹配；精准选第3个li应改用li:nth-of-type(3)。
-
用<img>的width/height属性仅缩放不裁剪；真正裁剪需容器设宽高+overflow:hidden+object-fit:cover或绝对定位；精确控制用clip-path或Canvas；服务端裁剪更优但需校正EXIF方向。
-
sticky定位失效主因是父容器overflow非visible或未设top值，需确保最近可滚动祖先无overflow:hidden/auto/scroll且显式声明top，同时避免transform等创建新层叠上下文的属性。
-
$subscribe是Pinia监听状态变更最轻量推荐方式，监听mutation提交而非响应式赋值，接收mutation和state参数，支持埋点、过滤、聚合、防抖及插件化全局注册。
-
Normalize.css更优，因其校准而非清零默认样式，保留语义化标签支持与有用行为，仅修复浏览器差异；需最早引入、避免全局重置覆盖，并非所有场景都适用。
-
font-display:swap是@font-face中控制字体加载时文本渲染行为的属性，它让浏览器立即用系统字体显示文本，待自定义字体加载完成后再无感替换，从而避免移动端因网络波动导致的白屏或文字闪跳。
-
移动端断点不能照搬桌面尺寸，因现代设备的视口缩放与物理像素脱钩；应基于内容溢出临界点，用min-width递增式增强，配合正确viewport设置（width=device-width），避免历史固定值和max-width覆盖。
-
使用Flexbox、Grid和多列布局可实现图片画廊。1.Flexbox通过flex-wrap和百分比宽度实现响应式排列；2.Grid利用grid-template-columns自动适配列数，更简洁；3.瀑布流用column-count创建不等高多列，适合异形图。推荐优先使用Flexbox或Grid。
-
list-style-type:none能彻底隐藏ul/ol默认列表符号，但不处理::marker伪元素、背景图或内联SVG等自定义标记；需同步重置padding-left:0（及margin:0）以消除缩进，并注意简写list-style或高权重选择器可能覆盖该声明。
-
最稳、最通用的做法是给<img>加display:block和margin:0auto；若图片混排在文本流中，优先用父容器text-align:center。因<img>默认为行内元素，margin:auto对其无效，必须显式设为块级才能触发自动外边距计算；text-align:center失效常因父容器无宽、被浮动/定位覆盖或错误写在<img>自身上；需双向居中时推荐父容器用display:flex;justify-content:center;align-items
-
::selection仅支持color和background-color两个属性，不继承父元素颜色，需显式声明；其他属性如text-shadow、font-size等无效，且移动端（尤其iOSSafari）支持有限。
-
mix-blend-mode在IE和旧版Safari中不支持，连前缀也无效；应使用@supports检测并仅对Chrome41+、Firefox32+、Safari8+/iOS9.3+启用，且不可用于关键视觉信息。
-
SpeechRecognition通过JavaScript调用WebSpeechAPI实现，需兼容性检测并用用户手势启动；interimresults和continuous决定识别模式；lang必须设为'zh-CN'且在start()前配置。
-
box-shadow参数顺序为水平偏移、垂直偏移、模糊半径、扩散半径（可选）、颜色；多层需逗号分隔于同一声明；伪元素承载更稳妥；推荐rgba()控透明度。
