cm和mm的单位哪个大(cm和mm的单位哪个大,在卷尺上的图片吗)

大家好，我是Echa。

最近很多粉丝老铁私信我为什么这几天不创作新内容。真的很抱歉。我在广州被招为羊，最近一篇文章里提到过。今天是第四天，基本恢复了。Omicron BA.5其实没那么恐怖。招聘的前三天感觉很难受，熬过去就好了。不要惊慌。边肖现在可以继续认真地创作内容了。同时非常感谢你对我身体状况的默默关心。谢谢您们。

不容易创作，像老铁。关注和赞，我们会持续更新干货，快速收藏。谢谢大家！

说到CSS单位，像素单位(px)可能是最常用的一种。它是一个绝对的单位，也就是说一个10px的文本无论放在哪里都是一样的大小。单位可以影响颜色、距离、大小等一系列属性。CSS中有多种形式的单元。让我们来学习CSS中的单位吧！

1. 相对单位

相对单位是一个长度相对于另一个长度。CSS中的相对单位主要分为两类:

字体相对单位，他们都是根据font-size来进行计算的。常见的字体相对单位有：em、rem、ex、ch；视窗相对单位，他们都是根据视窗大小来决定的。常见的视窗相对单位有vw、vh、vmax、vmin。

让我们来看看这些常见的CSS单元。

（1）em 和 rem

Em是最常见的相对长度单位，适用于基于特定字体大小的排版。根据CSS，1em等于元素的font-size属性的值。

Em是相对于父元素的字体大小计算的。如果当前未设置内联文本的字体大小，则它是相对于浏览器的默认字体大小而言的。当DOM元素嵌套加深，同时又将字体大小值显式设置为多级的单位是em，那么就需要逐层计算，复杂度会很高。

当然，以上说法并不严谨。看一个例子:

& lt！DOCTYPE html & gt& lthtml lang = & # 34恩& # 34；& gt& lthead & gt& ltmeta charset = & # 34UTF-8 & # 34；& gt& lttitle & gt文档& lt/title & gt；& ltstyle & gt。父{ width:300 px；高度:300px字体大小:20px} .child { border:1em solid；} & lt/style & gt；& lt/head & gt；& ltbody & gt& ltdiv class = & # 34家长& # 34；& gt& ltdiv class = & # 34子& # 34；& gt儿童

那么如果我们将子元素的字体设置为30px:

。child { font-size:30px；边框:1em实心；}这时你可以看到子元素的边框宽度是30px，是相对于自身大小计算的:

因此可以得出结论，如果没有设置自身元素的字体大小，则按照其父元素的字体大小计算；如果元素本身已经设置了字体，则根据自己的字体大小进行计算。

除了字体大小和其他使用长度的属性(如边框宽度、宽度、高度、边距、填充、文本阴影等)之外，还可以使用Em单位。

所以em的使用比较复杂，可能会继承任何父元素的字体大小。需要小心使用。

Rem比em简单多了，是根据页面的根元素(root element)的字体大小来计算的。要修改上面的示例:

。child { font-size:30px；边框:1红色实心；} html { font-size:25px；}效果如下。可以看到，边框的长度变成了25px，这是根据根元素html的字体大小计算出来的:

如果没有设置根元素的字体大小，font-size: 1rem与font-size: initial的功能相同。

使用em和rem可以让我们足够灵活地控制整个元素的放大和缩小，而不是固定大小。什么时候应该使用em和rem？你可以根据两者的区别来选择:

两者在客户端中计算出来的样式都会以px的形式显示；rem是相对于根元素html的font-size计算，em 相对于元素的font-size计算；当需要根据浏览器的font-size设置缩放时，应该使用 rem；使用 em 应该根据组件的font-size来定，而不是根元素的font-size来定；rem 可以从浏览器字体设置中继承 font-size 值， em 可能受任何继承过来的父元素 font-size 的影响。（2）ex 和 ch

Ex ch和ex ch是排版单位，它们的大小取决于元素的字体大小和字体族属性。

ex 指的是所用字体中小写字母 x 的高度。因此，如果两个字体不一样，那么 ex 的值是不一样的。因为每种字体的小写 x 的高度是不一样的。ch 和 ex 类似，不过它是基于数字 0 的宽度计算的。会随着字体的变化而变化。而0 的宽度通常是对字体的平均字符宽度，它是一个估计值。由于 ch 是一个近似等宽的单元，所以在设置容器的宽度时很有用，比如一个容器想要显示指定个数的字符串时，就可以使用这个单位。（3）vw、vh、vmax 和 vmin

