跳到主要内容

百分比布局注意

百分比布局的参照​

所以百分比都是相对于其containing block(包含块)来计算的

确定包含块​

确定一个元素的包含块的过程完全依赖于这个元素的 position 属性：

  • 如果 position 属性为 static 或 relative ，包含块就是由它的最近的祖先块元素(inline-block、block、list-item)，或者 BFC(table、flex、grid) 的内容区的边缘组成的。
  • 如果 position 属性为 absolute ，包含块就是由它的最近的 position 的值不是 static （也就是值为fixed, absolute, relative 或 sticky）的祖先元素的内边距区的边缘组成。
  • 如果 position 属性是 fixed，可以认为包含块就是视口 viewport。

width和height​

这个最常用也是最简单的了，它们的百分比计算是基于包裹它的父元素的宽和高来计算

margin和padding​

百分比的计算是基于其包含块的宽度（和高度没关系） 百分比的计算规则适用于margin和padding的四个方向 如果包含块的宽度取决于该元素，那么百分比的使用结果是未定义的(应该是避免循环)

border-radius​

横轴上的百分比参考的是元素自身的宽度，纵轴上的百分比参考的是元素自身的高度，负值是无效的

background-position​

如果使用百分比，那么百分比的计算应该是这样的(父元素-背景图片)*百分比 假设一个容器的长宽为300X200，图片是150X150，那么当设置background-position: 20% 100%

(0, 0) => ((400 - 150) * 20%, (200 - 150) * 100%)

font-size​

这个属性的百分比参考值是它的父元素的font-size，没有太多的信息，是比较纯粹的一个百分比。

line-height​

line-height这个属性的百分比参考的是自身的font-size大小

vertical-align​

vertical-align顾名思义是纵向对齐，其参考值是自身的line-height

bottom、left、right、top​

定位使用的四个方向值，如果使用百分比的话，参考的是元素包含块(不含padding)的尺寸，这个时候不同于margin或padding，left和right是参照包含块的宽度，bottom和top是参照包含块的高度

transform: translate​

自身元素的宽度或者高度，这里的宽度和高度包含了padding和border，参考的应该是border-box的尺寸

总结一下​

和定位有关的，基本都是按照包含快，也就是父级来来计算百分比，而其他一些属性按照元素自身的比例来设置百分比