当前位置：首页 > Web前端 > CSS

CSS单位计算汇总

时间：2023-03-31 01:18:44 CSS

CSS单位汇总公开部分cssbody{background-color:#000;颜色：天蓝色；保证金：0；padding:0;}body>div>div{border:1pxsolidcyan;填充：10px；边距：10px；font-weight:bolder;}.s{background-color:#ddd;边距：10px；空白：nowrap；color:yellowgreen;}长度为px像素，同屏幕分辨率下是绝对单位。当屏幕分辨率不同时，像素按比例缩放。/*list1*/#length.list1s1{width:100px;高度：100px；}#length.list1s2{宽度：50px；height:50px;

px

像素，同屏幕分辨率下的绝对单位。当屏幕分辨率不同时，像素按比例缩放。

100pxX100px

50pxX50px

em相对单位，相对于字体的parentelementSize如果父元素的font-size是20px，那么2em就是40pxem，可以精确到小数点后3位/*list2*/#length.list2fa1{font-size:18px;}#length.list2fa2{字体大小：22px;}#length.list2s1{宽度：5em;高度：5em；}#length.list2s2{宽度：5em；height:5em;

em

相对单位,相对于父元素的字体大小

如果父元素的font-size是20px，那么2em就是40px

em可以精确到小数点后3位

5emX5em

5emx5emrem相对单位，相对于html/*list3*/#length.list3s1{width:5rem;的字体大小height:5rem;

rem

相对单位，相对于html的字体大小

5remX5remex相对单位，相对于字符高度，一般为字体高度的一半如果不设置文字高度，则为相对于浏览器字体大小height/*list4*/#length.list4s1{宽度：10ex;高度：1ex；}#length.list4s2{宽度：10ex；高度：2ex；}#length.list4fa3{字体大小：20px；}#length.list4s3{宽度：10ex；height:2ex;

ex

相对单位，相对于字符的高度，一般为字体高度的一半

如果文字高度没有设置，是相对于浏览器字体大小的高度

10exX1ex10exX2ex10exX2exch相对单位,numberwidth/*list5*/#length.list5s1{width:3ch;}#length.list5s2{width:3ch;}#length.list5fa2{font-size:20px;}#length.list5s3{width:3ch;}

ch

相对单位，数字的宽度

111111111111vw/vh相对单位视口水平分成100vw，垂直分为100vh对于PC端，视口就是浏览器的可视区域对于移动端，无论横屏还是竖屏，vw始终表示水平宽度，vh始终表示垂直宽度/*list6*/#length.list6s1{宽度：10vw;高度：10vh;

相对单位

viewport分为横向100vw，纵向100vh

对于PC端来说，viewport就是viewable浏览器区域

对于移动端，无论横屏还是竖屏，vw始终表示水平宽度，vh始终表示垂直宽度

10vwX10vhvmin/vmax相对单位视口宽高，小的为100vmin，大的视口宽高为100vmax/*list7*/#length.list7s1{width:10v分钟；高度：10vmin；}#length.list7s2{宽度：10vmax；height:10vmax;

vmin/vmax

相对单位

视口宽和高取小者为100vmin

视口的宽度和高度较大者为100vmax

10vminX10vmin10vmaxX10vmaxcm/mm/q绝对单位，厘米cm，毫米单位mm，1/4mmq/*list8*/#length.list8s1{width:3cm;高度：3cm；}#length.list8s2{宽度：30mm；高度：30mm；}#length.list8s3{宽度：120q；身高：120q;

cm/mm/q

绝对单位，厘米cm，毫米单位mm，1/4mmq

3cmX3cm30mmX30mm120qX120qinabsoluteunits,inchesin/*list9*/#length.list9s1{width:10in;height:10in;

in

绝对单位，inchin

10inX10inpt/pcabsoluteunit,pointpt,Pikapc/*list10*/#length.list10s1{width:5pt;高度：5pt；}#length.list10s2{宽度：50pt；高度：50pt；}#length.list10s3{宽度：5pc；height:5pc;

pt/pc

绝对单位，点pt，picapc

5ptX5pt50ptX50pt5pcX5pc%%相对值，百分比，相对父级element/*list11*/#length.list11f1{width:100px;高度：100px;}#length.list11s1{宽度:80%;高度：70%；}#length.list11f2{宽度：80px；高度：70px；}#length.list11s2{宽度：80%；height:70%;

%

相对值，百分比，相对于父元素

80%X70%80%X70%角度deg/grad/rad/转度deg,渐变grad,弧度rad,转一圈deg,400grad,2πrad,1turn/*list1*/#angle.list1s1{width:80px;高度：80px；变换：旋转（10度）}#angle.list1s2{宽度：80px；高度：80px；变换：旋转（10grad）}#angle.list1s3{宽度：80px；高度：80px；变换：旋转（0.314rad）}#angle.list1s4{宽度：80px；高度：80px；transform:rotate(0.2turn)}

deg/grad/rad/turn

度数deg，渐变grad，弧度rad，转

一个圆360deg,400grad,2πrad,1turn

10deg10grad0.314rad0.2turntimes/ms秒s，毫秒ms用于设置动画执行时间频率Hz/kHz用于设置声音element频率布局fr用于分配一定长度内的剩余空间/*list1*/#layout-specific.list1fa1{width:100px;高度：100px；显示：网格；网格模板列：1fr1fr；grid-template-rows:1fr1fr;}#layout-specific.list1fa1div{border:5pxsolidskyblue;}

fr

用于分配剩余空间在一定长度内

分辨率dpi/dpcm/dppx每英寸点数dpi每厘米点数dpcm每像素点数dppxcolor颜色名称使用color关键字指定颜色/*list1*/#color.list1s1{width:100px;高度吨：100像素；背景颜色：darkseagreen;}#color.list1s2{宽度：100px;高度：100px；background-color:salmon;

颜色名称

使用color关键字指定颜色

darkseagreensalmonHEX使用十六进制整数指定颜色/*list2*/#color.list2s1{width:100px;高度：100px；背景色：#f1d2b3;}#color.list2s2{宽度：100px;高度：100px；background-color:#a3c2e1;

HEX

使用十六进制整数指定颜色

#f1d2b3#a3c2e1RGBR:red;G:green;B:blue;颜色的比例指定0到255之间的颜色值/*list3*/#color.list3s1{width:100px;高度：100px；背景色：rgb(111,222,123);}#color.list3s2{宽度：100px;高度：100px；背景色：rgb(0,1,2);

RGB

R:red;G:green;B:blue;

颜色的比例指定颜色

取值在0到255之间

rgb(111,222,123)rgb(0,1,2)RGBAR:red;G:green;B：蓝色；A：阿尔法；颜色的比例指定了颜色，alpna指定了0到255之间的透明度值，alpha的值在0到1之间，0.2可以用.2表示/*list4*/#color.list4s1{width:100px;高度：100px；背景色：rgba(111,222,123,0.2);}#color.list4s2{width:100px;高度：100px；背景颜色：rgba(111,222,123,.2);

RGBA

R:red;G:green;B:blue;A:alpha;

颜色的比例指定颜色，alpna指定透明度

在0到255之间，alpha的值在0到1之间，0.2可以表示为.2

rgba(111,222,123,0.2)rgba(111,222,123,.2)HSLH:hue色调,0或代表红色，120代表绿色，240代表蓝色S：saturation饱和度，取值范围为0.0%~100.0%L：lightness亮度，取值范围为0.0%~100.0%/*list5*/#color.list5s1{宽度：100px；高度：100px；背景色：hsl(280,50%,60%);}#color.list5s2{宽度：100px;高度：100px；background-color:hsl(50,50%,60%);

HSL

H:hue色调，0或360表示红色，120表示green，240表示蓝色

S：饱和度，取值在0.0%到100.0%之间

L：亮度，取值在0.0%到100.0%之间

hsl(280,50%,60%)hsl(50,50%,60%)HSLAH:色调,0或360代表红色，120代表绿色，240代表蓝色S：saturation饱和度，取值在0.0%到100.0%之间L：lightness亮度，取值在0.0%到100.0%之间A：alpha透明度/*list6*/#color.list6s1{宽度：100px；高度：100px；背景色：hsla(280,50%,60%,0.6);}#color.list6s2{width:100px;高度：100px；background-color:hsla(50,50%,60%,.6);

HSLA

H:hue,0or360表示红色，120表示绿色，240表示蓝色

S：saturation饱和度，取值在0.0%到100.0%之间

L：亮度，取值在0.0%到100.0%之间100.0%

A：alpha透明度

hsla(280,50%,60%,0.6)hsla(50,50%,60%,.6)透明全黑透明色，即rgba(0,0,0,0)/*list7*/#color.list7s1{宽度：100px；高度：100px；background-color:transparent;

transparent

全黑透明色，即rgba(0,0,0,0)

transparentcurrentColorcolor有继承，currentColor相当于继承colorcolor/*list8*/#color.list8s1{width:100px;高度：100px；background-color:currentColor;

currentColor

color是继承的，cu??rrentColor相当于继承color

currentColor函数calc()calc（四次运算）用于动态计算长度值，运算符前后要加空格/*list1*/#function.list1s1{width:calc(50%-20rem);高度：计算（20em-200px）；}#function.list1s2{宽度：计算（20rem-150px）;高度：计算（200px-6em）；}

calc()

calc(FourArithmeticOperations)

用于动态计算长度值，必须加空格运算符前后

calc(50%-20rem)Xcalc(20em-200px)calc(20rem-150px)Xcalc(200px-6em)生成的内容attr()用于内容属性，可以使用当前元素的属性值拼接字符串/*list1*/#内容.list1s1{宽度：100px；高度：100像素；}#内容。list1s1:before{内容:"("attr(datamsgb)")";font-size:12px;}#content.list1s1:after{content:attr(datamsga);font-size:14px;

attr()

content属性，取当前元素的属性值

即可拼接字符串

实际元素

上一篇：2020年3月遇到的知识点整理

下一篇：波纹按钮实现

CSS单位计算汇总相关文章

最新推荐

猜你喜欢