css相对单位有哪些- 技术经验 -卓越飞翔博客

css相对单位有哪些

CSS相对单位有很多，常见的有像素（px），百分比（%），em（em），和rem（rem）。下面将分别介绍这四种相对单位，并给出具体的代码示例。

像素（px）：
像素是相对于屏幕分辨率的单位，它的值是固定的，不会根据用户的设置而改变。例如，如果你将元素的宽度设置为100px，那么它的宽度就会保持为100个像素。

代码示例：

div {
  width: 100px;
  height: 50px;
}

百分比（%）：
百分比是相对于父元素的单位，它的值会根据父元素的大小而改变。也就是说，百分比单位可以根据屏幕尺寸的变化而自动调整元素的大小。例如，如果父元素的宽度是200px，而你将子元素的宽度设置为50%，那么子元素就会占据父元素宽度的一半。

代码示例：

.parent {
  width: 200px;
}

.child {
  width: 50%;
  height: 50px;
}

em（em）：
em是相对于元素自身字体大小的单位。例如，如果一个元素的字体大小为16px，那么1em就等于16px，2em就等于32px，以此类推。em单位可以方便地实现字体大小的相对调整。

代码示例：

p {
  font-size: 16px;
}

span {
  font-size: 1.5em; /* 相当于24px */
}

rem（rem）：
rem与em类似，不过它是相对于根元素（一般指html元素）的字体大小。rem单位可以在整个页面中统一控制字体大小，同时又能实现相对调整。

代码示例：

html {
  font-size: 16px;
}

p {
  font-size: 1.5rem; /* 相当于24px */
}

总结：
CSS中的相对单位有像素（px），百分比（%），em（em），和rem（rem）。像素单位是固定的，不会根据用户的设置而改变。百分比单位是相对于父元素的大小而改变。em单位是相对于元素自身字体大小的单位，而rem单位是相对于根元素的字体大小的单位。在实际应用中，我们可以根据需要选择合适的相对单位来控制元素的大小和字体的大小。

相关推荐