CSS: CSS 宽高与溢出
最后更新：2026-10-13
1. 宽度和高度
(1) 尺寸属性速查表
| 属性 | 常用值 | 作用 |
|---|---|---|
width |
300px, 50%, 50vw, auto |
元素内容宽度 |
height |
200px, 50%, 50vh, auto |
元素内容高度 |
min-width |
320px, 50% |
最小宽度（防止过小） |
max-width |
1200px, 80% |
最大宽度（响应式常用） |
min-height |
200px, 100vh |
最小高度 |
max-height |
400px |
最大高度（超出会溢出） |
overflow |
visible, hidden, scroll, auto |
内容溢出时的处理方式 |
overflow-x |
visible, hidden, scroll, auto |
水平方向溢出控制 |
overflow-y |
visible, hidden, scroll, auto |
垂直方向溢出控制 |
(2) width 和 height
width 和 height 设置元素内容区域的尺寸：
▶ 示例
▶ 试一试(3) 常用的单位
▶ 示例
▶ 试一试(4) min-width / max-width
限制元素的最小/最大宽度，常用于响应式设计：
▶ 示例
▶ 试一试(5) min-height / max-height
▶ 示例
▶ 试一试2. calc() 计算函数
calc() 是一个 CSS 函数，允许在属性值中进行数学计算（加、减、乘、除）。它的最大优势是可以混合不同单位。
📌 calc() 的运算规则：
+ 和 - 两侧必须有空格（calc(100% - 20px) ✅，calc(100%-20px) ❌），* 和 / 两侧空格可选。
▶ 示例
▶ 试一试(1) 常见应用场景
- 侧边栏 + 主内容：
.main { width: calc(100% - 300px); }让主内容自适应剩余空间 - 等间距卡片：
.card { width: calc((100% - 40px) / 3); }三列卡片，间距 20px - 响应式字体：
font-size: calc(14px + 0.5vw);基础字号 + 视口增量 - 精确居中：
left: calc(50% - 100px);偏移量已知时替代 transform
(2) calc() 的兼容性
calc() 在 IE11+、Chrome 26+、Firefox 16+、Safari 7+ 中都已支持，可以在现代项目中放心使用。唯一需要注意的是不要在 calc() 中做字符串拼接。
3. 溢出控制 overflow
💡 overflow-x 和 overflow-y： 同时设置水平和垂直方向的 overflow 时要注意——如果两个值不一样，其中一个可能会被强制设为
auto。最好的做法是统一用 overflow 简写。
当元素的内容超过了设定的宽高时，就会发生"溢出"。overflow 属性控制如何处理溢出内容。
(1) overflow 的值
▶ 示例
▶ 试一试(2) 分别控制两个方向
▶ 示例
▶ 试一试(3) 常见应用场景
1. 文本省略效果
配合 text-overflow 实现单行文本截断省略：
▶ 示例
▶ 试一试2. 图片裁剪
固定容器尺寸，让超出的图片部分隐藏：
▶ 示例
▶ 试一试3. 滚动容器
创建一个固定高度、可滚动的区域：
▶ 示例
▶ 试一试4. 清除浮动
给父容器设置 overflow: hidden 或 overflow: auto 可以清除子元素的浮动影响：
▶ 示例
▶ 试一试4. object-fit（图像/视频适配）
object-fit 控制 <img> 或 <video> 等替换元素如何适应容器尺寸：
▶ 示例
▶ 试一试- cover：保持比例铺满，裁剪多余部分（最常用）
- contain：保持比例完整显示，留空白
- fill：不保持比例，拉伸填满（会变形）
- none：保持原始尺寸
- scale-down：取 none 和 contain 中较小的
5. CSS 尺寸函数
(1) calc()
calc() 可以在 CSS 中动态计算尺寸，混合使用不同单位：
▶ 示例
▶ 试一试注意：运算符前后必须保留空格，否则无法识别。
❓ 常见问题
Q height: 100% 为什么不生效？
A 百分比高度相对于父元素的高度。如果父元素高度是 auto（由内容决定），子元素的 height: 100% 就无法计算——因为父元素自己都还没确定高度。要让百分比高度生效，父元素需要一个明确的高度值。
Q max-width: 100% 和 width: 100% 有什么区别？
A width: 100% 强制元素等于父容器宽度，即使内容很少也会撑满。max-width: 100% 表示"最多不超过父容器宽度"，如果元素本身更小，就保持原尺寸。图片响应式用 max-width: 100% 是最佳实践。
Q overflow: hidden 会隐藏掉所有溢出的内容吗？
A 会。overflow: hidden 会把超出元素尺寸的内容全部裁剪掉。如果需要滚动查看溢出内容，用 overflow: auto（按需出现滚动条）或 overflow: scroll（始终显示滚动条）。overflow: hidden 也经常用来触发 BFC（块级格式化上下文），解决浮动问题。
📖 小节
- 控制元素的宽高和溢出行为是布局中的基础操作
width/height设置尺寸，min-width/max-width限制范围，overflow处理溢出内容object-fit: cover是图片处理的神器，calc()函数则提供了灵活的动态计算能力- 掌握这些属性，你就能更好地控制元素在各种情况下的表现
📝 作业
- 创建一个"响应式容器"——宽度为 80%，最大宽度 1200px，最小宽度 320px，并水平居中。
- 创建一个固定尺寸的图片容器（300×200），图片比容器大，使用
object-fit: cover让图片铺满且不变形。 - 实现一个"单行文本省略"和"多行文本溢出"的效果（提示：多行可用
-webkit-line-clamp）。 - 使用
calc()实现一个"全屏减去导航栏高度"的布局。
