css 单位

作者：傲骨依旧发布日期:2025-07-04 浏览:57

/* CSS 单位示例 */

/* 像素单位 (px) */
.example-px {
  width: 200px;
  height: 100px;
}

/* 百分比单位 (%) */
.example-percent {
  width: 50%; /* 相对于父元素的宽度 */
  height: 50%; /* 相对于父元素的高度 */
}

/* 视窗单位 (vw, vh) */
.example-vw-vh {
  width: 50vw; /* 相对于视窗宽度的 50% */
  height: 50vh; /* 相对于视窗高度的 50% */
}

/* 相对字体大小单位 (em) */
.example-em {
  font-size: 1.2em; /* 相对于父元素的字体大小 */
}

/* 相对根元素字体大小单位 (rem) */
.example-rem {
  font-size: 1.5rem; /* 相对于根元素 (html) 的字体大小 */
}

解释说明：

像素单位 (px)：是最常用的绝对单位，表示固定的像素值，不会随屏幕大小或缩放而变化。
百分比单位 (%)：相对单位，通常相对于父元素的尺寸。例如，width: 50% 表示该元素的宽度是其父元素宽度的 50%。
视窗单位 (vw, vh)：相对于视窗（浏览器窗口）的宽度和高度。1vw 等于视窗宽度的 1%，1vh 等于视窗高度的 1%。
相对字体大小单位 (em)：相对于父元素的字体大小。1em 等于父元素的字体大小。
相对根元素字体大小单位 (rem)：相对于根元素（通常是 <html> 元素）的字体大小。1rem 等于根元素的字体大小。

上一篇：css两端对齐怎么设置

下一篇：css多余文字显示省略号