Home > css

CSS长度单位汇总

admin   ·   发表于 28天前   ·   css

通过前面的学习我们知道一个 CSS 样式由选择器、属性和值三个部分组成(例如 p{width: 100px;}),在设置某些属性值时可能会涉及到与值对应的单位。CSS 支持多种不同的长度单位,根据类型的不同可以分为两类,分别是绝对长度单位(例如英寸、厘米、点)和相对长度单位(例如百分比)。本节我们就来简单了解一下 CSS 中的几种度量单位。

1. 相对长度单位

相对长度单位指的是这个单位没有一个固定的值,它的值受到其它元素属性(例如浏览器窗口的大小、父级元素的大小)的影响,在响应式布局方面相对长度单位非常适用。下表中列举了 CSS 中支持的相对长度单位:

单位描述示例
em相对于自身 font-size(字体大小)属性的值,如果自身没有设置,则继承父元素 font-size 属性的值,1em 等同于 font-size 属性值,例如 font-size 的值为 16px,那么 1em 就等于 16px,2em 就等于 32pxp{line-height:2em;}
rem相对于根元素 <html> 的 font-size 属性的大小,比如根元素的 font-size 是 100px,那么 1.2rem 就相当于 120pxp{font-size: 1.2rem;}
ex相对于所用字体中小写英文字母 x 的高度,若无法确定 x 的高度则使用 0.5em 计算p{font-size: 1ex;}
ch相对于所用字体中数字 0 的高度,若无法确定 0 的高度则使用 0.5em 计算p{line-height: 3ch}
vw相对于浏览器窗口的宽度,1vw = 窗口宽度的 1%p{font-size: 5vw;}
vh相对于浏览器窗口的高度,1vh = 窗口高度的 1%p{font-size: 5vh;}
vminvw 与 vh 中较小的值p{font-size: 5vmin;}
vmaxvw 与 vh 中较大的值p{font-size: 5vmax;}
%相对于父元素宽度或字体大小的百分比div{width: 55%}


【示例】下面通过一个综合的示例演示相对长度单位的使用:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>CSS中的单位</title>
  5. <style>
  6. .box{
  7. width: 60vw;
  8. height: 88vh;
  9. border: 1ex solid black;
  10. font-size: 16px;
  11. }
  12. .info{
  13. font-size: 2em;
  14. }
  15. .ex > span{
  16. font-size: 3ex;
  17. }
  18. .ch > span{
  19. font-size: 4ch;
  20. }
  21. </style>
  22. </head>
  23. <body>
  24. <div class="box">
  25. 这是 16px 的字体
  26. <p class="info">这是 2em 的字体</p>
  27. <p class="ex">
  28. x:<span>这是 3ex 的字体</span>
  29. </p>
  30. <p class="ch">
  31. 0:<span>这是 4ch 的字体</span>
  32. </p>
  33. </div>
  34. </body>
  35. </html>

运行结果如下图所示:

相对长度单位的应用
图1:相对长度单位的应用

2. 绝对长度单位

绝对长度单位表示一个真实的物理尺寸,它的大小是固定的,不会因为其它元素尺寸的变化而变化。下表中列举了 CSS 中支持的绝对长度单位:

单位描述示例
cm厘米p{font-size: 0.5cm;}
mm毫米p{font-size: 5mm;}
in英寸(1in = 96px = 2.54cm)p{font-size: 1in;}
px像素(1px = 1/96in)p{font-size: 16px;}
ptpoint,是一种专用的印刷单位“磅”,也可以称为“点”(1pt = 1/72in)p{font-size: 16pt;}
pcpica,中文可称为“派卡”,印刷行业用于描述字体大小的单位,相当于我国新四号铅字的尺寸(1pc = 12pt)p{font-size: 5pc;}


【示例】下面通过一个综合的示例演示绝对长度单位的使用:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>CSS中的单位</title>
  5. <style>
  6. .box{
  7. width: 4in;
  8. height: 4.5cm;
  9. border: 2mm solid black;
  10. font-size: 16px;
  11. }
  12. .pt{
  13. font-size: 2pt;
  14. }
  15. .pc{
  16. font-size: 3pc;
  17. }
  18. </style>
  19. </head>
  20. <body>
  21. <div class="box">
  22. 这是 16px 的字体
  23. <p class="pt">这是 2pt 的字体</p>
  24. <p class="pc">这是 3pc 的字体</p>
  25. </div>
  26. </body>
  27. </html>

运行结果如下图所示:

绝对长度单位的应用
图2:绝对长度单位的应用
0 Reply   |  Until 28天前 | 15 View
LoginCan Publish Content