-
相对定位元素偏移后仍保留原有空间，不影响其他元素布局。其视觉位置改变但文档流中的占位不变，后续元素按原位置排列，常用于微调或作为绝对定位的包含块。
-
获取DOM元素有多种方法：通过ID用getElementById()返回单个元素或null；2.通过类名或标签名使用getElementsByClassName()和getElementsByTagName()返回动态集合；3.使用querySelector()和querySelectorAll()支持CSS选择器，分别返回首个匹配元素和静态NodeList；4.推荐优先使用querySelector系列因语法统一、灵活性高，注意性能优化与返回值类型差异。
-
flex-wrap:wrap用于允许flex子元素自动换行；设置display:flex和flex-wrap:wrap后，子元素在一行放不下时会折行排列，结合flex宽度与calc()可控制每行数量，适用于卡片网格、标签组等多行布局场景。
-
output标签专为表单中动态显示计算结果而设计，必须通过for属性关联input等控件ID才能启用原生自动更新，否则退化为普通内联元素；需显式设置display和宽高以避免布局抖动，JS操作应优先使用value属性而非innerHTML。
-
使用Flexbox的gap属性替代margin可有效控制按钮组间距，避免首尾多余空白。通过设置display:flex和gap值，如8px，实现按钮间均匀间隔。结合justify-content属性（如flex-start、center、flex-end、space-between）可灵活对齐按钮组，同时保持间距一致。响应式设计中，可用媒体查询调整gap值，适配不同屏幕尺寸。该方法比传统margin更简洁易维护，推荐优先使用。
-
应使用语义化HTML5标签、CSSGrid、Flexbox、BEM命名规范及WebComponents五种方法分块：一用header/nav/main/aside/footer等标签明确功能；二用Grid的grid-template-areas布局；三用Flexbox处理一维流式结构；四以BEM规范命名避免样式冲突；五借WebComponents封装复用区块。
-
1、按F12打开Edge开发者工具，点击“选择元素”图标或使用Ctrl+Shift+C快捷键激活元素选择功能，鼠标变为十字光标后可实时预览并高亮页面中的HTML元素。
-
在React应用中，CSS文件无法直接访问process.env，因此不能在@importurl(...)中拼接环境变量。本文介绍一种安全、标准且无需重复维护多份CSS的方案：通过HTMLdata-*属性注入环境信息，并结合JavaScript动态加载对应CDN样式表。
-
首屏关键样式用内联，其余统一外链。通过构建工具自动提取CriticalCSS并注入HTML，异步加载非关键样式，结合缓存与模块化提升性能与维护性。
-
a标签需根据用途选择语义结构，导航放nav，外链加rel属性，下载用download，锚点确保可聚焦；配合article等标签布局，避免无意义文本和过度嵌套，慎用target="_blank"，交互行为优先使用button。
-
当CSS中使用未定义的自定义属性（如var(--dao-pure-white)）时，浏览器在通过CSSStyleSheet.cssRules读取规则时会降级处理border简写声明，导致各方向的border-*展开属性值为空，仅保留显式设置的border-bottom-color。根本原因是CSS变量作用域缺失或未初始化。
-
article适合封装博客文章、新闻稿、论坛帖子、用户评论、产品卡片等语义上独立完整、可脱离上下文传播的内容。
-
gap仅在flex容器上对直接子元素生效；常见失效原因包括flex-wrap换行后行间距不受控、align-items:stretch导致高度差异、子项margin叠加、flex拉伸引发视觉错觉；正确用法需清margin、明方向、分设row/column-gap、禁用%单位。
-
应使用<mark>标记当前上下文中具有相关性或需视觉突出的文本，如搜索关键词、引用条款；它专为“高亮”设计，语义区别于强调重要性的<strong>和无语义的<span>。
-
CSS定位是否脱离标准流取决于position取值：static和relative不脱离，absolute、fixed和sticky（触发后）脱离。脱离流元素不占空间，影响后续布局。
