max-width 和 max-height 可限制元素最大尺寸，配合 overflow 和 box-sizing 能有效防止内容溢出；设置 max-width: 100% 可使图片自适应容器，结合 -webkit-line-clamp 可控制文本行数，避免布局错乱。
在CSS中，控制盒模型的大小并防止内容溢出是布局中的常见需求。max-width 和 max-height 是两个关键属性，能有效限制元素的最大尺寸，避免内容超出容器。下面介绍如何使用它们来优化布局、防止溢出。
理解 max-width 和 max-height 的作用
这两个属性用于设置元素尺寸的上限：
- max-width：指定元素内容区域的最大宽度。当内容变宽时，不会超过这个值，超出部分会换行或被裁剪（取决于其他样式）。
- max-height：设定元素的最大高度。内容超出时，会根据 overflow 属性决定是否显示滚动条或隐藏溢出部分。
它们常用于响应式设计中，确保图片、视频或文本块在不同屏幕尺寸下不会撑破容器。
防止内容溢出的常用方法
仅设置 max-width 或 max-height 可能还不够，需结合其他属性协同控制溢出行为。
立即学习“前端免费学习笔记（深入）”；
- 对图片或嵌入内容使用 max-width: 100%，使其在父容器内自适应缩放，避免横向溢出。
- 对固定高度的容器（如卡片、弹窗），设置 max-height 并配合 overflow: auto，让内容过多时出现滚动条。
- 使用 box-sizing: border-box 确保 padding 和 border 不会增加元素总宽高，使尺寸控制更精确。
实际应用示例
以下是一个防止图片和文本溢出的典型写法：
.container {
width: 300px;
max-height: 200px;
overflow: hidden;
border: 1px solid #ccc;
}
.container img {
max-width: 100%;
height: auto;
}
.container p {
max-height: 100px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
这样能确保图片不撑破容器，文本最多显示三行，超出部分以省略号表示。
基本上就这些。合理使用 max-width 和 max-height，再搭配 overflow 和 box-sizing，就能有效控制盒模型大小，避免布局错乱。不复杂但容易忽略细节。
