在 HTML 和 CSS 中，设置
1. 使用固定值
通过直接设置 width 和 height 的固定值来控制
在这里，width 设置为 300px，height 设置为 200px。
2. 使用百分比
使用百分比来设置宽度和高度，通常根据父元素的宽高来进行相对设置。
这里 width: 50% 表示宽度是其父容器宽度的一半。height: 50% 表示高度是父容器高度的一半。
注意：对于高度的百分比设置，父容器的高度必须明确，否则可能不会生效。
3. 使用 vw 和 vh（视口单位）
vw：相对于视口宽度，1 vw 等于视口宽度的 1%。vh：相对于视口高度，1 vh 等于视口高度的 1%。
这里 width: 50vw 表示宽度是视口宽度的 50%。height: 50vh 表示高度是视口高度的 50%。
4. 使用 auto 自动适应内容
auto 是默认值，表示宽度和高度根据内容自动扩展。
这意味着
5. 使用 min-width 和 min-height
可以用 min-width 和 min-height 来设置最小宽度和最小高度，防止元素缩小到一定值以下。
min-width 强制元素宽度不能小于 200px。min-height 强制元素高度不能小于 100px。
6. 使用 max-width 和 max-height
max-width 和 max-height 用来设置元素的最大宽度和最大高度，防止元素过大。
这会限制元素的宽度不超过 500px，高度不超过 300px。
7. 使用 flexbox 或 grid 布局自动调整
在 flexbox 或 grid 布局下，可以通过父容器的布局属性来动态调整
在 flex 布局下，flex: 1 会使子元素根据父元素的空间自动调整宽度。
8. CSS calc() 动态计算
使用 calc() 函数可以动态计算宽度或高度，结合不同单位或操作符实现灵活布局。
width: calc(100% - 50px) 表示宽度是父元素宽度减去 50px。height: calc(100vh - 100px) 表示高度是视口高度减去 100px。
9. 使用 inherit
inherit 表示继承父元素的宽高设置。
此设置会让子元素的宽度和高度与父元素一致。
10. 使用 fit-content
fit-content 会根据内容自动适应宽度或高度，但会有一个最大限度的限制。
fit-content 会使宽度和高度根据内容自动调整，类似 auto，但它会有一定的最大限制，不会无限扩展。
这些方法可以根据具体的设计需求来选择使用，结合实际的布局场景可以灵活运用不同的单位和属性组合。