fwq

深入了解：何时以及如何使用 的 :focus-visible 伪类 在使用 :focus 伪类进行焦点样式时，可能会遇到一个问题：当鼠标点击元素时，焦点样式也会生效，这可能不是你想要的。 为了解决这个问题，引入了 :focus-visible 伪类。它允许你在以下情况下应用焦点样式： 使用 tab 键聚焦元素 使用键盘快捷键聚焦元素 通过仅在使用键盘操作时显示焦点样式，你可以避免在点击时出现不必要的视觉噪声。 扩展应用场景 除了解决上述问题之外，:focus-visible 伪类还有其他应用场景，如下所示： 自定义控件：你可以将 :focus-visible 用于自定义控件（例如按钮），以使其仅在键盘操作时显示焦点样式，就像原生控件一样。 无障碍访问优化：对于视力较弱的人来说，确保视觉焦点指示可见非常重要。:focus-visible 可以帮助创建满足可访问性要求的焦点样式，例如满足 wcag 2.1 sc 1.4.11 非文本对比度的要求。…

大key 处理方案 问题 业务描述：一项任务每隔 5 秒将数据保存到 redis 的 list 中，任务结束后删除 redis 数据。查询数据时，直接查询 redis。 问题：这种方式会导致 list 数据过大，形成大 key。 处理方案 将数据定期转存到数据库中，实现步骤如下： 结束时，直接将数据保存到数据库中。 设置定时任务，定期将 redis 中的数据转存到数据库中。 查询数据时，同时查询数据库和 redis，将结果整合返回前端。 这种方式可以减轻 redis 的负担，避免大…

旋转后长方形在画布上的xy轴距计算 在画布中添加一个长方形，并将其旋转任意角度，如何计算旋转后的长方形与画布左上角之间的xy轴距？ 问题分解： 要计算旋转后长方形的xy轴距，需要考虑旋转对长方形宽高和位置的影响。首先，旋转会改变长方形的长和宽，其次，旋转会改变长方形的中心点位置。 求解方法： 计算旋转后的长和宽： 假设长方形原始长为x，宽为y，旋转角度为r，则旋转后的长和宽分别为： x_new = x * cos(r * pi / 180) y_new = y * sin(r * pi / 180) 登录后复制 计算旋转后的中心点位置： 假设长方形原始中心点为(x0,…

数据库 io 飙高，原因竟出乎意料 当数据库 io 长期居高不下时，势必会影响网站性能。对于这种情况，我们该如何排查呢？ 某次，一台仅运行一个 zblog 网站的服务器数据库 io 持续飙高。排查发现，两个 sql 语句持续执行： SELECT * FROM zbp_post WHERE log_Type = '0' AND log_Status = '0' AND log_CateID =…

当引入的外部脚本按顺序加载失败时 在编写HTML代码时，如果按顺序引入的外部脚本标签在页面加载时没有按照顺序执行，可能会让人感到困惑。这是否与这些脚本内部JavaScript代码的顺序有关呢？ 解析顺序与执行顺序 根据浏览器的脚本解析机制，顺序引入的脚本标签并不会始终按顺序执行。这是因为浏览器会并行下载和执行脚本。如果某个脚本依赖于其他脚本中的功能，则浏览器将在下载和执行依赖脚本后才执行具有依赖关系的脚本。 使用 defer 属性 立即学习“”； 为了确保脚本按照引入顺序执行，可以为脚本标签添加 defer 属性。具有 defer 属性的脚本将在浏览器完成对文档的解析和渲染后执行，并且会按照它们在文档中的顺序执行。 示例 在下例中，我们为所有脚本标签添加了 defer 属性： <!--引入js--> <script src="./js/jquery.js" defer></script> <script src="./js/isotope.js" defer></script> <script src="./js/typed.js" defer></script> <script…

react vs. vite：自动加载 机制 在引入 css 文件的情况下，使用 css 类不会自动加载 css 样式。然而，某些工具和库可能会提供自动加载功能。 ant design 的自动样式加载 ant design 是一个 react 组件库，它允许你在不引入单独 css 文件的情况下使用 css 类。这是因为 ant design 组件是用 jsx 编写的，jsx…

MySQL 事务中的回滚 (Rollback) 数据库事务是为了保持数据完整性而引入的一项重要机制。事务开始于 START TRANSACTION 语句，并以 COMMIT 或 ROLLBACK 语句结束。 自动回滚 (Auto-Rollback) 虽然题中提到了，如果没有执行 COMMIT，数据不会更新，因此无需显式回滚。然而，这并不是最佳实践。事务在连接断开时也会自动回滚。这意味着在长时间运行的操作期间，意外断开连接会导致所有未提交的更改丢失。 回滚的必要性 因此，显式使用 ROLLBACK 仍然有以下必要性： 防止未提交的更改： 确保只有已提交的更改才会永久应用到数据库中。 释放资源： 结束未完成的事务，可以释放数据库为该事务保留的锁和资源。 防止性能下降： 未结束的事务会累积，导致大量的 IDLE IN TRANSACTION…

body 设置 flex 后，item 无法上下居中？ 问题描述：在 HTML 中， 的子元素 可以通过 的 flex 属性实现上下左右居中。但是，当 body 设置 flex 属性后， 无法 。 原因分析： 的 flex 属性无效，因为它是一个没有明确高度的容器，高度受其子元素控制。当 撑起了 的高度时， 的 flex 属性就失效了。…

垂直外边距合并：其含义及其情况 垂直外边距合并是指当两个相邻的块元素或浮动元素拥有非零的外边距时，它们的外边距会合并，形成一个更大的外边距。 合并后的情况 垂直外边距合并后的情况有多种，具体取决于元素的类型和所设置的样式： 相邻的块元素：合并后，顶部的块元素会拥有合并后的外边距，底部的块元素不拥有外边距。 浮动元素和块元素：如果浮动元素位于块元素上方，则块元素会拥有合并后的外边距；反之，浮动元素拥有外边距。 多个相邻的浮动元素：合并后，第一个浮动元素会拥有合并后的外边距，后面的浮动元素不拥有外边距。 参考 MDN 文档对垂直外边距合并的说明： [图片] 阻止垂直外边距合并的方法 为了防止垂直外边距合并，可以通过以下方法： 设置边框 (border) 设置内边距 (padding) 创建块级格式化上下文 (BFC) 以上就是垂直外边距合并：它是如何工作的，以及如何避免它？的详细内容，更多请关注米云其它相关文章！

揭秘网站上消除视觉差异的 CSS Reset 许多网站的 CSS 中都会包含 margin: 0; padding: 0; 这段代码，这是一种称为 CSS Reset 或 CSS Normalize 的技术。 不同浏览器在某些 HTML 元素的初始样式方面存在差异。即使一个网站不使用任何额外的 CSS 样式，在不同浏览器中打开它的外观也会有所不同。 为了解决此差异，引入了 CSS Reset。它将所有元素的边距和内边距重置为 0，从而创建一个统一的基础样式。这消除了浏览器之间的视觉差异，确保所有元素在不同平台上看起来相同。 立即学习“”； 最初，浏览器对一些元素的这些样式的设置是不同的，因为它们是在标准化之前由各个供应商实现的。即使浏览器想要统一这些设置，由于它们已成为广泛使用的功能，也无法进行更改。…