-
盒模型影响元素尺寸和布局，进而影响对齐效果。通过设置box-sizing:border-box可统一尺寸计算方式，避免错位；结合margin:0auto可实现块级元素水平居中；使用Flexbox的justify-content和align-items能灵活控制主轴与交叉轴对齐，推荐用于复杂布局；内联元素或文本则通过text-align实现水平对齐，line-height辅助垂直居中。关键在于统一box-sizing并综合运用布局属性。
-
JavaScript单元测试核心是写小、可隔离、可重复的逻辑验证用例，推荐Vitest为起点，因其启动快、语法简、兼容Jest；其他如Jest适合复杂生态，Jasmine/Mocha更轻量可控，WebTestRunner专注纯浏览器ESM场景。
-
JavaScript事件循环由运行时环境实现，JS引擎只负责执行代码与维护队列；每次执行一个宏任务后清空全部微任务，setTimeout(0)仍属宏任务，queueMicrotask更及时。
-
移动端P3色域不生效是因渲染链路默认锁定sRGB，需HTMLmeta与CSS双层声明协同：meta必须置于head最前，CSS须先声明color-gamut:p3再使用color(display-p3)，且display-p3参数须经专业工具转换，不可直接换算十六进制。
-
overflow:auto触发滚动的条件是内容尺寸超出容器设定的宽高；需限制容器width/height、内容溢出且不换行，horizontal滚动还需white-space:nowrap和overflow-x:auto。
-
使用file命令可快速检测Mac上HTML文件的编码类型。打开终端，输入file-Iyourfile.html，查看输出中的charset字段，如charset=utf-8表示UTF-8编码；结合ls、for循环与grep可批量处理并过滤显示多个.html文件的编码信息，提升检测效率。
-
Bootstrap5中，浮动标签（form-floating）默认禁用label内部的pointer-events，导致tooltip无法触发；只需为触发元素添加pe-auto类并初始化Tooltip实例即可正常工作。
-
table-layout:fixed是解决列宽错乱的前置条件，需配合显式width和col元素控制列宽；浮动不适用于td/th，仅可用于table整体实现文字环绕；现代替代方案是flex布局。
-
PostCSS是一个基于JavaScript插件链式处理CSS的平台，本身不直接处理CSS，需通过插件（如autoprefixer、cssnano）实现功能，并集成于Webpack（viapostcss-loader）或Vite（默认内置支持，依赖postcss.config.js配置）中运行。
-
使用sed命令可批量优化CSS和HTML代码：首先将CSS中固定宽度替换为弹性单位如100%或clamp()，提升响应式适配；接着修改HTML内联样式中的px值为百分比，并外置样式；再通过正则删除重复或无用的选择器以减小文件体积；最后为flex、transition等属性自动添加-moz-、-webkit-等浏览器前缀，确保兼容性。整个过程高效精准，显著提升项目整洁度与跨设备兼容能力。
-
可通过浏览器开发者工具、HTTP请求（如Pythonrequests）、curl命令、HTML解析提取资源链接、控制台执行JavaScript五种方法获取网站HTML结构与资源。
-
本文介绍通过动态控制DOM元素显隐、结合滚动监听实现按需渲染，显著缓解超长HTML页面（2800+行）因一次性加载全部内容导致的卡顿与滚动延迟问题。
-
内联样式优先级最高（权值1000），会覆盖其他CSS规则；可通过开发者工具识别element.style，用CSS变量或class替代实现安全覆盖。
-
border-color动画未生效主因是初始边框缺失或写法错误，需确保元素有solid等可见边框，正确使用@keyframes定义颜色变化，并通过animation属性调用，避免使用非标准的animation-border-color。
-
通配符选择器用于全局样式重置，如清除边距和统一盒模型，提升布局一致性；继承则减少重复代码，确保字体、颜色等样式向下传递；二者结合可建立高效、统一的全局样式基线，但需避免滥用以防止性能问题。
