CSS 单位学习笔记

在CSS中，单位用于设置元素的尺寸和位置。常见的CSS单位有像素（px）、百分比（%）、em、rem等。

像素（px）

像素是最常用的CSS单位之一，它根据屏幕分辨率来计算尺寸。1像素等于屏幕上的1个物理像素。

举个例子，如果我们要将一个元素的宽度设置为200像素，可以这样写：

cssCopy Code
div {
  width: 200px;
}

百分比（%）

百分比单位基于父元素的尺寸进行计算。例如，如果一个子元素的宽度设置为50%，那么它的宽度将等于其父元素宽度的50%。

cssCopy Code
.parent {
  width: 500px;
}

.child {
  width: 50%;
}

在上面的例子中，子元素的宽度将等于250像素（即父元素宽度的50%）。

em

em单位基于元素的字体大小计算。例如，如果一个元素的字体大小设置为16px，那么1em等于16像素。

cssCopy Code
div {
  font-size: 16px;
  width: 10em;
}

在上面的例子中，元素的宽度将等于160像素（即10乘以16）。

rem

rem单位指相对于根元素（即html标签）的字体大小计算。例如，如果根元素的字体大小设置为16px，那么1rem等于16像素。

cssCopy Code
html {
  font-size: 16px;
}

div {
  width: 10rem;
}

在上面的例子中，元素的宽度将等于160像素（即10乘以16）。

总的来说，不同的单位在不同的场景下使用，选择合适的单位可以使代码更加具有可读性和灵活性。