CSS和TailCSS

Sun, 01 Mar 2026 10:00:00 +0800

CSS介绍链接到标题

CSS样式单位链接到标题

绝对单位和相对单位

类型	特点	常见单位
绝对单位	尺寸固定，不随环境变化	px、pt、cm、mm、in
相对单位	尺寸随参考物变化	rem、em、vw/vh、%、ch

px（像素）—— 最基础的绝对单位链接到标题

含义：屏幕上的最小显示单元（1px = 屏幕 1 个像素点）

TailwindCSS 中 1 个单位 = 4px（比如 px-4 对应 padding-left/right: 16px）

rem（根元素相对单位）—— 适配不同屏幕的核链接到标题

相对于根元素（<html>）的 font-size 计算（1rem = html 的 font-size 值）

‌font-size是CSS（层叠样式表）中用于设置文本字体大小的核心属性，具有继承性

/* 根元素设置基准 */
html {
  font-size: 16px; /* 1rem = 16px */
}
/* 小屏幕适配 */
@media (max-width: 768px) {
  html {
    font-size: 14px; /* 1rem = 14px，全局尺寸自动缩小 */
  }
}
/* 使用 rem */
.title {
  font-size: 1.25rem; /* 1.25*16 = 20px */
  margin-bottom: 0.75rem; /* 0.75*16 = 12px */
}

em（父元素相对单位）—— 局部适配链接到标题

含义：相对于当前元素 / 父元素的 font-size 计算（优先级：当前元素 font-size > 父元素 font-size）

CSS on 首页

CSS和TailCSS

CSS介绍 链接到标题

CSS样式单位 链接到标题

px（像素）—— 最基础的绝对单位 链接到标题

rem（根元素相对单位）—— 适配不同屏幕的核 链接到标题

em（父元素相对单位）—— 局部适配 链接到标题

CSS介绍链接到标题

CSS样式单位链接到标题

px（像素）—— 最基础的绝对单位链接到标题

rem（根元素相对单位）—— 适配不同屏幕的核链接到标题

em（父元素相对单位）—— 局部适配链接到标题