Bit0r

css 的层级关系

在 CSS 中，布局和样式的层级关系可以通过以下方式进行描述：

grid = grid-content + gap grid-content = grid-item + (grid-content-padding) grid-item = box

box = border-box + margin border-box = content-box + padding + border content-box = text + (text-space)

text = line-height * lines line-height = font-size + (leading)

注意：

1. grid和flex等价
2. () 内的属性实际上是“虚拟”的，CSS并不能直接设置这些属性

css 的相对长度单位

1. 百分比由容器直接计算出来
2. fr由容器的剩余空间（剩下的不包括gap的空间）计算出
3. auto根据内部容器的的大小自动调整到适合的大小

grid/flex 的数量单位

1. auto-fill尽可能创建更多的轨道，不管容器能不能使用所有轨道
2. auto-fit尽可能让容器使用所有空间，不管容器会有多大
3. repeat使用时，容器数量，容器最小值，容器最大值，其中必须有一个非相对值