-
CSS可通过JavaScript动态注入实现CSS-in-JS，主要方式包括动态创建style标签、操作CSSStyleSheetAPI及使用emotion等库，适用于组件化封装、主题切换与运行时样式生成。
-
动态HTML与静态HTML的根本差异在于：1.静态HTML是内容固定的网页，服务器直接将预写好的文件发送给浏览器展示，内容不会随用户、时间或数据变化而改变；2.动态HTML则能根据用户行为、数据更新或时间变化实时生成或调整内容，具备交互性和响应性，主要依赖JavaScript操作DOM、CSS3实现动画过渡、以及服务器端编程结合数据库动态填充内容，从而实现个性化和实时更新的用户体验。
-
常见错误是未将图片设为块级元素并设置宽高，因shape-outside仅对浮动块盒生效；SVG需内联、坐标对齐、配shape-margin；Firefox不支持外链SVG且仅认content-box/border-box。
-
WebSocket需服务端配合、状态管理、错误重连和协议设计；常见问题包括URL协议错误（须用ws/wss）、连接拒绝、关闭异常及JSON序列化要求；应检查readyState、实现心跳与指数退避重连，并重视消息ID与离线队列。
-
该用:is()替代重复选择器时，是在多个容器下样式相同的元素场景，如.headera、.footera、.sidebara；它支持多选择器“或”逻辑，需至少两个并列选择器，且能容错无效项，但会继承内部最高权重。
-
clamp()在margin/padding中按最小值、首选值（需用vmin等可伸缩单位）、最大值线性插值，非自动响应；需设合理上下限、避免单位混用、提供fallback、统一基准并抽离为CSS变量以保维护性。
-
移动端布局抖动源于图片/视频加载后重排，核心是提前预留正确容器空间；aspect-ratio是最直接解法，但须配合width/max-width使用，且需注意Safari兼容性、宽高比动态适配及Flex/Grid中的失效场景。
-
最值得用且不易踩坑的CSS缩写属性是margin、padding、border、background、font；它们高频、语义清晰、副作用可控，覆盖80%以上重复声明场景，但需注意全量重置子属性的隐性覆盖风险。
-
gap-y在Flex容器中不生效，因CSS规范仅支持单值gap；仅Grid和Safari16.4+部分支持gap-y，推荐用gap-4、Grid或mb-4回退，并避免与margin混用。
-
CSS自定义属性通过--定义变量，配合var()函数实现值复用，提升样式维护性。示例：:root{--primary-color:#007bff;}，.button{background-color:var(--primary-color);}，支持默认值、作用域与JavaScript动态修改，适用于主题切换与响应式设计，现代浏览器广泛支持。
-
“权限不足”通常卡在目标位置不支持静态文件直接运行，而非代码或浏览器问题；常见于内网服务器、对象存储未开静态托管、误传至需后端解析路径，或Linux目录权限/用户组限制导致FTP无法写入。
-
使用Flexbox、Grid和多列布局可实现图片画廊。1.Flexbox通过flex-wrap和百分比宽度实现响应式排列；2.Grid利用grid-template-columns自动适配列数，更简洁；3.瀑布流用column-count创建不等高多列，适合异形图。推荐优先使用Flexbox或Grid。
-
source标签的核心用途是为多媒体内容提供备选方案，通过在video、audio或picture元素内指定多个源，让浏览器根据格式支持、设备特性或网络状况选择最合适的一个；2.关键属性包括src（指定资源路径）、type（声明MIME类型以判断兼容性）、media（设置媒体查询用于响应式图片）、srcset（提供不同分辨率的图片选项）和sizes（定义图片在不同条件下的布局宽度）；3.优化策略包括：将高效格式（如WebM、WebP）的源放在前面以提升加载速度、正确书写type属性避免无效请求、合理使用s
-
HTML中连续空格被合并为一个且首尾空格被忽略，这是规范行为；最常用的是 实体，它表示不间断空格，不会被合并或丢弃，适合词内分隔和对齐排版。
-
HTML转义本质是替换字符实体，即将<、>、&、"、'等有特殊含义的字符替换成对应命名或数字字符实体，如<被浏览器渲染为<。
