CSS长度单位:vh、vw、vmin、vmax、em、rem、ex、ch、px

CSS的长度单位。

一些属性可能允许有负长度值,或者有一定的范围限制。如果不支持负长度值,那应该变换到能够被支持的最近的一个长度值。
长度单位包括包括:相对单位和绝对单位。
相对长度单位包括有: em, ex, ch, rem, vw, vh, vmax, vmin
绝对长度单位包括有: cm, mm, q, in, pt, pc, px

1、vh、vw

有点像width和height属性,v(viewpoint)也就是说vh、vw直接对应的是当前视口的尺寸。

width:100vh;
height:100vh;

width:100%;
height:100%;
以上两种表达有什么区别呢。如果浏览器高度为1000px,宽度为800px,那么1vh=1000/100=10px,1vw=800/100=8px;而 %要受到父元素的约束,并不能直接根据浏览器的尺寸计算。

2、vmin、vmax

vmin表示当前宽和高的小者,vmax则表示当前宽和高的大者。

3、em、rem

em同样是个相对大小的单位,下面是css3参考手册中的解释

相对长度单位。相对于当前对象内文本的字体尺寸。

如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。

rem

相对长度单位。相对于根元素(即html元素)font-size计算值的倍数

来自梦柯网的例子
body {
    font-size: 14px;
}
div {
    font-size: 1.2em; // calculated at 14px * 1.2, or 16.8px
}


    
Test
Test
Test
也就是说这样设置的话,每层都要看它的父元素,而这并不总是我们想要的,rem可以来补充em不足。

r(root)通常指标签,也就是只要用rem作为单位,都会以标签的设置为基础。

4、ex

相对长度单位。相对于字符“x”的高度。通常为字体高度的一半。

如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。

5、ch,是CSS3新增单位,有少部分浏览器不支持,如Android browser

数字“0”的宽度

6、px

相对长度单位。像素(Pixels)。

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

7、q

1/4毫米(quarter-millimeters)。绝对长度单位。

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

8、in

英寸(Inches)。绝对长度单位。

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

9、pt

点(Points)。绝对长度单位。

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

10、pc

派卡(Picas)。绝对长度单位。相当于我国新四号铅字的尺寸。

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

11、cm/mm

厘米/毫米

你可能感兴趣的:(CSS)