CSS常用尺寸单位含义总结

CSS常用尺寸单位含义总结(em,rem,ex,px,cm,mm,in,pt,pc,ch,vw,vh,vmin,max,%,fr。。。)

在这里插入图片描述
在这里插入图片描述



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

|  px  | 像素(Pixels)。相对长度单位。 |
|  cm  | 厘米(Centimeters)。绝对长度单位。 |
|  mm  | 毫米(Millimeters)。绝对长度单位。 |
|  vw  | 相对于视口的宽度。视口被均分为100单位的vw。 | 如果视口的宽度是200mm,那么
         h1元素的字号8vw将为16mm,即(8x200)/100|
|  vh  | 相对于视口的高度。视口被均分为100单位的vh。 | 如果视口的高度是200mm,那么
         h1元素的字号8vh将为16mm,即(8x200)/100|
| vmin | 相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin。 | 
         如果视口的宽度是300mm,高度是200mm,那么h1元素的字号8vmin将为16mm,即(8x200)/100,
         因为高度比宽度要小,所以计算的时候相对于高度。 |
| vmax | 相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax。 | 
         如果视口的宽度是300mm,高度是200mm,那么h1元素的字号8vmax将为24mm,即(8x300)/100,
         因为宽度比高度要大,所以计算的时候相对于宽度。 |
|  em  | 假定当前默认字体尺寸是14px,n em 即为14px字体尺寸的n倍。 | 相对长度单位。相对
         于当前对象内文本的字体尺寸。 | 如当前对行内文本的字体尺寸未被人为设置,则相对于浏览
         器的默认字体尺寸。也叫做1倍字宽。 |
| rem  | 相对于根元素( 即html元素 ) font-size 计算值大小的倍数。相对长度单位。 |
|  in  | 英寸(Inches)。绝对长度单位。 |
|  ch  | 一个数字“0”的宽度。绝对单位。 |
|  pt  | 点(Points)。绝对长度单位。 |
|  pc  | 派卡(Picas)。绝对长度单位。相当于我国新四号铅字的尺寸。 |
|  ex  | 相对长度单位。相对于字符“x”的高度。通常为字体高度的一半。 | 如当前对行内文本的字体
         尺寸未被人为设置,则相对于浏览器的默认字体尺寸。 |
|  fr  | 被用于在一系列长度值中分配剩余空间,如果已指定了多个部分,则剩下的空间根据各自的数
         字按比例分配。 | 类似flex布局数字分配,弹性尺寸使用fr尺寸单位,其来自“fraction”这
         个单词的前两个字母,表示整体空间的一部分。 |
|   %  | % 就不解释了,我们都懂!!! |



发布了32 篇原创文章 · 获赞 1 · 访问量 2820

猜你喜欢

转载自blog.csdn.net/YOUAREHANDSOME/article/details/105338589