论css属性中的百分比与相对单位

发表于 分类于

前言

长期以来，每次在css属性中使用百分比或者其他一些相对单位时，心里总是有些迷惑，这些相对单位的比较值或者说比较对象到底是谁（即相对标准是啥）？在使用的时候也不太自信，因为有时候会出现一些超出自己『意料之外』的情况出现，所以说对于这些相对单位的准确定义还是不太了解，因此看起来就是一知半解，说不清个一二三。随着对前端知识体系的深入学习，越来越来发现自己的这种『一知半解』，看起来好像是明白，但实际上遇到问题时才发现自己什么都不知道，希望自己能够逐步地掌握精准的知识！

百分比相关属性

使用百分比最重要的肯定是要清楚它是什么的百分比，而『百分比的计算值通常是以元素的包含块为对象进行计算』，所以首先需要明白包含块是什么以及如何确定一个元素的包含块！

包含块

包含块（containing block）：用来确定和影响元素的尺寸和位置属性的矩形区域；

The size and position of an element are often impacted by its containing block. Percentage values that are applied to the width, height, padding, margin, and offset properties of an absolutely positioned element (i.e., which has its position set to absolute or fixed) are computed from the element’s containing block. ——MDN

一个元素的包含块完全受其position属性值的影响：

  1. static或relative：最近的块级（display属性值为block，inline-block或list-item）祖先元素的content-box区域；或者最近的建立格式上下文的祖先元素，比如：table容器，flex容器，grid容器或块级容器。

  2. absolute：最近的非static（fixed, absolute, relative, or sticky）祖先元素的padding-box区域。

  3. fixed：可视窗口viewport本身（属于continuous media类型时）或页面区域page area（属于paged media类型时），即初始包含块；

  4. 当属性值为fixed或absolute时，其包含块还有可能是最近的含有transform或perspective值不为none的祖先元素的padding-box区域。

注：html元素的包含块叫做初始包含块（initial containing block），它具有可视窗口（用于连续媒体）或页面区域（用于分页媒体）的尺寸。

百分比的使用

属性 百分比参照对象
width 包含块的宽度
height 包含块的高度
padding 包含块的宽度
margin 包含块的宽度
top 包含块的高度
right 包含块的宽度
bottom 包含块的高度
left 包含块的宽度
font-size 父元素的font-size值
tranlate()/translate3d() 元素自身的padding-box区域
x相对于宽度，y相对于高度，z？

注：当包含块的height为auto且position为static或relative时，height、top和bottom属性设置百分比无效，即百分比计算值为0！！！

padding的例子

1
2
3
<section class="container">
    <div class="box"></div>
</section>
1
2
3
4
5
6
7
8
9
10
11
12
.container{
    width: 500px;
    height: 300px;
    padding: 50px;
    background-color:lightgreen;
}
.box{
    width: 200px;
    height: 50px;
    padding: 10%;
    background-color: #36f;
}

mark

从.box的盒模型可以看到padding属性值为50px，正好是其包含块（.container的content-box）宽度的10%。

相对单位

相对单位 参照对象
em 当前元素的font-size属性值；
若是设置当前元素的font-size值时，则是父元素的font-size值；
rem 文档根元素html的font-size属性值；
ex 当前元素下小写x字母的高度；受字体和字体大小的影响。
ch 当前元素下数字0的宽度；受字体和字体大小的影响。
lh 当前元素的line-height属性值；
若是设置当前元素的line-height值时，则是父元素的line-height值；
rlh 根元素的line-height属性值；
vw 可视窗口宽度的1%
vh 可视窗口高度的1%
vi 初始包含块的inline轴方向大小的1%；
inline轴方向指的就是文字排列的方向；
vb 初始包含块的block轴方向大小的1%；
block轴方向是inline轴垂直的方向；
vmin min(vw, wh)
vmax max(vw, vh)

参考文档

  1. 布局和包含块 - CSS：层叠样式表 | MDN
  2. percentage - CSS: Cascading Style Sheets | MDN
  3. length - CSS：层叠样式表 | MDN
  4. CSS Logical Properties and Values - CSS: Cascading Style Sheets | MDN
  5. 《css世界》 —— 8.1.2 理解 font-size 与 ex、 em 和 rem 的关系