box-sizing 默认值是 content-box，width/height 只算 content 区域，padding 和 border 向外叠加。
div {
width: 200px;
padding: 20px;
border: 5px solid black;
}
/* 实际占宽 = 200 + 20*2 + 5*2 = 250px */设置宽度为 200px，实际元素宽度为 250px。布局容易算错。
box-sizing: border-box 更符合直觉，width/height 算到 border 层，padding 和 border 往内挤。
div {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 5px solid black;
}
/* content 实际宽度 = 200 - 20*2 - 5*2 = 150px */border-box 几乎成为行业标准。几乎所有 CSS 框架（ Bootstrap、Tailwind ）和重置样式表都会写：
*, *::before, *::after {
box-sizing: border-box;
}两者都能让元素透明，但作用范围完全不同。
opacity 会让整个元素一起透明，作用于元素本身及其所有子元素。而且子元素没法把自己的透明度盖回去，子元素设置 opacity: 1 也没用，父元素限制了整体透明度。
background: rgba() —— 只影响背景色。只作用于这个元素的背景，内容不受影响。rgba 有多种书写方式：
rgba(0, 0, 0, 0.5)
/* 前三位 rgb 空格分，/ 后面是透明度 */
rgb(0 0 0 / 50%)
/* （8 位，前 6 位是 RGB） */
#00000000 还有一个隐藏区别：层叠上下文
opacity 值小于 1 会创建一个新的层叠上下文（stacking context），可能影响 z-index 的表现。rgba() 不会。
指四个属性: max-height / min-height / max-width / min-width
当一个元素的尺寸会自动变化的时候（比如被设置百分比，未设置宽高，img 受图片像素影响等情况），设置最大最小宽高，使元素不至于过小或过大。
在实际开发中，我们通常为 PC 网页设置一个最小宽度。值一般是 1200px ~ 1300px。避免 PC 窗口无限缩小。
通常给图片一个最大宽度，避免图片像素过高撑坏布局。
border 不加颜色，默认是 currentColor，等同于文字颜色。