css单位

作者：最终一次颓废发布日期:2025-10-05 浏览:45

/* CSS 单位示例 */

/* 像素单位 (px) */
.element {
    width: 300px; /* 固定宽度为300像素 */
}

/* 百分比单位 (%) */
.container {
    width: 100%; /* 宽度为父元素的100% */
}

/* 视口宽度单位 (vw) */
.header {
    font-size: 5vw; /* 字体大小为视口宽度的5% */
}

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

/* 相对单位 (rem) */
.body {
    font-size: 1.5rem; /* 字体大小为根元素（html）字体大小的1.5倍 */
}

/* 自动单位 (auto) */
.image {
    height: auto; /* 高度根据内容自动调整 */
}

解释说明：

px：像素单位，是绝对单位，不随屏幕或父元素的变化而变化。
%：百分比单位，相对父元素的尺寸来计算。
vw：视口宽度单位，相对于视口宽度的百分比。
em：相对单位，基于父元素的字体大小。
rem：相对单位，基于根元素（<html>）的字体大小。
auto：自动调整，通常用于让元素根据内容或其他因素自动调整尺寸。

上一篇：link rel=stylesheet href=css

下一篇：css放大属性