-
flex-wrap用于控制Flexbox子元素是否换行，可选值为nowrap（不换行）、wrap（允许换行）和wrap-reverse（反向换行），常与flex-direction配合实现响应式布局。
-
IE8及更早版本不识别<article>等新标签，需用document.createElement创建并配合CSS声明display:block；html5shiv仅解决元素创建和样式化，不修复API、CSS3选择器或事件行为。
-
grid-auto-flow:dense不能主动填空，仅让未显式定位的网格项在自动放置时尝试填补空缺；它不改变DOM顺序、不响应式重排、不影响已定位项，且可能损害可访问性与性能。
-
HSLA是一种通过色相、饱和度、亮度和透明度定义颜色的CSS格式，格式为hsla(h,s%,l%,a)，适用于创建半透明效果。它常用于模态框遮罩、卡片悬停和文本阴影等场景，如hsla(0,0%,0%,0.6)可为文字区域添加半透黑色背景以提升可读性，同时保留底层图像氛围。相比RGBA，HSLA更直观地调整色调，适合动态配色，但需注意文本对比度和浏览器兼容性。
-
video标签默认非响应式，需显式设置width:100%、height:auto及object-fit；注意父容器布局、iOS全屏限制、viewport配置与固有尺寸影响。
-
使用开发者工具模拟设备、在真实设备测试、借助在线工具验证，并检查CSS布局结构，确保页面适配不同屏幕尺寸。
-
span加position:absolute后消失，因其作为内联元素脱离文档流且宽高坍缩为0；需确保有内容、设宽高、父容器定位上下文正确，并合理设置display值。
-
grid容器未设display:grid时子元素完全不按网格布局，所有grid-*属性失效；必须显式声明display:grid或inline-grid，且需检查computedstyles确认未被覆盖。
-
子元素未自动撑满父容器高度是因flex默认拉伸行为被限制，需确保父容器设置display:flex和明确高度，保持align-items:stretch，并避免子元素设置固定高度或min-height:auto；嵌套时逐层传递弹性布局样式即可解决。
-
全局字体应设在html元素上以确保继承生效；字体栈需多字体兜底，中文字体前置并加引号；失效主因是选择器权重、拼写错误或本地未安装。
-
客户端表格排序通过减少请求、提升交互流畅性，满足用户对即时反馈的需求。利用data-type区分数据类型，结合parseFloat、Date对象和localeCompare确保准确排序，并通过CSS箭头与aria-sort属性实现视觉提示与可访问性，增强用户体验。
-
HTML文档显示乱码或样式异常时，需确保文件扩展名为.html或.htm、保存类型为“所有文件”、统一使用UTF-8无BOM编码、在<head>中声明<metacharset="UTF-8">、服务器响应头含charset=utf-8，并避免不可见控制字符。
-
ChromeDevTools断点需设在可执行语句（如if、赋值），避开var声明/空行/注释；压缩代码须启用SourceMap，动态脚本需Blackbox；条件断点、debugger语句、异步回调断点及console高级用法（table/group/time）可提升调试效率。
-
padding导致内容溢出是因为box-sizing默认为content-box，此时width/height不包含padding，使总尺寸超出容器；改用border-box可解决，但需先确认是否为盒模型问题而非布局、文本流或渲染层原因。
-
link是HTML标签，@import是CSS规则；link并行加载，@import阻塞解析且串行请求；内联style权重最高但无作用域；<style>无位置限制，作用域由选择器决定。
