CSS 常用单位

1、px

px是绝对单位,一个像素代表一个点。如100px*100px的正方形,则是由宽度100个点,长度100个点组成的平面

2、百分比 %

相对长度单位,指占用的父元素宽度/高度的比例。
当指定为100%时,会占据父元素的全部宽度或高度;
也可以指定大于100%的数值,这时,子元素会超出父元素的边界。

3、em

em是相对单位,它的参考对象是它的父级的字号,如父级字号是16px,如果设置元素的字号大小为2em的话,元素的字号大小则为32px

4、rem

rem由页面的根元素html的字号决定,浏览器一般默认的字号为16px,如设置元素的字号大小为1rem,则元素的字号大小为16px

5、vh

浏览器视觉窗口的高度,分为100份,每份为1vh,如我们设置元素高度为20vh,则元素的高度为视觉窗口高度的20%

6、vw

浏览器视觉窗口的宽度,分为100份,每份为1vw,如我们设置元素宽度为100vh,则元素的宽度为视觉窗口宽度的100%

7、vmax vmin

vmax:取当前vw,vh中的较大的那个数值计算
vmin:取当前vw,vh中的较小的那个数值计算

可视区域 1vmax 1vmin
1920x1080 1920px/100 = 19.2px 1080px/100 = 10.8px
720x680 720px/100 = 7.2px 680px/100 = 6.8px

8、rpx

小程序中的单位,把屏幕分成750等分,每一份为1rpx。规定屏幕宽为750rpx。
1px约等于2rpx

注意:css的单位可以用于计算,使用 calc()

width: calc(100% - 80px);
posted @ 2022-05-06 10:31  清和时光  阅读(156)  评论(0编辑  收藏  举报