dom

精选推荐

最新动态

CSS断点选择艺术_常用屏幕尺寸的标准断点设置指南

2026年2月24日

因为它们源自 iPad 第一代的物理分辨率（768×1024），不是视口宽度，更不是用户真实浏览场景。现代移动端浏览器默认缩放、桌面端高 DPR 屏幕、折叠屏、竖屏笔记本都会让这些数值失效。

CSS项目实战之数据仪表盘片段_简单的矩形统计图设计

2026年2月24日

矩形统计图（比如横向柱状图）本质是「等高、宽度按数据比例缩放的色块排列」，flex 是最轻量且响应友好的选择。用 float 会破坏文档流，导致父容器高度塌陷；用 absolute 则失去弹性，数据一变就得重算 left/top。

如何为 JavaScript 待办清单添加持久化复选框功能

2026年2月23日

本文详解如何在原生 javascript 实现的待办清单中，动态创建带状态保持的复选框，并通过 dom 操作与 localstorage 实现勾选状态的完整保存与恢复，解决刷新或删除后状态丢失问题。

css:nth-child与:nth-of-type伪类如何高效使用_快速选择指定位置元素

2026年2月23日

因为 :nth-child 只看「父元素下所有子元素的顺序位置」，不区分标签类型。比如一个 <div> 前面有 <code><p></p> 和 <span></span>，那它可能是第 3 个子元素，但不是第 1 个 <div>。 <p>常见错误现象：<code>ul li:nth-child(2) 想选第二个 <li>，结果没生效——很可能是因为 <ul></ul> 里第一个子元素是注释、空格文本节点，或意外插入了其他标签（如 <div class="ad">）。 <ul> <li>使用前先用浏览器开发者工具检查父容器的「真实子节点结构」，右键 →「Edit as HTML」可看清隐藏节点</li> <li>若父元素中混有多种标签且目标元素不连续，优先考虑 <code>:nth-of-type

:nth-child(n) 的 n 从 1 开始计数，:nth-child(0) 无效

什么时候必须用 :nth-of-type？

CSS定位实现全景图浏览效果_控制大背景图的定位偏移

2026年2月23日

根本原因是没把鼠标的相对位移，正确映射成背景图的偏移量。浏览器默认的 background-position 是以容器左上角为基准的绝对定位值，而拖拽需要的是“鼠标拖了多少，背景就反向移多少”——这得自己算比例。

React 中实现 iframe 加载状态的正确方式

2026年2月23日

在 react 中为 iframe 添加加载提示时，需确保 iframe 始终被渲染（否则 `onload` 事件无法触发），通过状态控制加载占位符显隐，而非条件渲染整个 iframe。