-
CSS盒模型由width、height、padding、border和margin组成，决定元素的尺寸与布局。width和height设置内容区域大小，默认不包括padding和border；padding增加内容与边框间的空间，影响总尺寸；border为元素添加边框线，需定义样式才可见；margin控制元素外边距，可设负值且相邻块级元素垂直margin会合并；box-sizing属性改变尺寸计算方式，推荐使用border-box，使width和height包含padding和border，便于精确控制布
-
移动端错位主因是flex/grid未适配小屏：flex需设wrap、禁用固定min-width；grid宜用auto-fit+minmax；须配合理viewport、box-sizing及断点mediaquery。
-
可通过内联style、span标签、内部CSS、外部CSS文件及CSS变量五种方式设置网页文字颜色：分别适用于单元素着色、局部变色、批量控制、多页复用和动态主题切换。
-
可通过JavaScript设置value属性为空、innerHTML清空容器、textContent清除文本、表单reset按钮重置或jQuery的val()/empty()方法清空HTML元素内容。
-
静态方法用static关键字定义，属类本身，不可访问this和实例属性；如Utils.formatDate()；误用会导致内存浪费或undefined错误；静态方法间调用用类名或this.constructor。
-
惠普电脑不影响HTML5视频流畅播放，关键在于浏览器引擎、系统解码能力、视频编码格式匹配度及自动播放策略是否满足；需禁用Flash、使用MP4+H.264+AAC组合、避免file://协议直接打开。
-
touchstart/touchmove/touchend需调用preventDefault()才能持续触发，否则浏览器优先执行原生滚动；应仅在目标容器绑定事件，touchstart阶段判断手势意图再阻止默认行为；多点触控须用targetTouches计算中心点和缩放比；CSStransform需配合will-change和translate3d启用硬件加速；调试需用ChromeSensors模拟触摸并启用移动设备模式；务必处理touchcancel以重置状态。
-
直接在HTML中用<style>标签写CSS最省事，适合快速验证样式；也可用JS动态插入或在开发者工具中实时编辑；但仅限调试，避免污染生产代码。
-
浏览器原生拖放API需在dragover时调用preventDefault()才能触发drop；自定义数据应通过ID映射表安全传递；排序时优先用elementFromPoint判断位置；移动端应降级或使用interact.js等库。
-
WKWebView加载file://本地HTML时localStorage默认禁用，需改用本地HTTP服务（如GCDWebServer）托管HTML并访问http://localhost:8080，方可启用localStorage等Web存储API。
-
HTML5网页拼接有五种原生方法：一、iframe嵌入隔离内容；二、fetch+innerHTML动态注入；三、template元素预定义可复用结构；四、WebComponents封装自定义元素；五、Server-SentEvents流式拼接。
-
全局执行环境中，浏览器下this指向window，Node.js中指向global；严格模式下全局函数内this为undefined；箭头函数不绑定this，继承外层词法作用域的this值。
-
HTML5.1是HTML5的小步迭代，修复缺陷、废除<hgroup>、新增<dialog><details><summary><picture><main>等实用标签，并强制rel="noopener"提升安全。
-
JavaScript通过HistoryAPI实现无刷新路由控制，核心是pushState添加、replaceState替换历史条目，并通过popstate事件响应导航，需手动更新视图。
-
使用CSSGrid结合grid-auto-flow:dense可高效实现等间距瀑布流布局，1.将容器设为display:grid；2.使用repeat(auto-fill,minmax(200px,1fr))定义自适应列；3.设置grid-auto-rows:auto使行高随内容变化；4.启用grid-auto-flow:dense实现密集填充以减少空白；5.通过gap:16px统一行列间距；该方案利用Grid二维布局优势，相比浮动或Flexbox能真正实现错落有致的视觉效果，且无需JavaScript干
