CSS单位
Css 单位
- Px:像素或许被认为是最好的“设备像素”,而这种像素长度和你在显示器上看到的文字屏幕像素无关。px实际上是一个按角度度量的单位。在web上,像素仍然是典型的度量单位,很多其他长度单位直接映射成像素,最终,他们被按照像素处理,javascript语言里的单位就是使用的像素。
- In: 英寸是一个物理度量单位,但是在CSS领域,英寸只不过被直接映射成像素罢了。
- Cm: 厘米。
- Mm: 毫米。
相对字体长度:
- Em:Em 是一个相对单位。起初排版度量时是基于当前字体大写字母”M”的尺寸的。当改变font-family时,它的尺寸不会发生改变,但在改变font-size的大小时,它的尺寸就会发生变化。 在没有任何CSS规则的前提下,1em的长度是: 1em=16px=0.17in=12pt=1pc=4.2mm=0.42cm
Em单位有点古怪,当设置了font-size属性后,它会逐级向上相乘,所以如果一个设置了font-size:1.1em的元素在另一个设置了font-size:1.1em的元素里,而这个元素又在另一个设置了font-size:1.1em的元素里,那么最后计算的结果是1.1X1.1X1.1=1.331rem(根em)。这意味着即使一个元素设置为10em,这个元素也不会在他出现的每个地方都是10em。如果font-size变化了,它可能会宽点,也可能会窄点。
- Rem: Rem和em一样也是一个相对单位,但是和em不同的是rem总是相对于根元素(如:root{}),而不像em一样使用级联的方式来计算尺寸。
- Point: Point是一个物理度量单位,1pt=1/72 in.在CSS之外point是最常用的尺寸类型(可能这就是css支持point的原因)。它在语言里也很常见“当然他们把这个重要的信息设置成了小八号字体”。在打印样式表和物理媒介中,point是最有意义的,当然你也可以用在屏幕媒介上使用,或者其他的地方
- Pica: Pica和points一样,只不过1pc=12pt。
- Ex: ex是一个基于当前字体的x字母高度度量的。ex度量时有时候根据字体自身的信息,有时候由浏览器指明是通过一个小写字形来度量,最糟糕的情况是,它被设置成0.5em。它之所以被命名为“x”的高度,是因为是基于x字母的高度的。要理解x-height,想象一个小写字母,比如“d”,它会有一部分翘起,x-height是不包括翘起的这一部分的,它的高度是那个字母最下面的那一部分。和em不同,当改变font-family时em不会改变,而ex单位会变化,因为一个单位的值和那个字体是特殊的约束关系。
- Ch: ch的内涵和x高度相似,只是ch是基于字符0的宽度的而不是基于字符x高度的。当font-family改变的时候ch也会随着改变。
可视区百分比长度单位:
- Vw: vw是可视区宽度单位。1vw等于可视区宽度的百分之一。vw单位跟百分比很相似,不同的是vw的值对所有的元素都一样,与他们父元素或父元素的宽度无关。有点像rem单位那样总是相对于根元素。
- Vh:vh和vw(viewport widht)单位一样,不同的是vh是相对于可视区的高度。
- Vmin:vmin的值是当前vw和vh中较小的值。在标准尺寸类型的使用实例中,和由自己确定屏幕大小的vw、vh单位相比,vmin是一个更有用的度量标准。
- Vmax:Vmax的值是vw和vh中的较大的值
离奇的长度单位:
百分比:
以百分比为单位的长度值是基于具有相同属性的父元素的长度值。例如,如果一个元素呈现的宽度是450px,子元素的宽度设为50%,那么子元素呈现的宽度为225px
转自:https://www.cnblogs.com/dedao97/p/9846260.html