CSS 字号
CSS 颜色 

CSS 单位

CSS 中有多种单位用于指定长度、宽度、字体大小等属性。这些单位可以分为绝对单位和相对单位，每种都有其特定的用途和适用场景。


绝对单位：

像素（px）：最常用的绝对单位，通常在实际设计中使用。1px 等于屏幕上的一个像素点。

p {
    font-size: 16px;
    width: 300px;
    height: 200px;
}

英寸（in）：1英寸等于 2.54 厘米，通常用于打印样式表。

@media print {
    p {
        font-size: 0.3in;
    }
}

厘米（cm）：1厘米等于屏幕上的 37.8px。

div {
    width: 10cm;
}

毫米（mm）：1毫米等于屏幕上的 3.78px。

div {
    height: 20mm;
}

磅（pt）：1磅等于 1/72 英寸，通常用于打印样式表。

@media print {
    p {
        font-size: 12pt;
    }
}

点（pc）：1点等于 12 磅。


相对单位：

百分比（%）：相对于父元素的相应属性。例如，font-size: 120% 表示字体大小为父元素字体大小的120%。

div {
    width: 50%;
    font-size: 120%;
}

em（相对于当前元素的字体大小）：1em 等于当前元素的字体大小。例如，如果父元素的字体大小为16px，font-size: 1.2em 则相当于 19.2px。

p {
    font-size: 1.2em;
    margin-bottom: 1.5em;
}

rem（相对于根元素的字体大小）:1rem 等于根元素（通常是 <html> 元素）的字体大小。它相对于em具有更稳定的表现，不会受到父元素字体大小的影响。

body {
    font-size: 16px;
}
p {
    font-size: 1.2rem; /* 1.2 * 16px = 19.2px */
    margin-bottom: 1.5rem; /* 1.5 * 16px = 24px */
}


其他单位：

视口单位（vw、vh、vmin、vmax）：

  • 相对于视口的宽度（vw）或高度（vh）。1vw 等于视口宽度的 1%，1vh 等于视口高度的 1%。

  • vmin 和 vmax 是相对于视口宽度和高度中较小或较大的那个。

section {
    width: 50vw;
    height: 80vh;
    font-size: 3vmin;
}


总结：

选择合适的单位取决于具体的设计需求和响应式布局要求。像素单位适用于固定尺寸和精确控制，而相对单位则更适合于响应式设计和相对大小的调整。