CSS中的百分比计算

CSS布局中会用到很多百分比,但他们究竟都是如何计算的呢,你可能一个不小心就会把他们混淆在一起,所以这里就对CSS中所有可以用到百分比的属性做一个总结,方便更加系统的理解和记忆。

font-size

根据元素字体大小,当前大小为100%

line-height

根据元素字体大小,当前大小为100%

translate

根据元素大小,当前大小为100%

width

  • 正常文档流和浮动:百分比相对于父元素content-box
  • 绝对定位:百分比相对于父元素padding-box

height

  • 正常文档流和浮动:百分比相对于父元素content-box
  • 绝对定位:百分比相对于父元素padding-box
  • 当父元素高度为auto:子元素高度百分比会被忽略

margin

  • 正常文档流和浮动:百分比相对于父元素的content-box宽度
  • 绝对定位:百分比相对于父元素的padding-box宽度

padding

  • 正常文档流和浮动:百分比相对于父元素的content-box宽度
  • 绝对定位:百分比相对于父元素的padding-box宽度

top/bottom/left/right

  • 非定位元素:无效果
  • 相对定位: top和bottom百分比是相对父元素的content-box高度,left和right百分比是相对父元素的content-box宽度
  • 绝对定位:top和bottom百分比是相对最近一级非static定位父元素的padding-box高度,left和right百分比是相对最近一级非static定位父元素的padding-box宽度