你知道我们平时在CSS中写的%都是相对于谁吗？

站长手记作者： 2024-08-28 05:15:01

编写CSS的时候，经常会用到百分比赋值（%）实现自适应。像我们最常使用的流式布局设计模式，基本所有的column的宽度都是通过%来取值的。或者比如经常会遇到的元素水平垂直居中问题

本文作者：IMWeb jerryOnlyZRJ
原文出处：你知道我们平时在CSS中写的%都是相对于谁吗？ - 腾讯Web前端 IMWeb 团队社区

0.引言

.wrap {
  position:absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

static：这个就不用说了吧，position的默认值，并没有对元素起到定位的作用，所以left、right等位置属性并不能被有效赋值，所以不存在在定位功能上的%值。
absolute：作为一个最为常用的定位属性，absolute不知道给多少前端小白挖了数不清的坑，相信大家早年在这上面学习的过程都是艰辛的。不扯远了，给一个元素absolute定位后就可以赋予left等位置值，参照物就是祖先元素中存在定位的元素，那么自然而然，位置值如果取得是%，那么这个%相对的元素便是这个参照物。left、right是相对于width，top和bottom是相对于height，这我就不必多说了吧。
relative：小伙伴们肯定都听说过子绝父相，而且肯定经常用，那么relative它是相对与自身定位的，那么位置值自然就是相对于自身的宽高喽。
fixed：这是一个很特殊的定位值，因为我们知道它是相对于视窗定位的，那么自然%的参照物便是视窗了。

margin&padding：这两个小伙子很特别，如果设置了%值，那么他们参照的是父元素的宽度！！父元素的宽度！！!父元素！！！宽度！！！重要的事情说三遍，不信的话我们可以亲手试试。的确很奇葩，不过你还真得记住，别开发的时候糗了你还以为是BUG。我们可以使用padding的这一特殊性质实现16:9或4:3等各比例响应式图片、视频盒子的构建。
border：border的话我一般是没见过有人用%的值，如果你在开发的时候用的是%，请收下我的膝盖。这边要讲的实际上是border-width，因为border实际上是个简写属性。其实是骗你们的啦，border-width目前还不允许输入%值，未来会不会允许并且参照的是谁都还是未知，如果你写了%的值浏览器是不会渲染的哦，所以border不存在%值。
border-radius：既然说到了border，就顺带提一下border-radius，圆角。平时我们用这个属性的时候基本都是给他赋4个参数，代表四个角，分别是左上、右上、右下、左下，以顺时针的顺序排序。但实际上，border-radius最多可以取八个值，前四个值和后四个值用 / 隔开，斜杠前表示各角水平方向上的圆角半径，斜杠后表示各角竖直方向上的圆角半径。范例如下：

border-radius：top-left|top-right|bottom-right|border-left / top-left|top-right|bottom-right|border-left

background-size:100% 100%;

background-position：这个属性和relative类似，起到的也是定位的效果，因此它的参照对象就是原盒子。但是这个属性比较特殊，他不是参照原盒子的宽高值，而是原盒子的宽高值减去背景图片的宽高值所得到的剩余值，更为形象的说，下面这两个属性值是等价的："center center"和"50% 50%"，如果你设置了后者，背景图片会自动居中，不用像定位那样还需要transform偏移了。这应该是优秀的前人在设计这个属性的时候就考虑到它将来的应用了吧。

translate()：在第一个模块中，我们讲到了这样一个属性：translate()，在CSS3中还有还有translate3d()，这个属性的含义想必大家都知道，就是在指定方向上进行2d偏移，它的参照物是自身的宽高。而transform3d()的第三个属性，指的是在z轴上的偏移，因为z-index的默认值是auto，所以%值并不能起作用，也就是说对translateZ()赋予百分比的值是无意义的。
transform-origin：这个属性是改变元素变形的原点，它和width还有height的特点一模一样，这里就不作过多详述了。
scale()：控制元素的缩放比例，传入的参数是一般是浮点数，指的是相对于元素本身放大或缩小的比例。
zoom：zoom并不是transform的属性值，它是一个独立的CSS属性，之所以把他放在transform这一个模块讨论，是因为恰好它与scale()有共同的特征，它的取值既可以是浮点数，也可以是%，包括参照物，都与scale()等价。

font-size：这个属性和我们的height一样，是参照父盒子的字体大小的。
line-height：我们所说的行高也是很特别的一个属性，如果给它赋予不同类型的值，会有不同的特性。如果它的属性值是一个无单位的数字，那么最后的结果便是这个数字与该元素字体大小的乘积。这是我们设置line-height的首选方法，因为字体大小font-size是继承自祖代元素的，通过这个方法设置的值基本不会出现异常情况。但如果我们的值是%，最后的结果是给定的百分比值乘以元素最后计算出的字体大小。
text-indent：这个属性是用来设置首行缩进的，我们最长用的是2em，首行缩进两个字符，这边的2em指的就是两倍的font-size，按道理来说如果它取%应该也是要相对于本身的font-size的，但是偏偏就那么特别，和padding和margin一样，如果设置的是%，则参照的是父元素的width。这应该算是一个特例吧。