这四个单元都是窗口单元。所谓窗口，是指web端的可视区域，移动端的窗口是指布局窗口。如果窗口大小改变，这些值也会改变。这四个单位是指:

vw：视窗宽度的百分比；vh：视窗高度的百分比；vmax：较大的 vh 和 vw；vmin：较小的 vh 和 vw。

如果一个浏览器的高度是800px，那么1vh的值就是8px。vh和vw的大小总是与窗口的高度和宽度有关。

Vmin和vmax与窗宽和窗高的最大值和最小值有关。如果一个浏览器的高度是500px，宽度是1200px，那么1vmin就是5px，1vmax就是12px。

这些单位都是长度单位，所以可以用在任何允许长度单位的地方。这些单元更适合创建全视图界面，例如移动设备的界面，因为元素根据查看区域的大小而变化，并且与文档树中的任何元素无关。

2. 绝对单位

在CSS中，绝对单位包括:px、pt、pc、cm、mm、In等。绝对单位是一个固定值，反映了一个真实的物理大小。不会受到屏幕大小或者字体的影响。它们的大小取决于屏幕的值和分辨率(DPI，每英寸点数)。Px是我们最常用的绝对单位之一。这些绝对单位的换算关系如下:

1 in = 25.4mm = 2.54cm = 6pc = 72pt = 96px(1)pxpxx称为像素，就是像素的意思。它并不严格等于显示器的像素，尤其是在高清屏幕中。虽然CSS单位会根据浏览器、操作系统或硬件进行适当缩放，也会在某些设备或用户的分辨率设置下发生变化，但96px通常等于一个物理英寸的大小。

CSS光栅图像(如照片等)的显示方式。)被定义为每个图像的默认大小是1px。一张“600×400”分辨率照片的长宽分别为“600px”和“400px”，所以照片本身的像素与显示设备的像素并不一致，而是以px为单位。这样，图像可以完全与网页的其他元素排列在一起。

很多时候，px往往被称为CSS pixel。它是一个绝对单位，但也可以看作是一个相对单位，因为像素单位是相对于设备像素的。在同一设备上，每个CSS像素所代表的物理像素是可以改变的；在不同的设备之间，每个CSS像素所代表的物理像素是可以改变的。

。box { width:100px；高度:100px}(2)ptpt叫点，就是点的意思。常用于软件设计排版印刷行业(作者做的前端系统，最终产品是需要打印的PDF，所以会经常用到这个单元)。使用此单元时，无论显示器的分辨率如何，打印在纸上的结果都是一样的。

如果只是为了网页的显示，建议使用px像素单位。如果需要输出打印品，可以考虑使用pt。

（3）pc

整个pc都是Picas，就是送卡的意思。相当于中国新4号型的大小。派卡也是印刷术语。一张Pai卡等于12分。其与px的换算关系如下:

PC = 16px (4) CMCM叫做厘米，就是厘米的意思。其与px的换算关系如下:

1cm = 37.8px(5)mmmm称为毫米，是毫米的意思。其与px的换算关系如下:

1 = 3.78px (6) Inin叫做英寸，就是英寸的意思。其与px的换算关系如下:

1in = 96px3。频率单位CSS中有两种频率单位:赫兹(Hz)和千赫兹(kHz)。它们的转换关系如下:

1kHz = 1000Hz通常，频率单位用于听或说级联样式表。频率可以用来改变语音朗读文本的音调。低频是低音，高频是高音。

。低{音高:105赫兹；} .尖叫{音高:135赫兹；}需要注意的是，当值为0时，单位对值没有影响，但单位不能省略。也就是说0，0Hz和0kHz是不一样的。因此，在使用频率单位时，不要直接写0。此外，这两个单位不区分大小写。

4. 时间单位

CSS中有两种时间单位:秒和毫秒。这两个时间单位是CSS中的新单位。这两个单位之间的换算关系如下:

1s = 1000ms时间单位主要用于转场和动画中定义持续时间或延迟时间。以下两个定义是等效的:

a[href] {过渡-持续时间:2.5s}a[href] {过渡-持续时间:2500s}5.分辨率单位CSS中有三种分辨率单位:dpi、dpcm和dppx。这三个单元都是CSS3中国的新单元。都是正值，不允许负值。这三个单位的换算关系如下:

1 DPPX = 96 dpi 1 dpi≈0.39 DPCM 1 DPCM≈2.54 dpi分辨率单位主要用于媒体查询等操作。

