bugs

new URL

new URLSearchParams(window.location.search).get("orderNo")  // √
new URLSearchParams(window.location.href).get("orderNo")
// ×

在回显的时候 修改了数据类型

在回显（或者别的操作的时候）数据没取到，修改了数据类型，后面用到这个数据的时候 用的是trim，然后这个数据类型已经变成了undefined或者null

全局设置盒模型

image

前端一般 在通用css里写这个 * {
box-sizing: border-box;
} 对吗 是不是不太好

在通用 CSS 中设置 * { box-sizing: border-box; } 是一种常见的做法，目的是为了简化布局和尺寸计算，因为 border-box 盒模型更容易控制元素的总宽度和高度。虽然这种做法有很多优点，但也有一些潜在的缺点。

优点

  1. 简化布局：使用 border-box 盒模型，可以更容易地管理元素的宽度和高度，因为边框和内边距都包含在内。
  2. 一致性：确保所有元素使用相同的盒模型，可以避免一些由于不同盒模型引起的布局问题。
  3. 易于维护：不需要在每个元素上单独设置 box-sizing，减少了重复的 CSS 代码。

缺点

  1. 覆盖性强：应用于所有元素，包括第三方组件和库的样式，可能会导致一些意想不到的问题。
  2. 性能问题：虽然性能影响很小，但对所有元素应用样式可能会增加浏览器的渲染负担，尤其是在大型应用中。

更好的做法

为了获得以上优点并避免潜在的缺点，可以使用一个稍微改进的方法，只对所有元素及其伪元素应用 border-box，而不是仅仅使用 * 选择器。

/* 设置全局盒模型为border-box */
html {
    box-sizing: border-box;
}

*, *::before, *::after {
    box-sizing: inherit;
}

这种做法的优点在于：

  • 只需一次性定义 box-sizing，并通过继承应用于所有元素及其伪元素。
  • 允许你在特定情况下容易地覆盖和修改 box-sizing。

以下是一个完整的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Radio Button</title>
    <style>
        /* 设置全局盒模型为border-box */
        html {
            box-sizing: border-box;
        }

        *, *::before, *::after {
            box-sizing: inherit;
        }

        input[type="radio"] {
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            width: 20px;
            height: 20px;
            border: 0.5px solid gray;
            border-radius: 50%;
            outline: none;
            cursor: pointer;
            position: relative;
        }

        input[type="radio"]:checked {
            border: 0.5px solid black;
        }

        input[type="radio"]:checked::before {
            content: '';
            display: block;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: black;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
    <label>
        <input type="radio" name="customRadio">
        Option 1
    </label>
    <label>
        <input type="radio" name="customRadio">
        Option 2
    </label>
</body>
</html>

这种方法可以更好地控制盒模型，同时保持代码的简洁和可维护性。

posted @ 2024-05-25 15:32  茫茫人间刺骨凉  阅读(44)  评论(0)    收藏  举报