如何显示不同大小的元素

显示不同大小的元素可以通过CSS的宽度（width）和高度（height）属性来实现。以下是一些常见的方法：

1. 使用像素（px）单位：可以直接指定元素的宽度和高度为具体的像素值。例如，设置一个元素的宽度为200像素和高度为100像素：

.element {
  width: 200px;
  height: 100px;
}

1. 使用百分比（%）单位：可以相对于父元素的宽度或高度来设置元素的大小。例如，设置一个元素的宽度为父元素宽度的50%和高度为父元素高度的25%：

.element {
  width: 50%;
  height: 25%;
}

1. 使用视窗单位（vw和vh）：可以相对于浏览器视窗的宽度和高度来设置元素的大小。例如，设置一个元素的宽度为视窗宽度的30%和高度为视窗高度的10%：

.element {
  width: 30vw;
  height: 10vh;
}

1. 使用最大宽度（max-width）和最大高度（max-height）属性：可以限制元素的最大宽度和最大高度，使其在超过指定大小时自动缩小。例如，设置一个元素的最大宽度为500像素和最大高度为300像素：

.element {
  max-width: 500px;
  max-height: 300px;
}

1. 使用最小宽度（min-width）和最小高度（min-height）属性：可以限制元素的最小宽度和最小高度，使其在小于指定大小时自动扩展。例如，设置一个元素的最小宽度为200像素和最小高度为100像素：

.element {
  min-width: 200px;
  min-height: 100px;
}

以上是一些常见的方法来显示不同大小的元素。根据具体的需求和场景，选择适合的方法来设置元素的宽度和高度。