在CSS中存在众多的长度单位,它们又有什么意思与用途呢?
在CSS中,长度单位分为两种,绝对长度与相对长度
绝对长度:px,cm,in,mm,pt,px,px
相对长度:%,em,rem,vh,vw,vmin,vmax
绝对长度
px:即像素pixel,它是最基础也是最常用的一个长度单位
cm:即厘米, 1cm=37.8px
mm:即毫米,1mm=3.78px
in:即英尺inch, 1in=2.54cm=96px
pt:即点point,1pt=1/72in=1.33px
pc:即派卡,1pc=12pt=16px,派卡是印刷行业的长度单位
相对长度
em:一个字符大小,字符大小在浏览器中默认为16px
rem:相对于根元素HTML的字体大小,我们将HTML字体大小设置为100px,则可以更为方便的计算
%:百分比是一个相对长度单位,相对于包含块(containing block)的高宽或字体大小
关于包含块(containing block)的概念,不能简单地理解成是父元素。
如果是静态定位和相对定位,包含块一般就是其父元素。
如果是绝对定位的元素,包含块应该是离它最近的 position为非static属性的祖先元素。
如果是固定定位的元素,它的包含块是视口(viewport)
vh:视口高度,默认为视口高度的1%
vw:视口宽度,默认为视口宽度的1%
vmin:布局视口高度和宽度之中值较小的那个的 1/100
vmax:布局视口高度和宽度之中值较大的那个的 1/100
关于使用%时,如何确定其相对于谁可参考以下文章:https://www.cnblogs.com/jesse131/p/9079219.html
原文:https://www.cnblogs.com/ffyd-0511/p/11165848.html