CSS中的相对值

前言

本篇文章总结了经常遇到的CSS中的相对值，比如em、rem等相对单位以及width: 100%这样的属性值。

属性速查总表

相对于父元素

CSS属性	值	相对于谁	备注
font-size	100%	相对于父元素的字体大小
font-size	em	相对于父元素的字段大小
width	100%	相对于父元素的内容区域width
height	100%	相对于父元素的内容区域的height
margin	100%	相对于父元素的width
padding	100%	相对于父元素的width
top、bottom	100%	相对于父元素的高度
left、right	100%	相对于父元素的宽度

相对于自身

CSS属性	值	相对于谁	备注
transform: translate()	100%	相对于自身	水平方向的值相对于自身的宽度，垂直方向相对于自身的高度

属性的详细说明

width和height

无论父元素和子元素的盒模型为何种模型，子元素的width的百分比值都相对于父元素内容区域的width；子元素的height的百分比值都相对于父元素内容区域的height。

一般情况下：width和height指的是content box的尺寸。

DOM结构如下：

<div class="father">
    <div class="father"></div>
</div>

CSS样式如下：

.father {
    width: 100px;
    height: 100px;
    padding: 10px;
    border: 2px dotted tomato;
    background-color: lightpink;
}
.son {
    /* 100px * 50 % = 50px */
    width: 50%;
    /* 100px * 50 % = 50px */
    height: 50%;
    padding: 10px;
    border: 2px dotted tomato;
    background-color: lightblue;
}

页面效果如下：

父元素的盒模型为：

子元素的盒模型为：

通过盒模型可以看到：

• 父元素的width为100px时，子元素的width为50px

• 父元素的height为100px时，子元素的height为50px

如果父元素的盒模型变成了border-box呢？

当父元素的盒模型变成border-box时，父元素的width设置的就是实际宽度，父元素的内容区域宽度则为76px，高度也为76px

此时子元素的盒模型还是content-box，此时子元素的width的值如下所示，为76px * 50% = 38px，子元素的height的值为76px * 50% = 38px

如果子元素的盒模型也变成border-box呢？此时子元素设置的width的值如下所示，为76px * 50% = 38px，内容区域的宽度为38px - 2*10px - 2 *2px = 14px，高度与宽度表现一致。

综上所述，无论父元素和子元素的盒模型为何种模型，子元素的width的百分比值都相对于父元素内容区域的width。

margin和padding

无论父元素和子元素的盒模型为何种模型，子元素的margin和padding的百分比值都相对于父元素内容区域的width

DOM结构如下：

<div class="father">
    <div class="son"></div>
</div>

CSS样式如下：

.father {
    width: 120px;
    height: 100px;
    margin: 10px;
    padding: 10px;
    background-color: lightpink;
}
.son {
    width: 50px;
    height: 50px;
    margin: 10%;
    padding: 10%;
    background-color: lightblue;
}

当父元素的盒模型为content-box时，父元素的盒模型如下：

子元素的盒模型如下：

可以看到，当父元素的width为120px时，子元素的margin和padding均为12px，可以得知，此时，子元素margin和padding是相对于父元素的内容区域宽度width的。

如果指定父元素的盒模型为border-box，父元素的盒模型如下：

子元素的盒模型如下：

可以看到，父元素的内容区域width变成了100px，子元素的margin和padding变成了10px，可以得知，此时，子元素的margin和padding是相对于父元素的内容区域宽度width的。

如果此时把子元素的盒模型也变为border-box，子元素的盒模型如下：

可以看到，父元素的内容区域宽度width还是100px，子元素的maring和padding还是10px，可以得知，此时，子元素的margin和padding是相对于父元素的内容区域宽度width的

top和bottom和left和right

无论父元素的盒模型为何种，子元素的四个定位值都是相对于父元素的内容区域的width和height。水平方向相对于父元素的width，垂直方向上相对于父元素的height。

DOM结构如下：

<div class="father">
    <div class="son"></div>
</div>

CSS结构如下：

.father {
    position: relative;
    width: 100px;
    height: 100px;
    background-color: lightpink;
    border: 2px dotted red;
}
.son {
    position: absolute;
    left: 100%;
    top: 100%;
    width: 50px;
    height: 50px;
    background-color: lightblue;
}

父元素的盒模型为content-box时，盒模型尺寸如下：

子元素的盒模型为content-box时，盒模型尺寸如下：

可以看到，子元素设置的定位值left的百分比计算值为100px，top的百分比计算值为100px。其实这里，就可以得知水平方向定位值的百分比是相对于父元素内容区域的width，垂直方向定位值的百分比是相对于父元素内容区域的height。但是因为left和top的值设置的都是100px，此时看不出来left和top的值是相对于width还是height。

所以，修改一下父元素的尺寸：

.father {
    box-sizing: border-box;
    position: relative;
    width: 100px;
    height: 110px;
    background-color: lightpink;
    border: 2px dotted red;
}

当把父元素的盒模型更改为border-box时，父元素的盒模型尺寸如下：

父元素的内容区域width为96px，内容区域的height为106px。

子元素的盒模型尺寸如下：

可以看到，子元素的left的百分比计算值为106px，right的百分比计算值为96px。可以得知，无论父元素的盒模型为何种盒模型，子元素的四个定位值都是相对于父元素内容区域的width和height。

transform: translate

取值为100%时，水平方向的值相对于自身的宽度，垂直方向的值相对于自身的高度

下面就是一个块级元素垂直居中的例子：

DOM结构如下：

<div class="father">
	<div class="son"></div>
</div>

CSS样式如下：

.father {
    position: relative;
    margin: 0 auto;
    width: 120px;
    height: 100px;
    background-color: lightpink;
}
.son {
    position: absolute;
    width: 50px;
    height: 50px;
    left: 50%;
    top: 50%;
    /* 相对于自身移动-50% */
    transform: translate(-50%, -50%);
    background-color: lightblue;
}

当没有设置transform: translate(-50%, -50%)时，元素的位置如下：

left和top定位值取值为50%时，使得子元素的左上角处于父元素的中心点。此时，只需要再让子元素自身向上移动自身距离的一半，向左移动自身距离的一半，就可以让子元素的中心点和父元素的中心点重合。

border-raduis

background-positon

font-size

取值为100%时，相对于父元素的字体的大小

line-height

本文作者： CoderLeiShuo
本文链接：https://coderleishuo.github.io/lele/42622.html
版权声明： 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。转载请注明出处！

---

好的东西应该像粥，是用时间熬出来的—— CoderLeiShuo

---

赏

谢谢你请我吃糖果

支付宝

微信