-
CSSNano通过压缩和优化CSS代码减小文件体积，提升网页加载速度与渲染性能。它作为PostCSS插件，可集成于Webpack、Gulp等构建流程，配合Sass/Less预处理器和Autoprefixer协同工作，先由预处理器编译为标准CSS，再经PostCSS管道进行最终优化，确保代码精简且兼容。默认预设preset:'default'提供安全高效的压缩，包括移除注释、空白、合并规则等；进阶优化如reduceIdents、zindex需谨慎启用，避免影响JavaScript选择器或层叠顺序。实际应用中
-
flex-basis定义初始尺寸，flex-grow控制剩余空间扩展比例，flex-shrink决定溢出时压缩比例，三者共同决定Flex子元素的空间分配，推荐使用flex简写属性统一设置。
-
toRef和toRefs用于从响应式对象中安全提取属性并保持响应性，避免解构导致的响应丢失；toRefs转换所有一级属性为ref，toRef精准桥接指定属性，均不复制数据，仅建立引用。
-
使用justify-content:center实现水平居中，需先设置父容器display:flex；子元素无论宽度如何均可居中，若需垂直居中可添加align-items:center。
-
JavaScript尾调用优化（TCO）是复用栈帧避免溢出的技术，要求严格模式、尾位置调用、无arguments/caller/callee引用、静态可确定目标，但主流引擎均未实际支持，应优先使用循环替代。
-
ReflectAPI提供了更规范的对象操作方法，如Reflect.get/set精确读写属性并支持this绑定，Reflect.has替代in操作符判断属性存在性，Reflect.defineProperty/deleteProperty安全定义与删除属性并返回布尔值，Reflect.ownKeys获取包括不可枚举和Symbol的所有自有键，Reflect.apply/construct明确函数调用与构造行为，提升元编程控制力与代码一致性。
-
使用radial-gradient()可创建圆形或椭圆的径向渐变，语法为radial-gradient([shapesize]atposition,start-color,...,end-color)；2.shape定义形状如circle或ellipse，size控制渐变范围如closest-side或farthest-corner，position设置中心点如topleft；3.颜色值按顺序定义渐变节点，支持多色过渡；4.示例包括从中心蓝到白的圆形渐变、中心移至左上角的红黄绿三色渐变，以及基于容器边距响
-
SublimeText是编辑器而非HTML5运行环境，需正确配置语法识别、Emmet模板、代码格式化及本地服务才能高效编写HTML5页面。
-
本文详解如何配置Tippy.js直接复用页面中已存在的<popup-content>等DOM元素作为tooltip内容，避免innerHTML复制导致的响应式更新失效问题，并保持元素在DOM中的原始生命周期。
-
@import由CSS解析，延迟加载易致FOUC；2.<link>为HTML标签，解析时即并行加载，提升渲染速度；3.@import限于CSS内使用且需前置；4.<link>置于HTMLhead中，支持media条件加载更优；5.@import影响性能，不利优化，推荐优先使用<link>。
-
内联样式优先级最高，因其权值为1000且直接绑定DOM元素；误用场景包括替代reset.css、字符串拼接style、滥用!important；适用场景为动态值、服务端微调、DOM直操作；可被!important（外部）、CSS变量、ShadowDOM例外覆盖。
-
浮动在CSS中主要用于实现图文混排，通过float:left或right使文字环绕图片，并配合margin优化间距，结合overflow:hidden和媒体查询可构建响应式多媒体卡片布局。
-
最直接有效的解决方式是在父级容器上设置overflow:hidden，这是CSS控制视觉裁切的标准做法，能确保子元素transform溢出部分被自动裁切，且兼容flex/grid布局。
-
使用CSSposition:sticky实现导航栏粘性定位，需设置top:0并避免父容器阻断属性；旧浏览器可用scroll事件或IntersectionObserver模拟，也可引入sticky-js库快速兼容，同时注意iOSSafari的特殊限制与修复。
-
<p>按钮加边框后变大是因默认box-sizing:content-box导致边框额外增加尺寸；设为border-box可使边框向内收缩，保持设定宽高不变，推荐全局设置*{box-sizing:border-box;}。</p>
