CSS中常用的单位

CSS中常用的单位

1. 像素（px）

像素是CSS中最常用的单位之一，一般用于定义页面元素的大小和边框大小。它的值是固定的，不受屏幕或窗口大小的影响，所以通常被用来定义固定大小的元素，例如导航栏、按钮等。

示例1：定义一个宽度为300像素的容器

.container {
  width: 300px;
}

2. 百分比（%）

百分比是相对于父元素的大小而言，它的值是可变的，会随着父元素大小的变化而变化。因此可以用来创建具有响应性的布局，并且在设计自适应页面的时候很有用。

示例2：定义一个宽度为父元素的70%的图像

.image {
  width: 70%;
}

3. em

em是相对于父元素的字体大小而言，当字体大小发生变化的时候，em值也会自动调整。它常用于定义字体大小或容器大小。

示例3：定义一个字体大小为父元素字体大小的1.2倍

.container p {
  font-size: 1.2em;
}

4. rem

rem是相对于根元素(html)的字体大小而言，和em一样可以用于定义字体大小或容器大小。由于rem不受任何父元素影响，因此在设计响应式页面的时候更为灵活和方便。

示例4：定义一个宽度为根元素字体大小的1.5倍的容器

.container {
  width: 1.5rem;
}

5. vw和vh

vw和vh是相对于浏览器窗口的宽度和高度而言，1vw等于浏览器窗口宽度的1%，1vh等于浏览器窗口高度的1%。vw和vh也常用于响应式设计，可以用来定义元素的大小或边距。

示例5：定义一个占据浏览器窗口高度的50%的背景图像

.element {
  background-image: url('image.jpg');
  height: 50vh;
  background-size: cover;
}

以上就是CSS常用的单位的详细讲解和示例说明，掌握这些单位可以让我们更好地设计出适应不同屏幕和设备的网站。