CSS 中,在不同属性中使用了不同的数值,常用的数值类型如下:
50%
。 百分比值通常用于宽度、高度等属性。CSS中的单位用于表示长度、角度、时间、频率等属性的值。
在CSS中,长度单位用于表示尺寸和距离,可以应用于各种属性,如宽度、高度、边距、填充等。
em
: 相对于父元素的字体大小。1.5em表示元素的字体大小为其父元素字体大小的 1.5 倍。rem
: 相对于根元素(html元素)的字体大小。1rem等于根元素的字体大小。ex
: 通常用于垂直尺寸,相对于小写字母”x”的高度。(在大多数字体中,小写的 x 字符通常是最大字符高度的一半)示例:
.example {
font-size: 16px;
padding: 1.5em; /* 1em相当于24px */
margin: 2rem; /* 2rem相当于32px */
height: 2ex; /* 高度为字体大小的一半,即 8px,相当于16px */
}
px
: 像素是屏幕上最基本的单位,也是 CSS 中使用最广泛的单位。像素的大小取决于显示器的分辨率。in
: 英寸是长度单位,通常用于表示显示器或其他电子设备的尺寸,1英寸等于96像素。cm
: 厘米是长度单位,通常用于表示物理对象的尺寸。mm
: 毫米是长度单位,通常用于表示纸张或其他印刷材料的尺寸。pt
: 点/磅 (point) 的缩写,是传统印刷术中使用的单位。1pt 等于 1/72 英寸,约为 0.352778 毫米。pc
: 派卡 (pica) 的缩写,也是传统印刷术中使用的单位。1pc 等于 12pt,约为 4.21752 毫米,1pc等于16像素。在打印样式表或需要确切打印尺寸的情况下推荐。示例:
.example {
width: 200px;
height: 2in; /* 2英寸,等于192px */
margin: 1cm; /* 1厘米 */
font-size: 12pt; /* 12磅 */
}
%
: 百分比表示相对于父元素的百分比大小。例如,width: 50%
表示元素的宽度为其父元素宽度的 50%。示例:
.example {
width: 50%; /* 宽度为父元素宽度的50% */
padding: 10%; /* 内边距为元素宽度的10% */
}
vw
: 视口宽度的百分比,1vw等于视口宽度的1%。vh
: 视口高度的百分比,1vh等于视口高度的1%。vmin
: vw和vh中较小的那个。vmax
: vw和vh中较大的那个。示例:
.example {
width: 50vw; /* 宽度为视口宽度的50% */
height: 30vh; /* 高度为视口高度的30% */
}
在CSS中,角度单位用于表示旋转、变换等属性中的角度值。
deg
度是角度的最常用单位,一个圆的总角度为 360 度。示例:
.example {
transform: rotate(45deg); /* 以45度旋转元素 */
background: linear-gradient(45deg, red, yellow); /* 45度渐变背景 */
}
rad
弧度是圆周长与半径的比值,一个圆的总弧度为 2π 弧度。示例:
.example {
transform: rotate(1rad); /* 以1弧度旋转元素 */
}
grad
表示梯度的单位,一个圆的总梯度为 400 梯度。.example {
transform: rotate(50grad); /* 以50梯度旋转元素 */
}
turn
表示完整的圆周数,等于 360 度。.example {
transform: rotate(0.5turn); /* 旋转半圈,180度 */
}
在CSS中,时间单位用于表示动画、过渡、动画延迟等属性中的时间值。
s
表示秒的单位。示例:
.base{
width: 200px;
height: 200px;
background-color: #3498db;
}
.base:hover{
background-color: #e74c3c;
}
.example{
transition: background-color 1s ease; /* 定义过渡属性和时间 */
}
ms
表示毫秒的单位,1秒等于1000毫秒。示例:
.base{
width: 200px;
height: 200px;
background-color: #3498db;
}
.base:hover{
background-color: #e74c3c;
}
.example{
transition: background-color 2000ms ease; /* 定义过渡属性和时间 */
}
在CSS中,频率单位用于表示周期性事件的频率。常见的频率单位是 Hz
(赫兹),表示每秒发生的周期数。
示例:
.example {
animation: shake 1s infinite; /* 震动频率为1赫兹,无限循环 */
}
示例:
.example {
audio {
frequency: 5kHz; /* 声音频率为5千赫兹 */
}
}
在CSS中,分辨率单位用于表示图像或打印时的像素密度。
dpi
表示每英寸的点数,即图像或打印时每英寸的像素密度。示例:
.example {
background-image: url('image.png');
background-size: 300px 200px;
background-resolution: 300dpi; /* 图像在打印时的像素密度为300dpi */
}
dppx
表示每像素的点数,即屏幕上每物理像素的像素密度。示例:
.example {
background-image: url('image.png');
background-size: 300px 200px;
background-resolution: 2dppx; /* 图像在2倍像素密度的屏幕上显示 */
}
dpcm
是表示每厘米的点数(dots per centimeter)的分辨率单位。示例:
.example {
background-image: url('image.png');
background-size: 2dpcm 3dpcm; /* 图像在每厘米2个点的水平分辨率和每厘米3个点的垂直分辨率下显示 */
}
CSS中的大小可以用来控制元素的尺寸。
分别用于设置元素的宽度和高度,一般使用像素(px)、百分比(%)、em、rem等长度单位。
示例:
.example {
width: 300px;
height: 200px;
}
分别用于设置元素的最大宽度和最大高度,一般使用像素(px)、百分比(%)、em、rem等长度单位。
示例:
.example {
max-width: 100%;
max-height: 500px;
}
示例:
.example {
min-width: 200px;
min-height: 100px;
}
使用一些预定义关键字表示的颜色,例如:red:红色、blue:蓝色、green:绿色等。
示例:
.example {
color: red; /* 红色 */
background-color: blue; /* 蓝色 */
}
使用六位或三位的十六进制数表示RGB颜色。六位表示形式为#RRGGBB
,其中RR、GG、BB分别表示红、绿、蓝的色值。三位表示形式为#RGB
,每个字符表示一个颜色通道。
示例:
.example {
color: #ff0000; /* 红色 */
background-color: #00f; /* 蓝色 */
}
使用rgb()函数表示颜色,接受三个参数,分别表示红、绿、蓝的色值,取值范围为0-255。 rgba()与rgb()类似,但多了一个表示透明度的参数,取值范围为0-1。
示例:
.example1 {
color: rgb(255, 0, 0); /* 红色 */
background-color: rgb(0, 0, 255); /* 蓝色 */
}
.example2 {
color: rgba(255, 0, 0, 0.5); /* 半透明红色 */
background-color: rgba(0, 0, 255, 0.7); /* 半透明蓝色 */
}
使用hsl()函数表示颜色,接受三个参数,分别表示色相、饱和度和亮度。色相取值范围为0-360,饱和度和亮度取值范围为0%-100%。 hsla()与hsl()类似,但多了一个表示透明度的参数,取值范围为0-1。
示例:
.example1 {
color: hsl(0, 100%, 50%); /* 红色 */
background-color: hsl(240, 100%, 50%); /* 蓝色 */
}
.example2 {
color: hsla(0, 100%, 50%, 0.5); /* 半透明红色 */
background-color: hsla(240, 100%, 50%, 0.7); /* 半透明蓝色 */
}