CSS长度单位

前言

说到css的单位，大家应该首先想到的是像素单位px，我们在网页布局中一般都是用px，但是近年来自适应网页布局越来越多，em和百分比也经常用到了。然后随着手机的流行，web app和hybrid app的开发，都用到了css3技术，在css3中，新增了许多单位，rem、vw和vh、vmin和vmax、ch和ex等等，那现在对这些单位分别做一下详细的介绍吧。

一、CSS单位

CSS 有几个不同的单位用于表示长度，一些设置 CSS 长度的属性有 width，margin，padding，font-size，border-width 等。长度由一个数字和单位组成（如 10px，2em 等），数字与单位之间不能出现空格，如果长度值为 0，则可以省略单位。对于一些 CSS 属性，长度可以是负数。有两种类型的长度单位：相对和绝对。

二、相对长度单位

相对长度单位指定了一个长度相对于另一个长度的属性。对于不同的设备相对长度更适用。

【1】em：相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。任意浏览器的默认字体大小都是16px，则2em == 32px。em的值并不是固定的；em会继承父级元素的字体大小。

 p {
      font-size: 12px;  /*设置段落文本属性*/
      line-height: 2em; /* 行高为24px */
    }
   
/* 可以看出，一个 em 等于 font-size 的属性值，
如果设置font-size: 12px，则line-height：2em就会等于 24px。
如果设置 font-size 属性的单位为 em，则 em 的值将根据父元素的 font-size 属性值来确定。
同理，如果父对象的 font-size 属性的单位也为 em，则将依次向上级元素寻找参考的 font-size 属性值，
如果都没有定义，则会根据浏览器默认字体进行换算，默认字体一般为 16px。*/

【2】ex：根据所使用的字体中小写字母 x 的高度作为参考。在实际使用中，浏览器将通过 em 的值除以 2 得到 ex 的值。为什么这样计算呢？因为 x 高度计算比较困难，且小写 x 的高度值是大写 x 的一半；另一个影响 ex 单位取值的是字体，由于不同字体的形状差异，这也导致相同大小的两段文本，但由于字体设置不同，ex 单位的取值也会存在很大的差异。

【3】ch：数字 0 的宽度

【4】rem：rem 是根 em（root em）的缩写，rem作用于非根元素时，相对于根元素字体大小；rem作用于根元素字体大小时，相对于其出初始字体大小。

    /* 作用于根元素，相对于原始大小（16px），所以html的font-size为32px*/
    html {
      font-size: 2rem
    }

    /* 作用于非根元素，相对于根元素字体大小，所以为64px */
    p {
      font-size: 2rem
    }

【5】vw：viewpoint width，视窗宽度，1vw=视窗宽度的1%。如果浏览器的width是900px，1vw求得的值为9px

【6】vh：viewpoint height，视窗高度，1vh=视窗高度的1%。如果浏览器的高是900px，1vh求得的值为9px

【7】vmin：vw和vh中较小的那个。如果浏览器设置为1100px宽、700px高，1vmin会是7px

【8】vmax：vw和vh中较大的那个。如果浏览器设置为1100px宽、700px高，1vmax会是11px

【9】%：百分比也是一个相对单位值。百分比值总是通过另一个值来计算，一般参考父对象中相同属性的值。例如，如果父元素宽度为 500px，子元素的宽度为 50%，则子元素的实际宽度为 250px。

【10】px：像素 (1px = 1/96th of 1in)   px单位是根据屏幕像素点来确定的。这样不同的显示分辨率就会使相同取值的 px 单位所显示出来的效果截然不同。譬如，Windows的用户所使用的分辨率一般是96像素/英寸，而MAC的用户所使用的分辨率一般是72像素/英寸。

三、绝对长度单位

绝对长度单位是一个固定的值，它反应一个真实的物理尺寸。绝对长度单位视输出介质而定，不依赖于环境（显示器、分辨率、操作系统等）。

【1】cm（centimeter）：厘米

【2】mm（millimeter）：毫米

【3】in（inch）：英寸， (1in = 96px = 2.54cm)

【4】pt（point）： 磅， 确切的说法是一个专用的印刷单位，大小为1/72英寸，用于印刷。

【5】pc（pica）：派卡，大约 12pt，相当于我国新四号铅字的尺寸

 

文章每周持续更新，可以微信搜索「 前端大集锦 」第一时间阅读，回复【视频】【书籍】领取200G视频资料和30本PDF书籍资料

​