-
结构标签嵌套后样式失效主因是CSS选择器未覆盖实际DOM路径或Flex/Grid隐式转换，如navullia不匹配含div.menu的结构；应通过开发者工具检查Styles面板划掉规则、Computed值及继承影响，并用属性选择器、:is()、类名直选或flex:none等策略修复。
-
HTML5原生不支持RTSP（含4K），必须通过流媒体服务器转协议为HLS/WebRTC等；4K播放瓶颈在于编码格式、带宽、解码能力及服务端性能，纯前端方案实为服务端中转，并非浏览器直连。
-
CSS伪类::before/::after无法在多层嵌套树形结构中生成真正连续的连接线，因其仅作用于单个元素盒模型、无全局坐标系，连线实为视觉假象；需规避flex/grid干扰、兼容性问题及动态增删失效等陷阱。
-
淡入淡出通过opacity与visibility实现下拉菜单平滑显示；2.滑动展开用max-height和overflow隐藏内容，模拟slideDown效果；3.侧边栏使用transform或left配合transition实现滑入；4.动画时长200ms–400ms，推荐ease-in-out曲线，避免复杂动画保证性能，结合:focus-within提升可访问性。
-
十六进制颜色写错一位即失效，浏览器仅接受3位或6位合法十六进制（a–f），非法字符或位数错误会导致整条声明静默忽略；rgb()、rgba()、hsl()等函数也需严格遵循参数类型、范围与单位规则，否则同样静默失效。
-
CSS过渡性能瓶颈在于重排重绘，width/height/top/left等布局属性易触发；应优先使用transform和opacity等GPU加速属性，并避免强制同步布局。
-
双击HTML文件可快速打开，但路径含中文、空格或括号易导致Chrome等浏览器加载失败；推荐使用纯英文无空格路径、命令行指定浏览器打开，或VSCode的LiveServer插件启动本地HTTP服务。
-
ChannelMessagingAPI通过MessageChannel创建双端口通道实现跨源双向通信。主页面创建channel，将port1发给iframe，双方用各自端口收发消息，如主页面postMessage、iframe监听并回复。相比postMessage，其优势为通信无需校验origin、更安全高效，适用于父子窗口高频交互场景。
-
一、内联样式将CSS写在HTML标签的style属性中，如<pstyle="color:red;">；二、内部样式表在<head>中用<style>标签定义全局样式；三、外部样式表创建.css文件并通过<linkrel="stylesheet"href="styles.css">引入；四、@import可在CSS或style标签中导入其他CSS文件，需置于规则前；五、JavaScript动态创建style元素并注入DOM，实现运行时样式更新。
-
grid-template-areas与grid-area配合使用可实现语义化布局：容器通过字符串定义区域结构，子元素用grid-area分配到对应区域，提升代码可读性与维护性。
-
外部样式表阻塞渲染但可缓存，2.内联样式加快首屏但不可缓存，3.内联关键CSS并异步加载其余可显著提升性能，4.@import导致链式阻塞不推荐使用。
-
JavaScript引擎通过解析、编译、执行三步处理代码，V8采用Ignition解释字节码+TurboFan对热点函数JIT编译；JS执行会阻塞DOM解析与渲染，async脚本下载后立即执行，defer则延迟至DOM解析完成前按序执行。
-
汉堡变叉动画需用transform-origin精准定位旋转原点：::before绕lefttop转45deg，::after绕leftbottom转-45deg，中杠opacity:0；位移必用transform替代top/left以避免重排，伪元素显隐用opacity+visibility而非display。
-
加了样式却没反应的主因是路径错误、加载顺序不当、浏览器缓存、选择器不匹配或编码问题，而非CSS语法错误。
-
line-clamp不生效的主因是缺失关键声明：必须同时设置display:-webkit-box、-webkit-box-orient:vertical和-webkit-line-clamp:N，且父容器需overflow:hidden；它仅限WebKit内核，不兼容Flex/Grid布局，也不响应动态内容更新。
