【基础】CSS查缺补漏（盒模型，包含块，半透明，最大最小宽高，颜色）

1. box-sizing：两种盒模型

box-sizing 默认值是content-box，width/height 只算content区域，padding 和 border 向外叠加。

div {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
}
/* 实际占宽 = 200 + 20*2 + 5*2 = 250px */

写宽200，实际元素宽度250。布局容易算错。

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;
}

2. 半透明：rgba 和 opacity

两者都能让元素透明，但作用范围完全不同。

opacity，整个元素一起透明。作用于元素本身及其所有子元素。而且子元素没法把自己的透明度盖回去，子元素设 opacity: 1 也没用，它爹限制了整体透明度。

background: rgba() —— 只影响背景色。只作用于这个元素的背景，内容不受影响。rbga有多种书写方式：

rgba(0, 0, 0, 0.5)
/* 前三位rgb空格分，/后面是透明度 */
rgb(0 0 0 / 50%)
/* （8位，前6位是rgb） */
#00000000 

还有一个隐藏区别：层叠上下文

opacity 值小于 1 会创建一个新的层叠上下文（stacking context），可能影响 z-index 的表现。rgba() 不会。

3. 尺寸百分比

百分比是一个相对单位，其相对于元素的参考系（官方叫法：包含块，containing block）。

• 普通元素的参考系是父元素的内容区域。

• 绝对定位的元素参考系为最近定位祖先（position != static）的 padding + content 区域。

• 固定定位元素参考系为视口（除非祖先有 transform/filter/perspective 创建了新的包含块）

padding，margin 通常不会设置百分比，如果设置则是相对于参考系的宽度。包括padding-top 和 margin-top 也参考宽度而不是高度。

border不能用百分比。

height 的百分比：如果父元素没有显式高度（或高度由内容撑开），百分比会失效。但 flex/grid 容器中例外。

transform: translate(50%) —— 参考的是元素自身尺寸。

4. 最小最大宽高

指四个属性：max-height / min-height / max-width / min-width

当一个元素的尺寸会自动变化的时候（比如被设置百分比，未设置宽高，img受图片像素影响等情况），设置最大最小宽高，使元素不至于过小或过大。

在实际开发中，我们通常为 pc 网页设置一个最小宽度。值一般是1200px ~ 1300px。避免 pc 窗口无限缩小。

通常给图片一个最大宽度，避免图片像素过高撑坏布局。

5. 颜色

border 不加颜色，默认是currentColor，等同于文字颜色。