当前位置：首页 > news >正文

CSS值和单位

news 来源：原创 2025/4/21 7:05:17

CSS值和单位

CSS 中的值和单位是构建样式的基础，它们定义了属性的具体表现方式。值用于定义样式属性的具体取值，而单位用于指定这些值的度量方式。CSS中常用的值和单位如下：

1.长度单位
px : 像素，绝对单位
em : 相对于元素的字体大小
rem : 相对于根元素的字体大小
vw : 视窗宽度的百分比
vh : 视窗高度的百分比
% : 相对于父元素的百分比

2.百分比单位
% : 相对于父元素的百分比

3.颜色值
color name ：预定义的颜色名称
#RRGGBB ：十六进制颜色值
rgb(R G B) ： RGB颜色值
rgba(R G B A) ： RGB颜色值加上透明度

4.字体值
font-family ：字体名称
font-size ：字体大小
font-weight ：字体粗细

5.边框和间距值
border-width : 边框宽度
margin : 外边框
padding : 内边框

6.时间和动画值
s ：秒
ms : 毫秒
transition : 过渡效果

7.百分比值
% : 相对于父元素的百分比

8.枚举值
none : 表示没有值的情况

以上仅为常见示例，CSS还有许多其他值和单位。

以下是一个CSS中不同值和单位的使用：

<!DOCTYPE html>
<html>
<head><title>CSS值和单位示例</title> <!-- 修正标题标签 --><style>.box {width: 200px;height: 100px;background-color: #ff0000; /* 修正颜色值：#ffo00o → #ff0000 */margin: 20px;padding: 10px;font-size: 18px;border: 2px solid blue;transition: width 1s;} /* 添加闭合大括号 */</style>
</head>
<body><div class="box">This is a box</div>
</body>
</html>