-
使用float实现两列布局需设置左右浮动及宽度，通过overflow:hidden清除浮动，避免父容器塌陷，适用于旧项目维护。
-
HTML5本身不提供高斯模糊原生API，需依赖CSSfilter:blur()（快捷但粒度粗、近似模拟）或Canvas手动实现（可控但开销大），二者均受限于性能、跨域、精度与导出质量。
-
应使用transform:scale()实现购物车数量变化的微缩放动画，配合will-change:transform或translateZ(0)升层，避免width/height触发重排；用CSS类名控制动画、transitionend清理、pointer-events锁定交互，并为iOS12.0及以下提供opacityfallback。
-
使用Grid划分整体结构，Flex处理内部对齐。通过grid-template-areas定义区域，flex实现链接与图标排列，配合媒体查询适配移动端，提升可访问性，实现响应式页脚布局。
-
浮动容器被文字撑开的典型表现是宽度异常变宽或换行错乱，根本原因是浮动元素未触发BFC且内部文本无换行约束；应优先用max-width配合word-break与overflow-wrap控制断行，并确保父级存在块级上下文。
-
<p>::selection背景色失效最常见原因是浏览器默认样式覆盖或优先级不足，且仅支持color、background-color、text-shadow（仅Firefox）、cursor四个属性，必须同时写标准、-moz-、-webkit-三版本。</p>
-
合理布局提升网页结构与体验，常用方法包括：一、浮动布局通过float实现多列排列，需清除浮动影响；二、Flexbox弹性布局利用display:flex进行单维空间分配，支持主轴与交叉轴对齐控制；三、Grid网格布局采用display:grid构建二维结构，可定义行列及间距；四、定位布局通过position属性精确控制元素位置；五、Bootstrap框架借助预设类快速搭建响应式页面。
-
必须在<head>中添加viewport元标签，否则页面在手机上会缩成一团；需动态设置font-size或使用vw单位适配不同屏幕；点击区域应≥44×44px并用touch-action:manipulation消除300ms延迟；iOS旧版Safari对flex有兼容问题，需针对性写法；真机测试不可替代。
-
JavaScript原型链是对象查找属性和方法时沿[[Prototype]]隐式链接的路径，始于对象自身，逐级向上至null；它通过构造函数的prototype属性、Object.create等实现继承，影响属性访问、instanceof判断及共享引用类型属性。
-
divullia比.nav-link慢，因CSS选择器从右向左匹配，前者需遍历全部a元素再逐层向上验证父级，回溯开销大；后者直接哈希定位class，高效精准。
-
HTML5文档声明必须是<!DOCTYPEhtml>，且必须位于文件最开头、无任何前置字符，否则触发怪异模式导致布局、JS、API异常；常见错误包括BOM、XML声明、模板覆盖或编码问题。
-
background-size动画无效是因为关键词（如cover）不可插值，须用具体数值（如102%98%）；容器需有明确尺寸且避免fixed定位；iOSSafari需加translateZ(0)触发硬件加速。
-
用border设置实线边框最直接，需显式声明solid（如border:1pxsolid#000），否则默认为none；其伸缩性由display类型、box-sizing和内容存在与否共同决定，空元素塌陷是主因。
-
使用video标签的poster属性可设置视频海报图，提升视觉体验。通过poster="图片路径"指定静态封面，建议图片与视频比例一致、大小适配、主题突出，并优化加载性能，增强用户体验。
-
同一CSS颜色值在不同屏幕显示效果不同，因其RGB数值需映射到各设备独有的色彩空间（如sRGB、DCI-P3），而设备色域、白点、gamma等参数各异，且浏览器色彩管理支持不一。