（1）dpi

dpi的全称是每英寸点数，意思是每英寸点数。普通屏幕通常包含72或96个点，大于192dpi的屏幕称为高分辨率屏幕。

@ mediascreenand(最低分辨率:96 dpi) {…} @ mediaprintand(最低分辨率:300 dpi) {…}(2)DPCM·DPCM称为每厘米点数，意思是每厘米点数。

@ mediascreenand(最小分辨率:28 dpcm) {…} @ mediaprintand(最小分辨率:118 dpcm) {…}(3)dppPXdpx称为每像素点数，表示每像素点数(px)。由于CSS px的固定比例是1:96，所以1dppx相当于96dpi。它对应于由图像分辨率定义的CSS中显示的图像的默认分辨率。

@ mediascreenand(最小分辨率:2dppx) {…} @ mediascreenand(最小分辨率:1dppx)和(最大分辨率:1.9dppx) {…} 6.CSS中有四个角度单位:deg、grad、rad和turn。这些角度单位都是CSS3中的新单位。它们的转换关系如下:

0 deg = 100 grad = 0.25 turn≈1.570796326794897 rad通常这些角度单位用于元素的旋转操作，包括2D旋转、3D旋转等。

当旋转值为正值时，元素会顺时针旋转；当旋转值为负值时，元素会逆时针旋转。

通常，完整的旋转是360度。所以，所有的角度都在0-360度之间。然而，超出这个范围的值也是允许的，但是它们都落在0到360度之间。比如顺时针旋转420度(450度)，逆时针旋转270度(-270度)，顺时针旋转90度(90度)，效果是一样的，都会归为90度。但是在使用动画时，这些角度值非常重要。

CSS的旋转主要依靠transform属性中的rotate()，rotate3d，skew()等方法。只要给他们旋转的角度。

除了使用角度旋转之外，线性渐变还经常使用角度值:

背景:线性梯度(45度，#000，# fff)；(1)degdeg称为Degress，是度数的意思。一个圆总共是360度。

变换:旋转(2 deg)；gradgrad称为Gradians，意为梯度。一个圆总共有400个渐变。

变换:旋转(2g rad)；(4)拉德称为弧度，是弧度的意思。一个圆总共有2π弧度。

变换:旋转(2 rad)；(4)turnturn叫做Turns，意思是圈(转)。一个圆总共有一圈(转)。

变换:旋转(. 5 turn)；7.百分比单位百分比(%)也是我们常用的单位之一。所有接受长度值的属性都可以使用百分比单位。但是，对于不同的属性，使用该单位的效果可能会有所不同。但是必须有一个参考值，也就是说百分比值是一个相对值。

让我们来看看百分比单位在常见场景中的使用。

（1）盒模型中的百分比

CSS中的盒子模型包含宽度、最大宽度、最小宽度、高度、最大高度、最小高度、填充、边距等属性。使用百分比时，这些属性有不同的引用:

width、max-width、min-width：值为百分比时，其相对于包含块的 width 进行计算；height、max-height、min-height：值为百分比时，其相对于包含块的 height 进行计算；padding、margin：值为百分比时，如果是水平的值，就是相对于包含块的 width 进行计算；如果是垂直的值，就是相对于包含块的 height 进行计算。（2）文本中的百分比

CSS中文本控件的属性包括字体大小、行高、垂直对齐、文本缩进等。使用百分比时，这些属性有不同的引用:

font-size：根据父元素的font-size 进行计算；line-height：根据font-size进行计算；vertical-align：根据line-height进行计算；text-indent：如果是水平的，则根据width进行计算，如果是垂直的，则根据 height 进行计算。（3）定位中的百分比

在CSS中，控制位置的top、right、bottom和left都可以使用百分比作为单位。它的参考是在相同方向上的块的宽度和高度。不同的包含块位于不同的位置:

如果元素为静态（ static ）或相对定位（ relative ），包含块一般是其父容器；如果元素为绝对定位（ absolute ），包含块应该是离它最近的 position 为 absolute 、 relative 或 fixed 的祖先元素；如果元素为固定定位（ fixed ），包含块就是视窗（ viewport ）。（4）变换中的百分比

CSS中transform属性的translate和transform-origin的值也可以设置百分比。

translateX() 根据容器的 width 计算translateY() 根据容器的 height 计算transform-origin 中横坐标（ x ）相对于容器的 width 计算；纵坐标（ y ）相对于容器的 height 计算

注意，translate中还有一个z轴函数translateZ()。这是一个不接受百分比的值。