CSS 尺寸

控制元素的尺寸是 CSS 布局的基础。width 和 height 属性用于设置元素的宽度和高度。CSS 提供了多种单位和方法来精确控制尺寸。

width 和 height

这两个属性用于设置元素的宽度和高度。

div {
  width: 500px;
  height: 200px;
  border: 1px solid black;
}

你可以使用多种单位：

• auto: (默认) 浏览器会自动计算宽度和高度。对于块级元素，宽度通常是其父容器的 100%；对于内联元素，宽度由内容决定。
• px (像素): 绝对单位，提供精确的像素级控制。
• % (百分比): 相对单位，相对于其父元素的宽度或高度。
• em / rem: 相对于字体大小的单位。
• vw / vh (视口单位): 相对于视口（浏览器窗口）的宽度和高度。100vw 等于视口宽度，50vh 等于视口高度的一半。

.full-width {
  width: 100%;
}

.half-screen-height {
  height: 50vh;
}

min-width 和 max-width

这两个属性用于为元素的宽度设置一个最小和最大限制。这在响应式设计中非常有用，可以防止元素在小屏幕上变得过窄，或在大屏幕上变得过宽。

• min-width: 设置元素的最小宽度。即使内容很少或父容器很窄，元素的宽度也不会小于这个值。
• max-width: 设置元素的最大宽度。即使内容很多或父容器很宽，元素的宽度也不会超过这个值。

一个常见的应用是创建一个居中的、有最大宽度限制的页面容器：

.container {
  max-width: 960px; /* 在大屏幕上，内容区域不会超过 960px */
  min-width: 320px; /* 在小屏幕上，容器不会比 320px 更窄 */
  width: 90%;       /* 在中等屏幕上，宽度是父容器的 90% */
  margin: auto;     /* 水平居中 */
}

min-height 和 max-height

与宽度类似，min-height 和 max-height 用于限制元素的高度。

• min-height: 设置元素的最小高度。常用于确保页脚在内容不足时也能固定在底部。
• max-height: 设置元素的最大高度。常与 overflow: auto; 结合使用，创建一个在内容超出时可滚动的区域。

.card-content {
  max-height: 300px;
  overflow-y: auto; /* 如果内容高度超过 300px，就会出现垂直滚动条 */
}

.main-wrapper {
    min-height: 100vh; /* 确保主要内容区域至少和屏幕一样高 */
}

通过灵活运用这些尺寸属性，你可以创建出既美观又能在不同设备上良好适应的布局。