详解CSS中视窗单位和百分比单位的使用

在CSS中，有很多种单位可以用来定义元素的尺寸和位置，其中视窗单位和百分比单位是比较常用的单位。这篇攻略将会介绍这两种单位的具体使用方法。

视窗单位

视窗单位是指相对于浏览器可视窗口大小的单位，包括vw、vh、vmin和vmax四种单位。这些单位可以帮助我们实现响应式设计，使得网页布局能够自适应不同的屏幕尺寸。

vw和vh单位

vw和vh单位分别指相对于可视窗口宽度和高度的单位，其取值范围为0~100。比如，一个元素的宽度设置为50vw，则它的宽度为浏览器可视窗口宽度的一半。同理，一个元素的高度设置为50vh，则它的高度为浏览器可视窗口高度的一半。

.container {
  width: 70vw;
  height: 50vh;
}

上述代码定义了一个容器元素，它的宽度为可视窗口宽度的70%，高度为可视窗口高度的50%。

vmin和vmax单位

vmin和vmax单位分别指相对于可视窗口宽度和高度的较小值和较大值的单位，其取值范围也为0~100。比如，一个元素的宽度设置为50vmin，则它的宽度为浏览器可视窗口宽度和高度中较小的值的一半。同理，一个元素的高度设置为50vmax，则它的高度为浏览器可视窗口宽度和高度中较大的值的一半。

.header {
  height: 10vmin;
  padding: 3vmax;
}

上述代码定义了一个头部元素，它的高度为浏览器可视窗口宽度和高度中较小的值的10%，内边距为浏览器可视窗口宽度和高度中较大的值的3%。

百分比单位

百分比单位是指相对于父元素尺寸的单位，在CSS布局中也经常被使用。比如，一个元素的宽度设置为50%，则它的宽度为父元素宽度的一半。

父元素尺寸的计算方法

对于百分比单位，父元素尺寸的计算方法如下：

• 对于宽度和水平方向的属性，父元素的尺寸为它的内容框宽度；
• 对于高度和垂直方向的属性，父元素的尺寸为它的内容框高度或包括内边距和边框的高度。

百分比单位示例

<div class="parent">
  <div class="child"></div>
</div>

.parent {
  width: 500px;
  height: 300px;
  background-color: #eee;
  position: relative;
}
.child {
  width: 50%;
  height: 50%;
  background-color: #f00;
  position: absolute;
  top: 25%;
  left: 25%;
}

上述代码定义了一个父元素和一个子元素。父元素的宽度为500px，高度为300px，背景色为#eee。子元素的宽度和高度分别为父元素宽度和高度的50%，背景色为#f00。子元素使用绝对定位，其顶部和左侧分别相对于父元素的25%位置。

总结

视窗单位和百分比单位都是CSS中常用的单位，其中视窗单位适用于响应式设计，而百分比单位适用于父元素尺寸固定的情况下的元素布局。可以根据实际需求灵活使用不同的单位。