css有几个不同的单位表示长度

一些设置css长度的属性有 width,height,margin,padding等

长度有一个数字和单位组成 如10px,2em,等。
数字与单位之间不能出现空格。如果长度值为 0,则可以省略单位。

对于一些 CSS 属性,长度可以是负数。

有两种类型的长度单位:相对和绝对。

相对长度

对于一些 CSS 属性,长度可以是负数。

有两种类型的长度单位:相对和绝对。

相对长度

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

1.em

em 是一个相对单位。起初排版度量时是基于当前字体大写字母”M”的尺寸的。当改变font-family时,它的尺寸不会发生改变,但在改变font-size的大小时,它的尺寸就会发生变化。

**在没有任何CSS规则的前提下,1em的长度是:
1em == 16px == 0.17in == 12pt == 1pc == 4.2mm == 0.42cm**

如果有任何CSS规则改变了字体大小(不管在文档的什么位置),1em的长度会变成相对于新的font-size的大小。

2.rem

rem和em一样也是一个相对单位,但是和em不同的是rem总是相对于根元素(如:html{}),而不像em一样使用级联的方式来计算尺寸。这种相对单位使用起来更简单。

3.vw

vw是可视区宽度单位。1vw等于可视区宽度的百分之一。vw单位跟百分比很相似,不同的是vw的值对所有的元素都一样,与他们父元素或父元素的宽度无关。有点像rem单位那样总是相对于根元素。

viewpoint width,视窗宽度,1vw=视窗宽度的1%

4.vh
vh和vw(viewport widht)单位一样,不同的是vh是相对于可视区的高度。

viewpoint height,视窗高度,1vh=视窗高度的1%

5.vmin
vmin的值是当前vw和vh中较小的值。在标准尺寸类型的使用实例中,和由自己确定屏幕大小的vw、vh单位相比,vmin是一个更有用的度量标准。

6.vmax

Vmax的值是vw和vh中的较大的值。

7.%

以百分比为单位的长度值是基于具有相同属性的父元素的长度值。

图1

绝对长度

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

px

像素或许被认为是最好的“设备像素”,而这种像素长度和你在显示器上看到的文字屏幕像素无关。px实际上是一个按角度度量的单位。

图2

我这边给大家一个地址,可以换算单位
http://pxtorem.com/

好啦,今天就聊到这里,觉得对您有帮助的话,点个关注再走呗

如有不足,请多多指教

vx:bsl521921


酷酷的long
27 声望2 粉丝

« 上一篇
GitFlow
下一篇 »
Grid布局