Original doc is here https://www.smashingmagazine.com/2021/10/guide-debugging-css/

    What I learned:

    • use outline instead of border for visual effect debugging, which will not affect the computational size. ```css
    • { outline: 1px solid red; } ```

    • common overflow issues are caused by size mismatch, can refer to max-width if needed

      1. p:first-of-type {
      2. max-width: calc(100% - 6rem);
      3. margin: 3rem;
      4. }

    • box-sizing

      box-sizing 属性可以被用来调整这些表现:

      • content-box 是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
      • border-box 告诉浏览器：你想要设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px，那么这100px会包含它的border和padding，内容区的实际宽度是width减去(border + padding)的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。

      译者注: border-box不包含margin