-
底部按钮居中应由其容器自身控制。1.justify-items:center仅在按钮分处独立网格单元时有效；2.若按钮同属一个区域，需用.buttons{display:flex;justify-content:center}或grid容器的justify-content实现；3.推荐将按钮组放入独立flex或grid容器，避免依赖父级对齐属性，结构更清晰且兼容性好。
-
mask比clip-path更适合形状合成，因其通过图像定义像素级透明度，支持羽化、多形状交集及alpha渐变；clip-path仅支持硬裁剪。
-
使用灵活单位如auto、minmax()替代固定尺寸可解决CSSGrid中内容截断问题，确保grid-template-rows和grid-template-columns具备弹性，避免因轨道空间不足导致溢出。
-
minmax()函数用于设置网格轨道尺寸范围，确保列或行宽在最小值和最大值间自适应；例如minmax(200px,1fr)使列至少200px宽，且可弹性扩展，结合repeat(auto-fit,minmax(250px,1fr))可实现响应式卡片布局，根据屏幕空间自动调整列数与宽度，提升布局灵活性与内容可读性。
-
margin:auto在flex容器中能居中是因为它会吞噬主轴和交叉轴的剩余空间；前提是父容器为flex且子元素未设置flex-grow/shrink，且交叉轴尺寸必须可计算。
-
forEach不返回新数组，返回值恒为undefined；map按输入长度返回新数组，必须显式return；reduce省略初始值时空数组会报错，应始终传入；链式调用需防御空值。
-
box-shadow的四个参数依次为水平偏移、垂直偏移、模糊半径、扩散半径，方向由前两个值的正负及大小决定；blur-radius过大或overflow:hidden、transform等会干扰阴影显示效果。
-
逗号运算符是返回最后一个表达式值的表达式运算符，常用于for循环更新部分；在声明中逗号仅为语法分隔符，赋值时需括号包裹才生效，但可读性差应慎用。
-
为HTML5搜索框添加loading动画有四种方法：一、CSS旋转动画配合伪元素；二、SVG内联加载图标；三、CSS自定义属性控制动画开关；四、纯CSS无JS状态模拟。
-
能修，但非万能：position:relative通过触发IE6/7私有hasLayout机制修复显示异常，适用于浮动容器、inline-block块、alpha滤镜层等脆弱节点，优先于zoom:1，但需规避z-index混乱、选择器权重不足及冗余DOM干扰。
-
Less不支持函数返回值，需用带参Mixin结合CSS自定义属性模拟；如.calc-hsl-lighten封装HSL亮度调整并用--result存储，配合clamp防超限；多值返回应分命名变量；避免循环中调用复杂Mixin以防编译性能骤降。
-
图片左滑入场需用@keyframes定义translateX(-100%)到translateX(0)，绑定animation并加forwards，确保初始位置在视口左外侧且样式权重足够。
-
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。
