總結CSS中單位的計算（程式碼範例）

body { background-color: #000; color: skyblue; margin: 0; padding: 0; } body>div>div { border: 1px solid cyan; padding: 10px; margin: 10px; font-weight: bolder; } .s { background-color: #ddd; margin: 10px; white-space: nowrap; color: yellowgreen; }

/* list1 */ #length .list1s1 { width: 100px; height: 100px; } #length .list1s2 { width: 50px; height: 50px; }

 
px
 
像素，同一屏幕分辨率下是绝对单位。屏幕分辨率不同时，像素等比缩放。
 
100px X 100px
 
50px X 50px
 

/* list2 */ #length .list2fa1 { font-size: 18px; } #length .list2fa2 { font-size: 22px; } #length .list2s1 { width: 5em; height: 5em; } #length .list2s2 { width: 5em; height: 5em; }

 
em
 
相对单位，相对于父元素的字体大小
 
如果父元素font-size是20px，那么2em就是40px
 
em可精确到小数点后3位
 
 
5em X 5em
 
 
 
5em X 5em
 
 

/* list3 */ #length .list3s1 { width: 5rem; height: 5rem; }

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

/* list4 */ #length .list4s1 { width: 10ex; height: 1ex; } #length .list4s2 { width: 10ex; height: 2ex; } #length .list4fa3 { font-size: 20px; } #length .list4s3 { width: 10ex; height: 2ex; }

 
ex
 
相对单位，相对于字符的高度，通常为字体高度的一半
 
如果文字高度未设置，则相对于浏览器字体大小高度
 
 
10ex X 1ex
 
 
 
10ex X 2ex
 
 
 
10ex X 2ex
 
 

/* list5 */ #length .list5s1 { width: 3ch; } #length .list5s2 { width: 3ch; } #length .list5fa2 { font-size: 20px; } #length .list5s3 { width: 3ch; }

 
ch
 
相对单位，数字的宽度
 
 
111
 
111111
 
 
 
111
 
 

/* list6 */ #length .list6s1 { width: 10vw; height: 10vh; }

 
vw/vh
 
相对单位
 
视口横向被分割成100个vw，纵向被分割成100个vh
 
对于PC端来说，视口是浏览器可视区域
 
对于移动端来说，不论横屏还是竖屏，vw始终表示横向宽度，vh始终表示纵向宽度
 
10vw X 10vh
 

/* list7 */ #length .list7s1 { width: 10vmin; height: 10vmin; } #length .list7s2 { width: 10vmax; height: 10vmax; }

 
vmin/vmax
 
相对单位
 
视口的宽度和高度中比较小的为100vmin
 
视口的宽度和高度中比较大的为100vmax
 
10vmin X 10vmin
 
10vmax X 10vmax
 

/* list8 */ #length .list8s1 { width: 3cm; height: 3cm; } #length .list8s2 { width: 30mm; height: 30mm; } #length .list8s3 { width: 120q; height: 120q; }

 
cm/mm/q
 
绝对单位，厘米cm，毫米单位mm，1/4毫米q
 
3cm X 3cm
 
30mm X 30mm
 
120q X 120q
 

/* list9 */ #length .list9s1 { width: 10in; height: 10in; }

 
in
 
绝对单位，英寸in
 
10in X 10in
 

/* list10 */ #length .list10s1 { width: 5pt; height: 5pt; } #length .list10s2 { width: 50pt; height: 50pt; } #length .list10s3 { width: 5pc; height: 5pc; }

 
pt/pc
 
绝对单位，点pt，派卡pc
 
5pt X 5pt
 
50pt X 50pt
 
5pc X 5pc
 

/* list11 */ #length .list11f1 { width: 100px; height: 100px; } #length .list11s1 { width: 80%; height: 70%; } #length .list11f2 { width: 80px; height: 70px; } #length .list11s2 { width: 80%; height: 70%; }

 
%
 
相对数值，百分比，相对父元素
 
 
80% X 70%
 
 
 
80% X 70%
 
 

/* list1 */ #angle .list1s1 { width: 80px; height: 80px; transform: rotate(10deg) } #angle .list1s2 { width: 80px; height: 80px; transform: rotate(10grad) } #angle .list1s3 { width: 80px; height: 80px; transform: rotate(0.314rad) } #angle .list1s4 { width: 80px; height: 80px; transform: rotate(0.2turn) }

 
deg/grad/rad/turn
 
度deg，梯度grad，弧度rad，转turn
 
一个圆360deg，400grad，2πrad，1turn
 
10deg
 
10grad
 
0.314rad
 
0.2turn
 

/* list1 */ #layout-specific .list1fa1 { width: 100px; height: 100px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; } #layout-specific .list1fa1 p { border: 5px solid skyblue; }

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

/* list1 */ #color .list1s1 { width: 100px; height: 100px; background-color: darkseagreen; } #color .list1s2 { width: 100px; height: 100px; background-color: salmon; }

 
color name
 
使用颜色关键字指定颜色
 
darkseagreen
 
salmon
 

/* list2 */ #color .list2s1 { width: 100px; height: 100px; background-color: #f1d2b3; } #color .list2s2 { width: 100px; height: 100px; background-color: #a3c2e1; }

 
HEX
 
使用十六进制整数指定颜色
 
#f1d2b3
 
#a3c2e1
 

/* list3 */ #color .list3s1 { width: 100px; height: 100px; background-color: rgb(111,222,123); } #color .list3s2 { width: 100px; height: 100px; background-color: rgb(0,1,2); }

 
RGB
 
R:red;G:green;B:blue;
 
颜色的比例指定颜色
 
值在0到255之间
 
rgb(111,222,123)
 
rgb(0,1,2)
 

/* list4 */ #color .list4s1 { width: 100px; height: 100px; background-color: rgba(111,222,123,0.2); } #color .list4s2 { width: 100px; height: 100px; background-color: 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)
 

/* list5 */ #color .list5s1 { width: 100px; height: 100px; background-color: hsl(280, 50%, 60%); } #color .list5s2 { width: 100px; height: 100px; background-color: hsl(50, 50%, 60%); }

 
HSL
 
H:hue色调，0或者360表示红色，120表示绿色，240表示蓝色
 
S:saturation饱和度，取值在0.0%到100.0%之间
 
L:lightness亮度，取值在0.0%到100.0%之间
 
hsl(280, 50%, 60%)
 
hsl(50, 50%, 60%)
 

/* list6 */ #color .list6s1 { width: 100px; height: 100px; background-color: hsla(280, 50%, 60%,0.6); } #color .list6s2 { width: 100px; height: 100px; background-color: hsla(50, 50%, 60%,.6); }

 
HSLA
 
H:hue色调，0或者360表示红色，120表示绿色，240表示蓝色
 
S:saturation饱和度，取值在0.0%到100.0%之间
 
L:lightness亮度，取值在0.0%到100.0%之间
 
A:alpha透明度
 
hsla(280, 50%, 60%,0.6)
 
hsla(50, 50%, 60%,.6)
 

/* list7 */ #color .list7s1 { width: 100px; height: 100px; background-color: transparent; }

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

/* list8 */ #color .list8s1 { width: 100px; height: 100px; background-color: currentColor; }

 
currentColor
 
color具有继承性，currentColor相当于继承color颜色
 
currentColor
 

/* list1 */ #function .list1s1 { width: calc(50% - 20rem); height: calc(20em - 200px); } #function .list1s2 { width: calc(20rem - 150px); height: calc(200px - 6em); }

 
calc()
 
calc(四则运算)
 
用于动态计算长度值，运算符前后要加空格
 
calc(50% - 20rem) X calc(20em - 200px)
 
calc(20rem - 150px) X calc(200px - 6em)
 

/* list1 */ #content .list1s1 { width: 100px; height: 100px; } #content .list1s1:before { content: "("attr(datamsgb)")"; font-size: 12px; } #content .list1s1:after { content: attr(datamsga); font-size: 14px; }

 
attr()
 
用于content属性，取当前元素的属性值
 
可以拼接字符串
 
实际元素