单位是我们控制尺寸的重要工具,也是我们在编写 CSS 代码时会经常使用到的。CSS 的单位主要分成两种:绝对单位和相对单位。

绝对单位

CSS 中的绝对单位包括:mm(毫米),cm(厘米),in(英寸),pt(点),pc(派卡)。

  • mm,cm,in 这三个都很好理解,就是我们拿着尺子对着屏幕量出来的真实宽度。不过说起来,现在全世界貌似只有美帝还在使用英寸作为长度单位,从侧面也可以看出美帝的影响力。(1英寸=2.54厘米)
  • pt 和 pc 这两个倒是不怎么常见。其中,pt(点)其实是一种标准印刷度量单位,长度上1英寸=72点。pc(派卡)也是印刷术语,1派卡=12点=1/6英寸。

事实上,我们很少需要用到绝对单位。因为一般来说我们网页需要在各种不同大小的屏幕上显示,使用绝对长度很难确保内容显示的一致性。

相对单位

CSS 中的相对长度单位包括:px(像素),em,ex,ch,rem,vw,vh,vmin,vmax

  • px(像素),像素就是显示器上的一个点。关于 px 是相对长度单位还是绝对长度单位这一点有争议,MDN把 px 归为绝对单位,而《CSS权威指南(第三版)》中则把它归为相对单位(因为取决于显示设备的分辨率)。
  • em,ex,ch。1em 被定义为一种给定字体的 font-size 值。比方说一个元素的 font-size 为 20px,那么对于这个元素,1em=20px。另外如果没有为当前元素指定 font-size,但是因为font-size值是会继承的,所以会取父元素的值。举个栗子:
<div>
    <p>Lorem ipsum <span>foo bar</span></p>
</div>

div {font-size: 20px;}
p {font-size: 1.2em;} //计算值为 20px*1.2 = 24px
span {font-size: 0.8em;} //计算值为 20px*1.2*0.8=19.2px
  • ex,ch。理论上,ex 是指所用字体中小写 x 的高度,ch 是指所用字体 0 的宽度,但是浏览器对两个单位的支持有限,很多浏览器的实际做法是取1ex=0.5em。
  • rem,即 root em,是 CSS 3中新定义的单位。与 em 类似,不过 rem 永远是以默认基础字体大小为参照的,继承的字体大小不会影响它。我们可以基于rem这一特性构建出响应式布局。一般浏览器默认的字体大小都是16px。
  • vw,vh,即 viewport width 和 viewport height,也是 CSS 3 中新添加的单位。1vw = 1/100 视口宽度(viewport width),1vh = 1/100视口高度(viewport height)。
  • vmin,vmax,这两个也是 CSS 3 新定义的视口单位。其中,vmin 取 vw 与 vh 中较小的那个单位,vmax 则相反取较大的那个。

百分比

百分比值是 CSS 中非常常用的一种数值,也是很多新手很容易困惑的地方。形式上百分比值就是实数+百分号(%)。因为百分比值几乎总是相对于另一个值的,而对于不同的属性,选择的参考值也是不同的,所以得到的计算值也会不同。

要想真正掌握百分比值的计算,首先要了解包含块(MDN)的概念。大多数情况下,包含块就是父级块元素的 content 区域,即内容区。

参照值属性
包含块宽度[max/min-]width、left、right、text-indent、padding-*、margin-* 等
包含块高度[max/min-]height、top、bottom 等
继承字号font-size 等
自身字号line-height 等
自身行高vertical-align 等
自身宽高border-*-*-radius 等
边界框尺寸transform: translate() 等
特殊情况background-position: 相对于背景区域尺寸减去背景图尺寸

参考资料

  1. 《CSS 权威指南(第三版)》
  2. CSS 的值和单位 - MDN
  3. All about the containing block - MDN
  4. CSS percentage values - MDN

标签: none

添加新评论