通过CSS的width和height属性可灵活控制HTML元素尺寸。1. 使用像素（px）设置固定宽高，适用于图标、按钮等需精确控制的场景；2. 采用百分比（%）使元素相对于父容器调整大小，适合响应式布局；3. 利用视口单位（vw/vh）基于浏览器窗口设置尺寸，如100vw实现全屏宽度；4. 使用max-width和max-height限制最大尺寸，防止内容溢出，常用于图片自适应。合理结合这些方法能提升页面在不同设备上的适配性，避免过度使用固定像素值，尤其在移动端设计中更应注意弹性布局。
调整HTML元素的尺寸主要通过CSS来控制，使用width和height属性可以灵活设置元素的宽度和高度。下面介绍几种常用方法。
1. 使用像素（px）设置固定尺寸
通过指定具体像素值，可以让元素保持固定的宽高。
例如：
.box {<br/> width: 200px;<br/> height: 100px;<br/>}
这种方式适合需要精确控制大小的场景，如图标、按钮等。
立即学习“前端免费学习笔记（深入）”；
2. 使用百分比（%）设置相对尺寸
让元素的尺寸相对于父容器进行调整，适用于响应式布局。
例如：
.container {<br/> width: 80%;<br/> height: 50%;<br/>}
当父元素宽度变化时，该元素会自动按比例缩放。
3. 使用视口单位（vw/vh）
视口单位基于浏览器窗口大小，1vw = 1% 视窗宽度，1vh = 1% 视窗高度。
例如：
.full-screen {<br/> width: 100vw;<br/> height: 100vh;<br/>}
常用于全屏展示区域，确保元素填满整个屏幕。
4. 使用 max-width 和 max-height 限制尺寸
防止内容过大导致布局错乱，尤其在图片或响应式设计中非常实用。
例如：
img {<br/> max-width: 100%;<br/> height: auto;<br/>}
这样图片不会超出其容器，同时保持原始宽高比。
基本上就这些常用方式。合理使用这些方法，能让你的页面布局更灵活、适应不同设备。注意避免过度使用固定像素值，尤其是在移动端优先的设计中。
