CSS中单位的计算示例
这篇文章给大家分享的是有关CSS中单位的计算示例的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。
创新互联专注于凌源企业网站建设,成都响应式网站建设公司,成都做商城网站。凌源网站建设公司,为凌源等地区提供建站服务。全流程定制网站设计,专业设计,全程项目跟踪,创新互联专业和态度为您提供的服务
CSS单位总结
公共部分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; }
长度
px
像素,同一屏幕分辨率下是绝对单位。屏幕分辨率不同时,像素等比缩放。
/* list1 */ #length .list1s1 { width: 100px; height: 100px; } #length .list1s2 { width: 50px; height: 50px; }
px
像素,同一屏幕分辨率下是绝对单位。屏幕分辨率不同时,像素等比缩放。
100px X 100px50px X 50px
em
相对单位,相对于父元素的字体大小
如果父元素font-size是20px,那么2em就是40px
em可精确到小数点后3位
/* 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 5em5em X 5em
rem
相对单位,相对于html的字体大小
/* list3 */ #length .list3s1 { width: 5rem; height: 5rem; }
rem
相对单位,相对于html的字体大小
5rem X 5rem
ex
相对单位,相对于字符的高度,通常为字体高度的一半
如果文字高度未设置,则相对于浏览器字体大小高度
/* 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 1ex10ex X 2ex10ex X 2ex
ch
相对单位,数字的宽度
/* list5 */ #length .list5s1 { width: 3ch; } #length .list5s2 { width: 3ch; } #length .list5fa2 { font-size: 20px; } #length .list5s3 { width: 3ch; }
ch
相对单位,数字的宽度
111111111111
vw/vh
相对单位
视口横向被分割成100个vw,纵向被分割成100个vh
对于PC端来说,视口是浏览器可视区域
对于移动端来说,不论横屏还是竖屏,vw始终表示横向宽度,vh始终表示纵向宽度
/* list6 */ #length .list6s1 { width: 10vw; height: 10vh; }
vw/vh
相对单位
视口横向被分割成100个vw,纵向被分割成100个vh
对于PC端来说,视口是浏览器可视区域
对于移动端来说,不论横屏还是竖屏,vw始终表示横向宽度,vh始终表示纵向宽度
10vw X 10vh
vmin/vmax
相对单位
视口的宽度和高度中比较小的为100vmin
视口的宽度和高度中比较大的为100vmax
/* list7 */ #length .list7s1 { width: 10vmin; height: 10vmin; } #length .list7s2 { width: 10vmax; height: 10vmax; }
vmin/vmax
相对单位
视口的宽度和高度中比较小的为100vmin
视口的宽度和高度中比较大的为100vmax
10vmin X 10vmin10vmax X 10vmax
cm/mm/q
绝对单位,厘米cm,毫米单位mm,1/4毫米q
/* 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 3cm30mm X 30mm120q X 120q
in
绝对单位,英寸in
/* list9 */ #length .list9s1 { width: 10in; height: 10in; }
in
绝对单位,英寸in
10in X 10in
pt/pc
绝对单位,点pt,派卡pc
/* 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 5pt50pt X 50pt5pc 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%
角度
deg/grad/rad/turn
度deg,梯度grad,弧度rad,转turn
一个圆360deg,400grad,2πrad,1turn
/* 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
10deg10grad0.314rad0.2turn
时间
s/ms
秒s,毫秒ms
用于设定动画执行的时间
频率
Hz/kHz
用于设定声音元素频率
布局
fr
用于分配一定长度内的剩余空间
/* 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
用于分配一定长度内的剩余空间
分辨率
dpi/dpcm/dppx
每英寸包含点的数量dpi
每厘米包含点的数量dpcm
每像素包含点的数量dppx
颜色
color name
使用颜色关键字指定颜色
/* list1 */ #color .list1s1 { width: 100px; height: 100px; background-color: darkseagreen; } #color .list1s2 { width: 100px; height: 100px; background-color: salmon; }
color name
使用颜色关键字指定颜色
darkseagreensalmon
HEX
使用十六进制整数指定颜色
/* list2 */ #color .list2s1 { width: 100px; height: 100px; background-color: #f1d2b3; } #color .list2s2 { width: 100px; height: 100px; background-color: #a3c2e1; }
HEX
使用十六进制整数指定颜色
#f1d2b3#a3c2e1
RGB
R:red;G:green;B:blue;
颜色的比例指定颜色
值在0到255之间
/* 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)
RGBA
R:red;G:green;B:blue;A:alpha;
颜色的比例指定颜色,alpna指定透明度
值在0到255之间,alpha的值在0到1之间,0.2可以用.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)
HSL
H:hue色调,0或者360表示红色,120表示绿色,240表示蓝色
S:saturation饱和度,取值在0.0%到100.0%之间
L:lightness亮度,取值在0.0%到100.0%之间
/* 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%)
HSLA
H:hue色调,0或者360表示红色,120表示绿色,240表示蓝色
S:saturation饱和度,取值在0.0%到100.0%之间
L:lightness亮度,取值在0.0%到100.0%之间
A:alpha透明度
/* 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)
transparent
全黑透明色,即rgba(0,0,0,0)
/* list7 */ #color .list7s1 { width: 100px; height: 100px; background-color: transparent; }
transparent
全黑透明色,即rgba(0,0,0,0)
transparent
currentColor
color具有继承性,currentColor相当于继承color颜色
/* list8 */ #color .list8s1 { width: 100px; height: 100px; background-color: currentColor; }
currentColor
color具有继承性,currentColor相当于继承color颜色
currentColor
函数
calc()
calc(四则运算)
用于动态计算长度值,运算符前后要加空格
/* 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)
生成内容
attr()
用于content属性,取当前元素的属性值
可以拼接字符串
/* 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属性,取当前元素的属性值
可以拼接字符串
实际元素
感谢各位的阅读!关于CSS中单位的计算示例就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到吧!
当前文章:CSS中单位的计算示例
分享地址:http://ybzwz.com/article/pjidpi.html