-
gap属性用于设置flex容器中子元素间的间距，使用display:flex并添加gap即可生效，如gap:10px；支持横向纵向分别设置，避免margin带来的计算问题，提升布局效率。
-
CSS高级选择器可精准控制元素样式，包括属性选择器（如[title]、[type="text"]）、伪类选择器（如:hover、:focus、:nth-child(n)）、伪元素选择器（如::before、::after）及组合器选择器（如后代、子代、相邻兄弟等），实现灵活的样式设计与布局控制。
-
使用Ethers.js连接区块链节点，加载智能合约ABI和地址，通过provider读取数据、signer发送交易，实现JavaScript与智能合约交互。
-
浮动元素的定位微调可通过外边距、相对定位、调整相邻元素及辅助容器实现。1.使用margin调整与周围元素距离，支持负值拉近位置；2.结合position:relative用top、left等进行像素级偏移，不破坏文档流；3.修改父容器或邻近元素的padding、width或clear设置以释放空间；4.利用wrapper或伪元素隔离控制，优化整体对齐。关键是组合使用这些方法，避免强行修改布局结构，在维护旧项目时尤为实用。
-
用CSSGrid实现响应式列数需结合媒体查询与grid-template-columns：默认单列，481px起设2列，769px起3列，1025px起4列；更优方案是auto-fit+minmax自动适配列数。
-
HTML可访问性树是浏览器为辅助技术创建的语义化页面结构，其检查方法如下：1.使用浏览器开发者工具，如Chrome、Firefox、Edge中的“元素”面板旁的“辅助功能”选项卡；2.选择任意元素查看其角色、名称和状态信息；3.若元素未正确表示，例如按钮显示为div，则需修复；4.验证可访问性的最佳实践是使用屏幕阅读器测试。可访问性树不同于DOM树，它剔除了无用信息，赋予元素语义角色，影响构建的关键元素包括HTML5语义标签、交互式元素、ARIA属性、图像alt属性及列表和表格等结构化元素。这些元素通过正
-
JavaScript可通过DOMAPI访问HTML注释节点，利用nodeType为8的特性遍历或创建注释，实现数据读取与操作，但推荐使用data属性、template标签等更现代的方式进行JS与HTML协同。
-
需绕过Jimdo默认画廊，用HTML5语义标签构建结构，CSSGrid实现响应式缩略图布局，<details><summary>添加无JS展开交互，<picture>适配多分辨率，CSS悬停与焦点优化满足可访问性。
-
现代浏览器默认忽略page-break属性，因其仅对块级元素生效且在flex/grid容器内完全失效；应改用break-before/after/inside，并确保父容器为block、移除overflow/float/transform等干扰因素。
-
inline-block元素间间隙源于HTML解析器将换行/空格渲染为文本节点，宽度约父级font-size的0.25em；可用font-size:0（需重置子元素）或flex布局彻底解决。
-
父元素高度塌陷源于子元素设display:flex后脱离文档流且父容器无明确高度；应设min-height（如100vh、400px或fit-content）或height，确保html/body有height:100%，并检查overflow、position及子项flex基础尺寸。
-
本文讲解如何在单个HTML页面中为多个结构相同的待办清单（如周一至周日）实现各自独立的添加、勾选和删除功能，核心在于避免ID重复、利用DOM层级关系定位上下文元素，并通过事件委托与closest()方法精准操作每个列表的局部DOM。
-
CSS权重按四位数(a,b,c,d)计算：id=100、class/attribute/pseudo-class=10、element/pseudo-element=1，内联样式=1000；!important仅临时使用，BEM/CSSModules通过命名隔离避免冲突。
-
Hover动画顺序出错主因是animation-delay、duration与keyframes时间点未对齐，需显式声明各项参数，确保关键帧百分比匹配实际时间段，并用animation-fill-mode或JS控制状态以避免重置错乱。
-
CommonJS和ES模块的选择取决于运行环境与构建工具配置：Node.js中需查package.json的"type"字段和文件后缀；Webpack/Vite等打包器会转译模块语法；浏览器仅支持import/import()，且动态导入路径须为字面量。
