-
答案：统一使用border-box盒模型，采用相对单位和现代布局技术实现响应式设计。通过设置box-sizing:border-box、使用百分比或rem等相对单位、结合Flexbox与Grid布局，并合理调整padding与margin，确保元素在不同屏幕尺寸下稳定呈现，避免溢出和计算偏差，提升响应式布局的灵活性与可维护性。
-
内联关键CSS可缓解FOUC问题，即仅将首屏必需样式（如导航栏、标题、布局容器等）提取并内联至<style>标签，避免全量CSS或@import/@font-face，配合preload、font-display:swap及defer/async脚本效果更佳。
-
最直接有效的方法是用CSS的box-shadow配合display:block；需避免overflow:hidden截断阴影，控制v-offset和blur实现贴边效果，圆角或透明图推荐filter:drop-shadow()。
-
答案：优化Canvas性能需减少绘制调用、仅重绘变化区、避免频繁像素操作、使用requestAnimationFrame、优化图像绘制。核心是“少画、准画、快画”，通过合并路径、分层管理、缓存和预加载等手段提升渲染效率。
-
CSS加载闪烁（FOUC）是指HTML先渲染无样式的结构，待CSS下载解析后页面突然跳变成最终样式。优化需三管齐下：内联首屏关键CSS（≤12KB）、预加载剩余关键CSS（rel="preload"as="style"+onload回填）、非关键CSS用media属性延迟加载。
-
本地双击打开HTML文件时video标签无法加载本地视频，因浏览器禁用file://协议下的资源加载以保障安全；需通过本地服务器或input文件选择方式解决。
-
必须给父容器设置display:flex，justify-content:space-between才生效；它将可用空间均分给项目间间隙，而非每个项目；实现视觉均匀推荐flex:1或space-evenly（兼容性需注意）。
-
viewportmeta标签必须设为<metaname="viewport"content="width=device-width,initial-scale=1.0">，否则移动端浏览器默认按约980px虚拟视口渲染，无法实现1:1显示；CSS需用响应式单位（rem/em）、max-width、SVG等适配dpr与屏幕尺寸，真机测试不可替代。
-
<inputtype="date">是HTML5原生日期控件，需严格使用YYYY-MM-DD字符串格式操作value，兼容性差需降级处理，服务端必须二次校验。
-
TypedArray是JavaScript中直接映射底层二进制内存的类型化视图，具备零拷贝共享、确定性内存布局、与WebAPI无缝对接及高效协议解析等核心优势。
-
用@mixin实现可复用断点逻辑的核心是分离“何时响应”与“响应后做什么”：定义统一断点变量或map，每个mixin仅包裹@media并使用@content注入样式，避免硬编码、嵌套调用及缺失@content。
-
用记事本新建index.html，编码选UTF-8，写入完整结构：<!DOCTYPEhtml><html><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"></head><body>你好</body></htm
-
CSStransition在Grid布局中对opacity、transform等可动画属性有效，但grid-template-columns等结构属性不支持平滑过渡，需通过transform或变量间接实现视觉动画效果。
-
当元素是父容器唯一子元素时:only-child生效，可用于动态布局中精准控制样式；例如通知框居中、按钮组间距优化及响应式设计中单个商品项占满宽度，无需依赖类名或JavaScript干预。
-
clip-path裁剪失效最常见原因是元素未建立层叠上下文或未脱离文档流，且对inline、表格单元格及部分替换元素默认不生效；需设为block/inline-block或absolute/fixed定位。
