css值和单位详解(聊聊CSS里面的单位)

关注程序员耳东,编程转码真轻松

对于CSS中设置长度宽度等等尺寸的时候,初学者肯定见过最多的是px,但是随着学习的深入你会发现还有em、rem、vh、vw等等很多单位,是不是开始慌了⊙﹏⊙

这篇笔记就聊聊CSS中的单位,欢迎大家学习和自查

相对单位和绝对单位

在设置尺寸的时候,这些CSS单位可以大体分为两类

一类是绝对单位,比如像px这种,你设置了多少就是多少,它就是以像素来做展示

另一类是相对单位,比如像em这种,你设置了CSS属性之后,它会根据某个值去做计算才会得出来最后的结果,所以它是个相对的概念

绝对单位

所谓绝对单位,就是你设置了这个尺寸,它就一直是多少,它在同一个屏幕上就展示那么多像素,不会受到屏幕大小和字体大小的影响,它只和屏幕的分辨率相关

px

px这个单位可能是最常见的,也是新手用的最多的,这个单位的意思很直白:

1px=1逻辑像素

什么是逻辑像素呢?

首先说什么是物理像素,物理像素就是显示屏幕上的1个像素点,比如说320480的屏幕,物理像素的个数就是320480个

那么什么是逻辑像素呢?就是早期的时候,1个逻辑像素就等于1个物理像素,但是后来某些厂商为了让显示屏幕更加的清晰,就在单位面积上增加更多的物理像素而且屏幕的尺寸不变,也就是说原来1个物理像素的位置可能要放2个物理像素了,但如果这样的话,如果一个宽度是320px的网页,在分辨率是320480的屏幕上可以占满宽度,在分辨率是640960的屏幕上就只能占一半的宽度了

这显然是不合理的,所以我们引入了逻辑像素的概念,在真正渲染的时候,会把逻辑像素和物理像素做一个转换,我们平时在CSS里面写的就是逻辑像素

pt

pt(Point),平时用的很少,它的意识就是点(磅)

pt是排版印刷行业字体的常用单位,它是一个真实的物理长度单位,表示72分之一英寸

#### pc

pc 全程为 Picas,表示派卡。

它相当于我国新四号铅字的尺寸,它也是印刷的术语。它和 px 的换算关系如下: 1pc = 16px

cm

cm 其实就是 Centimeters(厘米)

它和 px 的换算关系如下: 1cm = 37.8px

mm

mm顾名思义就是毫米

1mm = 3.78px

in

in其实就是英寸(inches)的缩写

1in = 96px

相对单位em和rem

em和rem是相对于字号来计算尺寸的单位

先说em,它是相对于父元素的字体来做计算的,但如果当前元素自身就设置了字体大小,那就根据自身的字体来做计算,比如说下面这段代码:

css值和单位详解(聊聊CSS里面的单位)(1)

px-box这个元素的宽高设置的是1em,同时又设置了font-size是20px,那么宽高计算出来就是1*20=20px

如果你不给它的父元素设置字体大小,它会一直往上找,如果找不到字体大小,那就按浏览器默认的字体大小16px来算

然后再说rem,rem和em相比就是多了一个r,这个r的意思就是root(根元素)的意思,所谓根元素就是html元素

也就是说,以rem作为单位的属性,会去找html元素上面设置的字体大小,然后根据html元素font-size的值计算出最终的rem结果

如果没有给html设置font-size属性,那么就按浏览器的默认font-size来做计算

vw、vh、vmax和vmin

这几个单位就是相对于视窗的单位,也是非常实用的

这里说的视窗指的是可视区域,视窗的尺寸发生变化时,这几个单位的值也会相对发生变化

  • vw:视窗宽度的百分值,比如说视窗宽度是1200px,那么1vw=1200/100=12px
  • vh:视窗高度的百分值,比如说视窗高度是800px,那么1vh=800/100=8px
  • vmax和vmin:vmax代表视窗宽度和高度中相对较大的那个百分值,vmin代表视窗宽度和高度中相对较小的那个百分值,比如视窗宽1200px高800px,那么vmax就等于1200/100=12px,vmin就等于800/100=8px
ex和ch

这两个单位我没使用过,我摘一段描述放在这里供大家参考:

ex 和 ch 都是排版用的单位,它们的大小取决于元素的font-size 和 font-family属性

ex 指的是所用字体中小写字母 x 的高度。因此,如果两个字体不一样,那么 ex 的值是不一样的。因为每种字体的小写 x 的高度是不一样的

ch 和 ex 类似,不过它是基于数字 0 的宽度计算的。会随着字体的变化而变化。而0 的宽度通常是对字体的平均字符宽度,它是一个估计值。由于 ch 是一个近似等宽的单元,所以在设置容器的宽度时很有用,比如一个容器想要显示指定个数的字符串时,就可以使用这个单位

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页