width和height属性用于设置元素内容区尺寸，支持px、%、vw/vh等单位，配合box-sizing:border-box可包含内边距和边框，结合min/max-width/height实现响应式布局，有效控制元素大小与溢出。
在CSS中控制元素的宽度和高度，主要通过 width 和 height 属性实现。这两个属性决定了元素内容区域的尺寸，是布局中最基础也是最关键的设置之一。
width 设置元素宽度
使用 width 属性可以定义元素内容区的宽度。它支持多种单位：
- 像素（px）：固定值，例如
width: 200px; - 百分比（%）：相对于父容器的宽度，例如
width: 50%; - 视窗单位（vw）：相对于浏览器窗口宽度的1%，例如
width: 50vw; - auto：由浏览器自动计算，默认行为
块级元素默认 width 为 auto，会占据父容器的整行宽度。设置具体值后可限制其宽度。
height 设置元素高度
height 控制元素内容区域的高度，单位用法与 width 相同：
height: 100px;— 固定高度height: 80%;— 相对于父元素高度height: 100vh;— 占满整个视口高度height: auto;— 默认值，由内容决定高度
注意：如果子元素高度超出父元素且未设置 overflow，可能出现溢出情况。
盒模型对宽高的影响
元素实际占用空间还受 padding、border 和 box-sizing 影响。
- 默认情况下
box-sizing: content-box;，width/height 只包含内容 - 推荐设置
box-sizing: border-box;，此时 width 包含 padding 和 border
例如：
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 5px solid;
最终内容区会自动压缩，整体宽度仍为200px。
最小、最大尺寸限制
为了增强响应性，可配合以下属性使用：
- min-width：设置最小宽度，防止内容被挤压
- max-width：设置最大宽度，常用于图片适配
- min-height：确保元素不会低于某个高度
- max-height：限制最大高度，配合 overflow 实现滚动
比如让图片不超出容器：img { max-width: 100%; height: auto; }
基本上就这些。掌握 width 和 height 的设置方式，结合盒模型和响应式单位，就能灵活控制页面元素的尺寸表现。不复杂但容易忽略细节。
