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使用时,容器数量,容器最小值,容器最大值,其中必须有一个非相对值