本篇文章给大家带来的内容是关于总结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 100px
50px 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位
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
相对单位,相对于字符的高度,通常为字体高度的一半
如果文字高度未设置,则相对于浏览器字体大小高度
ch
/* list5 */
#length .list5s1 {
width: 3ch;
}
#length .list5s2 {
width: 3ch;
}
#length .list5fa2 {
font-size: 20px;
}
#length .list5s3 {
width: 3ch;
}
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 10vmin
10vmax X 10vmax
cm/mm/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 3cm
30mm X 30mm
120q X 120q
in
/* list9 */
#length .list9s1 {
width: 10in;
height: 10in;
}
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 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%;
}
角度
/* 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;
}
分辨率
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
使用颜色关键字指定颜色
darkseagreen
salmon
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
/* 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
/* list7 */
#color .list7s1 {
width: 100px;
height: 100px;
background-color: transparent;
}
transparent
全黑透明色,即rgba(0,0,0,0)
transparent
currentColor
/* 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中单位的计算(代码示例)的详细内容,更多请关注 第一PHP社区 其它相关文章!