-
Tailwind与Bootstrap颜色体系本质不同：前者是亮度阶梯原子类（如red-50到red-900），后者是语义绑定变量（如$danger），直接替换class会导致色调丢失、一致性破坏；迁移需同步配置theme.extend.colors并避免纯黑白基础色，深色模式处理逻辑也截然不同。
-
纯CSS无法监听外部样式表加载完成，必须用JS监听link.onload事件触发类名切换，再通过伪元素实现Loading动画效果。
-
虚拟DOM通过JavaScript对象模拟真实DOM，结合diff算法高效比对新旧节点差异，仅将最小更新应用到真实DOM。利用同层比较、类型判断和key标识，避免全量渲染，提升性能。关键在“先算再改”，实现开发体验与运行效率的平衡。
-
rgba()的alpha值为0–1小数而非百分比，如rgba(0,0,0,0.5)有效，rgba(0,0,0,50)无效；它仅作用于颜色本身，不影响子元素，与影响整个元素及其后代的opacity有本质区别。
-
CSSfilter:grayscale()是最快实现黑白效果的方式，兼容现代浏览器且无需JS；动态切换可用class控制；IE需SVG或Canvas回退；Canvas适合精细图像处理但性能较低；SVG滤镜更稳定可控。
-
Hex颜色偏色主因是色彩空间不一致、系统级设置干扰、透明度叠加错觉及显示器未校准；需统一使用sRGB、关闭美化功能、在纯净环境中验证。
-
HTML5废弃了<font>、<center>等表现型标签及align等属性，须用CSS替代；语义标签如<section>需配标题，不可盲目替换div；DOCTYPE必须为<!DOCTYPEhtml>，编码声明用<metacharset="utf-8">且置于head最前；表单新属性需JS降级兼容。
-
表头单元格（th）默认加粗且居中显示，便于区分数据；文本通常水平居中、垂直居中，继承字体但样式更突出，具体受浏览器默认样式及CSS重置影响。
-
使用外边距控制浮动列间距，需合理设置每列margin并清除浮动。例如三列布局：width:30%，margin-right:4.66%，末列margin-right:0，总宽度控制在99.5%以内，配合clearfix防止塌陷。
-
relative定位“不占位却还占位”是因为元素仍在文档流中，原始位置被保留，仅视觉偏移；absolute失效主因是缺少已定位祖先，需父级设relative以提供定位上下文。
-
校正HTML页面布局与样式错误需五步：一、验证HTML语法并修复结构；二、重置CSS消除浏览器差异；三、排查盒模型与定位冲突；四、分离结构与样式职责；五、检测响应式断点与媒体查询失效。
-
设置width和height固定尺寸；2.使用box-sizing:border-box包含padding和border；3.通过overflow控制内容溢出，确保盒模型稳定不変。
-
使用CSSGrid实现响应式图片画廊，关键在于grid-template-columns配合minmax()和auto-fit。容器设为display:grid，使用repeat(auto-fit,minmax(200px,1fr))让列数自适应屏幕宽度，小屏少列、大屏多列；gap和padding优化间距；img设置width:100%、height:auto保证等比缩放不溢出；可选添加overflow:hidden和:hover缩放提升视觉效果；通过@media(max-width:480px)设1fr
-
最可靠方案是用Flex或Grid布局替代float/inline-block；Flex适用于均匀分布，Grid适合固定列数；需规避vertical-align和line-height导致的偏移及最后一行塌陷问题。
-
用position:absolute叠加图片需父容器设position:relative，img2用absolute+top/left定位，居中用top:50%;left:50%;transform:translate(-50%,-50%)，z-index显式设置更稳妥。
