width 和 height 用于设置元素内容区域的尺寸，不包括 padding、border 和 margin（除非 box-sizing 改为 border-box）；块级元素默认占满父容器宽度，行内元素由内容决定大小；可使用像素、百分比、vh、auto 或 fit-content 等值；推荐结合 box-sizing: border-box 和相对单位实现响应式布局，提升页面适配性与可控性。
在CSS中，width 和 height 属性用于控制元素内容区域的尺寸。正确使用这两个属性可以帮助你精确布局网页中的各个部分。
理解 width 和 height 的作用
width 设置元素内容区域的宽度，height 设置高度。它们不包括 padding、border 和 margin（除非使用 box-sizing 改变计算方式）。
默认情况下，块级元素（如 div、p）会占据父容器的全部宽度，而行内元素（如 span、a）的尺寸由其内容决定。
常见取值方式：-
具体数值：如
width: 200px;或height: 100px; -
百分比：如
width: 50%;，相对于父容器的宽度 - auto：浏览器自动计算，默认值
- max-content / min-content / fit-content()：根据内容自动调整尺寸
设置固定尺寸
当需要一个固定大小的盒子时，直接指定像素值即可。
立即学习“前端免费学习笔记（深入）”；
示例：.box {
width: 300px;
height: 200px;
background-color: #f0f0f0;
border: 1px solid #ccc;
}这个元素将始终保持 300px 宽和 200px 高，不受内容或屏幕尺寸影响。
使用相对单位和响应式尺寸
为了让页面适配不同设备，推荐使用相对单位。
-
width: 50%;—— 宽度为父容器的一半 -
height: 80vh;—— 高度为视口高度的 80% -
width: fit-content;—— 宽度刚好包裹内容
结合 max-width 和 min-height 可避免内容溢出或容器过小的问题。
注意 box-sizing 的影响
默认的 box-sizing: content-box; 会让 width 和 height 仅作用于内容区。如果添加 padding 或 border，实际占用空间会更大。
建议统一设置：
* {
box-sizing: border-box;
}这样设置后，width 和 height 包含了 padding 和 border，更容易控制整体尺寸。
基本上就这些。合理使用 width 和 height，配合 box-sizing 和响应式单位，能让你的布局更可控、更灵活。
