-
是的，多个<link>标签会拖慢页面，尤其在HTTP/1.1下引发连接排队与渲染阻塞；HTTP/2虽缓解但仍有开销；弱网下小文件丢包率更高；应合并通用样式、响应式CSS及稳定preload资源，但第三方库、按路由异步样式及关键内联CSS除外；推荐构建时自动合并并确保缓存校验准确。
-
关键CSS应内联至HTML的<head>中，仅包含首屏元素必需的最小样式集合，如导航栏、大标题、主按钮及核心卡片的基础结构样式，排除非首屏交互与响应式样式；推荐用Penthouse等工具自动提取并压缩至14KB内，配合preload加载非关键CSS，并通过DevTools和Lighthouse验证生效。
-
后代选择器通过空格选中任意层级的嵌套元素，如.containerp{}会影响所有后代p元素；而子选择器用>仅作用于直接子元素，需注意作用范围避免样式冲突。
-
推荐用transform实现绝对定位元素水平垂直居中：设position:absolute、top:50%、left:50%，再用transform:translate(-50%,-50%)反向偏移，无需知道宽高，兼容IE9+。
-
洋葱模型指Koa中间件的双向嵌套执行机制，请求时逐层进入（A→B→C），响应时逆序返回（C→B→A），形成如洋葱般的调用结构。
-
使用标签创建超链接，通过href指定地址，target控制打开方式，建议添加rel="noopener"提升安全性，还可链接网页、文件、邮件和电话。
-
应采用五种策略隐藏文件真实路径：一、反向代理屏蔽；二、URL重写拦截；三、文件ID映射；四、限制Web目录可执行范围；五、CDN路径混淆。
-
用position:fixed+transform居中是最稳妥的方案，需同时设置left:50%、top:50%和transform:translate(-50%,-50%)，因transform的50%基于自身宽高，不受视口尺寸影响，兼容IE9+，且响应式宽度下仍精准居中。
-
float让父容器高度为0是因为其脱离文档流，父容器计算高度时忽略浮动子元素；正确清除需在浮动后添加处于文档流中的块级元素，或使用display:flow-root创建BFC。
-
HTML5动画循环由animation-iteration-count（CSS）、requestAnimationFrame链式调用（JS）或SVG的repeatCount/repeatDur控制，三者机制不同需避免混用导致状态不同步。
-
mousedown时应通过getBoundingClientRect()计算鼠标相对元素左上角的偏移并存储；mousemove中用transform:translate()更新位置并启用GPU加速；mouseup和mouseleave需绑定document以防事件丢失；移动端需兼容touch事件，取touches[0]坐标并判断单点触控。
-
可借助可视化工具、在线服务、Photoshop内置功能或低代码框架将PSD转为HTML5。具体包括：一、用AdobeXD/Figma导出响应式HTML5代码；二、通过psd2html.com等平台AI识别图层生成语义化代码；三、利用PhotoshopCC2019+“导出为Web”功能直接输出HTML5+CSS3；四、用Webflow等低代码平台对自动结果进行交互微调。
-
使用CSS的transition、transform和媒体查询创建响应式按钮动画，提升跨设备用户体验。首先定义基础样式并添加悬停上浮效果：.button设置内边距、颜色、圆角及transition过渡效果，:hover状态改变背景色、位置和阴影。针对移动端优化，在@media(max-width:768px)中增大字体与间距，利用:active配合scale缩放模拟按下反馈。在弹性布局中采用flex或grid确保定位稳定，通过will-change:transform提升渲染性能，避免使用margin或p
-
在CSS中制作数据流程图，核心在于利用盒模型、定位和伪元素构建节点与连线。1.节点通过div元素实现，结合背景色、边框、阴影等样式形成可视化单元；2.连线使用伪元素或独立div，通过绝对定位和transform模拟直线或直角连接；3.布局采用Flexbox或Grid实现结构化排列；4.箭头通过旋转伪元素或border技巧绘制；5.对于复杂曲线或动态调整场景，建议使用SVG替代CSS以提升可维护性。
-
box-sizing:border-box可解决网页布局中因边框和内边距导致的尺寸失控问题，使width和height包含内容、padding和边框；默认的content-box模式下，padding和border会额外增加元素总尺寸，易造成表格或卡片布局溢出；通过设置table或card元素的box-sizing为border-box，可确保元素宽度包含内边距和边框，避免撑破容器；推荐全局统一设置,::before,*::after{box-sizing:border-box;}以实现一致的尺寸控制；应
