理解 height 和 width 属性如何定义元素的基本尺寸
掌握像素（px）、百分比（%）等不同单位在尺寸设置中的应用场景
学会使用 max-width、min-width、max-height、min-height 创建弹性布局
理解限制属性在响应式设计中的关键作用，确保内容在不同屏幕下的可读性
能够正确设置图片尺寸并保持宽高比或适应容器
CSS 的 height（高度）和 width（宽度）属性是控制网页元素尺寸的基础。它们决定了元素在页面中占据的空间大小，对于保持布局的一致性和设计的美观性至关重要。
核心特性：
单位多样性：支持绝对单位（如 px, cm）和相对单位（如 %, vw, em）
响应式基础：结合百分比和视口单位，可轻松实现自适应不同屏幕尺寸的布局
内容溢出处理：当设置固定尺寸小于内容实际大小时，需配合 overflow 属性处理
这些属性不仅适用于普通的块级元素（如 div），也常用于精确控制图片、视频等多媒体资源的大小。
width 和 height 属性允许开发者直接指定元素的尺寸。值可以是具体的像素值，也可以是相对于父容器的百分比。
常用单位说明：
px（像素）：绝对单位，尺寸固定，不随屏幕变化。
%（百分比）：相对单位，相对于父容器的宽度或高度计算。
vw / vh（视口单位）：相对于浏览器窗口宽度或高度的百分比。
示例代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS 宽度与高度示例</title>
<style>
.container-box {
width: 40%; /* 宽度为父容器的 40% */
border: 3px solid #000;
font-size: 22px;
font-weight: bold;
color: #008000;
text-align: center;
padding: 20px;
margin: 20px 0 0 10px;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div class="container-box">
技术社区示例
</div>
<p>上述盒子的宽度设置为父容器的 40%，高度由内容自动撑开。</p>
</body>
</html>效果说明：
该盒子在屏幕上始终占据其父容器宽度的 40%。当浏览器窗口缩放时，盒子宽度会随之动态调整，而高度则根据内部文字内容自动计算。
对于 <img> 标签，width 和 height 属性同样适用。合理设置图片尺寸可以防止大图破坏布局，或确保小图清晰展示。
注意事项：
如果只设置宽度或高度中的一个，浏览器通常会按比例自动调整另一个维度，以保持图片原始宽高比。
同时设置固定的宽和高可能会导致图片变形（拉伸或压缩），需谨慎使用。
示例代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>图片尺寸设置</title>
<style>
.responsive-img {
width: 100%; /* 宽度占满容器 */
height: auto; /* 高度自动保持比例 */
border: 2px solid #000;
display: block;
}
.fixed-size-img {
width: 100px;
height: 50px;
border: 2px solid #000;
object-fit: cover; /* 避免变形，裁剪多余部分 */
}
</style>
</head>
<body>
<h3>响应式图片（宽度 100%）</h3>
<img class="responsive-img" src="Capture4-300x174.PNG" alt="示例图片">
<h3>固定尺寸图片（100x50）</h3>
<img class="fixed-size-img" src="Capture4-300x174.PNG" alt="示例图片">
</body>
</html>效果说明：
第一张图片宽度随容器变化，高度自动调整，始终保持清晰且不变形。
第二张图片被强制限制在 100x50 像素，使用 object-fit: cover 确保图片填满区域而不拉伸变形。
在响应式设计中，单纯的固定宽度或百分比宽度往往不够灵活。max-width 和 min-width 提供了更精细的控制手段。
max-width 限制元素的最大宽度。当容器宽度超过该值时，元素宽度停止增长；当容器较窄时，元素可以缩小以适应屏幕。这是实现“在大屏上限制内容过宽，在小屏上自动收缩”的最佳实践。
应用场景： 文章正文容器、卡片布局、防止表格在宽屏下过宽。
示例代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>max-width 示例</title>
<style>
.content-box {
max-width: 500px; /* 最大宽度 500px */
width: 100%; /* 尝试占满，但不超过 500px */
font-size: 14px;
border: 2px solid #000;
padding: 15px;
margin: 20px auto; /* 居中显示 */
background-color: #e8f5e9;
}
</style>
</head>
<body>
<div class="content-box">
<h3>技术社区</h3>
<p>
这是一个计算机科学平台，您可以在这里学习编程。
无论屏幕多宽，这个盒子的宽度都不会超过 500 像素，
从而保证阅读体验的最佳行宽。试着缩放浏览器窗口观察效果。
</p>
</div>
</body>
</html>效果说明：
在宽屏显示器上，盒子宽度锁定为 500px，不会无限拉长导致阅读困难；在手机等窄屏设备上，盒子宽度会自动缩小至屏幕宽度（减去边距），充分利用空间。
min-width 设定元素的最小宽度。即使父容器很窄，元素也不会小于这个值，通常会导致横向滚动条出现。
应用场景： 保证复杂表格、图表或特定组件在小屏幕上依然可见完整结构。
示例代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>min-width 示例</title>
<style>
.stable-box {
min-width: 400px; /* 最小宽度 400px */
width: 100%;
font-size: 14px;
border: 2px solid #000;
padding: 15px;
background-color: #fff3e0;
}
</style>
</head>
<body>
<div class="stable-box">
<h3>技术社区</h3>
<p>
这个盒子有一个最小宽度限制（400px）。
如果您将浏览器窗口缩得很窄，盒子将不再缩小，
而是会出现横向滚动条，以确保内容不被过度挤压。
</p>
</div>
</body>
</html>效果说明：
当浏览器窗口宽度小于 400px 时，盒子保持 400px 宽度，页面底部会出现横向滚动条，防止内容重叠或无法阅读。
与宽度类似，高度也可以通过 max-height 和 min-height 进行限制，以应对内容动态变化的情况。
max-height 限制元素的最大高度。如果内容超出该高度，默认情况下内容会被截断或溢出（取决于 overflow 设置）。
应用场景： 限制折叠面板展开后的高度、固定高度的图片容器、防止长列表撑破布局。
示例代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>max-height 示例</title>
<style>
.limited-height-box {
max-height: 100px; /* 最大高度 100px */
border: 2px solid #000;
padding: 10px;
overflow-y: auto; /* 内容超出时显示垂直滚动条 */
background-color: #fce4ec;
}
</style>
</head>
<body>
<div class="limited-height-box">
<h3>技术社区</h3>
<p>
这是一个有最大高度限制的盒子（100px）。
由于内容较多，超出部分将被隐藏或出现滚动条。
这常用于评论区预览或折叠内容。
更多文字... 更多文字... 更多文字...
</p>
</div>
</body>
</html>效果说明：
盒子高度最多为 100px。由于添加了 overflow-y: auto，当文字内容超过 100px 时，盒子内部会出现垂直滚动条，用户可以滚动查看剩余内容。
min-height 设定元素的最小高度。即使内容为空或很少，元素也会保持这个高度。
应用场景： 确保页脚始终有一定高度、卡片布局对齐、加载状态占位。
示例代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>min-height 示例</title>
<style>
.min-h-box {
min-height: 50px; /* 最小高度 50px */
border: 2px solid #000;
padding: 10px;
background-color: #e0f7fa;
}
</style>
</head>
<body>
<div class="min-h-box">
<h3>技术社区</h3>
<p>即使只有这一行字，盒子的高度也至少是 50px。</p>
</div>
<div class="min-h-box">
<!-- 空内容测试 -->
</div>
<p>上方的空盒子依然保持了 50px 的高度，可用于布局占位。</p>
</body>
</html>效果说明：
无论内容多少，盒子高度永远不会低于 50px。这对于保持多列布局的高度一致性非常有用。
CSS 尺寸控制属性是构建稳健网页布局的关键工具。合理使用它们可以显著提升用户体验。
最佳实践建议：
在响应式设计中，优先使用 max-width: 100% 让图片和容器自适应，而不是写死像素值。
结合 min-width 和 max-width 可以创建一个既有下限又有上限的弹性区间（例如：min-width: 300px; max-width: 800px;）。
设置高度时需格外小心，因为内容增多可能导致溢出，通常配合 overflow 属性使用。
为什么在响应式网页设计中，给图片设置 max-width: 100%; height: auto; 比直接设置固定的 width 和 height 更好？
如果一个 div 设置了 min-width: 500px，而其父容器的宽度只有 300px，会发生什么现象？如何解决由此产生的布局问题？
请解释 max-height 和 height 的区别。如果一个元素的内容高度超过了设定的 max-height，默认情况下会发生什么？如何让用户能看到所有内容？