每天一个前端小知识(6)--css单位

CSS长度单位

绝对长度单位

px

px是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI(Dots Per Inch,每英寸像素数),在扫描打印时一般都有DPI可选。Windows系统默认是96dpi,Apple系统默认是72dpi。

想要了解更多关于px的内容,可以参考这篇文章

in、cm、mm、pt

  • in: 英寸,1in == 96px
  • cm:厘米,1cm == 37.8px
  • mm:毫米,1mm == 0.1cm == 3.78px
  • pt:point,一般用于打印

1in = 2.54cm = 25.4 mm = 72pt = 96px

in、cm、mm、pt,这些也都是绝对长度,但是基本上没有人会用。

相对长度单位

em

em是相对于他的父节点font-size的长度单位,而且会多级节点意味着多级嵌套。

rem

rem为root em,即相对于根节点font-size的长度单位,如下图所示。

每天一个前端小知识(6)--css单位

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>css长度单位</title>
    <style>
      html {
        font-size: 16px;
      }
      .em1, .em2, .em3{
        font-size: 1.5em;
        border: 1px solid #333;
        margin: 3px;
      }
      .rem1, .rem2, .rem3{
        font-size: 1.5rem;
        border: 1px solid #333;
        margin: 3px;
      }
    </style>
  </head>
  <body>
    <div class="em1">
      em1
      <div class="em2">
        em2
        <div class="em3">
          em3
        </div>
      </div>
    </div>
    <div class="rem1">
      rem1
      <div class="rem2">
        rem2
        <div class="rem3">
          rem3
        </div>
      </div>
    </div>
  </body>
</html>

视窗长度单位

vw

100vw表示可视区的宽度

vh

100vh表示可视区的高度

vmin

min(100vh, 100vw):表示可视区宽度和高度的最小值

vmax

max(100vh, 100vw):表示可视区宽度和高度的最大值

百分比

严格意义上来说,百分比并不是单位,表示相对于父组件相同属性的值的大小。

每天一个前端小知识(6)--css单位

上一篇:gin学习笔记--文件上传


下一篇:用反射机制实现对数据库数据的增、查例子