CSS百分比应用的坑

前言

CSS中以下属性常会应用到百分比，以下是对其的一些简单总结：

width、height、border-radius、background-position、font-size、line-height、vertical-align、bottom、left、right、top、transform: translate

1. width和height

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

<div class="cube-container">
  <div class="cube"></div>
</div>

<style>
.cube-container{
  border: 1px dotted #ee3979;
  width: 120px;
  height: 100px;
}
.cube{
  background-color: #98d4fb;
  height: 70%;
  margin: 5% 15%;
  padding: 0 10%;
  width: 50%
}
</style>

注：以下情况设置百分比需注意

1） 当父元素没有明确的高度定义(指的是不定义height或者使用min/max-height这种，都属于不明确的高度定义)，而子元素使用百分比且不是绝对定位，那么这时候的百分比等同于auto
2） 当父元素没有明确的高度定义，而子元素使用百分比且是绝对定位，那么这时候父元素高度不被撑起，子元素有高度且不等于auto（本人没弄懂该高度是如何计算得来，有大佬知道的话可以指教一下）

子元素高度设置为百分比且不是绝对定位，父元素高度被子元素撑起，子元素高度为auto：

子元素高度设置为百分比且是绝对定位，父元素高度不被撑起，子元素高度不为auto：

2. margin和padding

在CSS盒子模型规范明确提出了其百分比的含义：

The percentage is calculated with respect to the width of the generated box’s containing block. Note that this is true for ‘margin-top’ and ‘margin-bottom’ as well. If the containing block’s width depends on this element, then the resulting layout is undefined in CSS 2.1.

padding的解释也是类似。

上面的意思可以总结出三点：

百分比的计算是基于其包含块的宽度
百分比的计算规则适用于margin和padding的四个方向
如果包含块的宽度取决于该元素，那么百分比的使用结果是未定义的。

同样以上面的demo为例子，可以看到cube元素的margin与padding值如下：

margin： 6px 18px 6px 18px
padding： 0px 12px 0px 12px

这时定有童鞋会疑惑，为什么CSS规范的制定者会选择使用包含块的宽度来作为参考值，而不是高度？

其实在上面总结的三点中已经有所涉及的了，在我们平时的样式布局中，元素的高度取决于子元素的高度，如果子元素的margin或者padding的百分比又依赖于包含块的高度，那么二者互相依赖，就永远无法得到一个稳定的值，陷入了一种死循环，因此也许是基于这个考虑，CSS的规范中才会提到上面要点的第三点。以上纯属个人猜测，仅供参考。

3. border-radius

根据MDN-border-radius的百分比介绍:

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

4. background-position

该属性允许你在它的包含块中随意移动背景图片(或者渐变)，默认值是0 0，这个时候的图片是放在左上角的位置

如果使用百分比，那么百分比的计算应该是这样的，假设一个容器的长宽为300X200，图片是150X150，那么当设置background-position: 20% 100%，那么图片新的位置应该是(以左上角为例):

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

也就是移动的结果是==(父元素-背景图片)*百分比==，这样的设计很符合我们平时排版的思路

5. font-size

该属性的百分比参考值是它的父元素的font-size

6. line-height

该属性的百分比参考值是它自身的font-size大小

7. vertical-align

该属性的百分比参考值是它自身的line-height

8. bottom、left、right、top

定位使用的四个方向值，如果使用百分比的话，参考的是元素包含块的尺寸
left和right是参照包含块的宽度
bottom和top是参照包含块的高度

9. transform: translate

在水平或者垂直居中的应用场景中，平移变换常通过-50%来让块元素居中,那么这个百分之50%基于的是什么样的参考值呢？

答案便是其自身元素的宽度或者高度，且宽度与高度参考的是border-box的尺寸

Tips

请注意，当百分比值用于可继承属性时，只有结合参照值计算后的绝对值会被继承，而不是百分比值本身

该文总结于知乎用户“linxiaowu”的《详解CSS中的百分比的应用》

若有错误，欢迎指出！