CSS: CSS 宽高与溢出
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 设置元素内容区域的尺寸：
▶ 示例
HTML
<style>
.box {
width: 300px;
height: 200px;
background: #f0f0f0; /* 加背景色以便看到尺寸范围 */
}
</style>
<div class="box">这是一个盒子元素，用于展示盒模型相关样式效果</div>
(3) 常用的单位
▶ 示例
HTML
<style>
.pixel {
width: 300px; /* 固定像素 */
background: #e3f2fd;
}
.percent {
width: 50%; /* 相对父容器的百分比 */
background: #fce4ec;
}
.vw-vh {
width: 50vw; /* 相对视口宽度 */
height: 100vh; /* 相对视口高度 */
background: #e8f5e9;
}
.auto-width {
width: auto; /* 默认，由内容决定 */
background: #fff3e0;
}
</style>
<div class="pixel">像素单位：固定宽度 200px</div>
<div class="percent">百分比单位：宽度 50%</div>
<div class="vw-vh">视口单位：宽度 50vw</div>
<div class="auto-width">自动宽度：根据内容决定</div>
(4) min-width / max-width
限制元素的最小/最大宽度，常用于响应式设计：
▶ 示例
HTML
<style>
.container {
width: 80%;
max-width: 1200px; /* 最大不会超过1200px */
min-width: 320px; /* 最小不会小于320px */
margin: 0 auto;
background: #e8eaf6;
padding: 10px;
}
</style>
<div class="container">容器元素，内部包含其他子元素</div>
(5) min-height / max-height
▶ 示例
HTML
<style>
.card {
min-height: 200px; /* 至少200px高，内容多了会增高 */
max-height: 400px; /* 超过400px会溢出 */
background: #fff3e0;
border: 1px solid #ccc;
}
</style>
<div class="card">这是一个卡片组件，具有最小高度和最大高度限制，当内容超出最大高度时会出现溢出效果，需要通过 overflow 属性来控制如何处理这些溢出的内容</div>
2. calc() 计算函数
calc() 是一个 CSS 函数，允许在属性值中进行数学计算（加、减、乘、除）。它的最大优势是可以混合不同单位。
📌 calc() 的运算规则：
+ 和 - 两侧必须有空格（calc(100% - 20px) ✅，calc(100%-20px) ❌），* 和 / 两侧空格可选。
▶ 示例
HTML
<style>
.layout {
/* 100%宽度减去侧边栏宽度 300px */
width: calc(100% - 300px);
background: #e3f2fd;
padding: 16px;
}
.sidebar {
width: 300px;
float: left;
background: #fce4ec;
padding: 16px;
box-sizing: border-box;
}
</style>
<div class="layout">主内容区域：宽度 = 100% - 300px</div>
(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 的值
▶ 示例
HTML
<style>
.visible {
overflow: visible; /* 默认值，溢出内容可见 */
background: #fce4ec;
height: 50px;
}
.hidden {
overflow: hidden; /* 溢出内容隐藏 */
background: #e8f5e9;
height: 50px;
}
.scroll {
overflow: scroll; /* 始终显示滚动条 */
background: #fff3e0;
height: 50px;
}
.auto {
overflow: auto; /* 需要时才显示滚动条 */
background: #e3f2fd;
height: 50px;
}
</style>
<div class="visible">内容可见区域（溢出部分会显示在盒子外部）</div>
<div class="hidden">内容超出时被隐藏裁剪（超出部分不可见）</div>
<div class="scroll">即使内容未超出也显示滚动条</div>
<div class="auto">只有内容超出时才出现滚动条</div>
(2) 分别控制两个方向
▶ 示例
HTML
<style>
.box {
overflow-x: hidden; /* 水平方向超出隐藏 */
overflow-y: auto; /* 垂直方向按需滚动 */
width: 200px;
height: 80px;
background: #f5f5f5;
border: 1px solid #ddd;
}
</style>
<div class="box">这是一个盒子元素，用于展示盒模型相关样式效果，多余的内容需要滚动才能全部查看</div>
(3) 常见应用场景
1. 文本省略效果
配合 text-overflow 实现单行文本截断省略：
▶ 示例
HTML
<style>
.ellipsis {
white-space: nowrap;
/* 空白符处理 */
overflow: hidden;
text-overflow: ellipsis;
width: 200px;
border: 1px solid #ccc;
padding: 8px;
background: #f9f9f9;
}
</style>
<div class="ellipsis">这是一段超长文本，超出部分将被省略号截断</div>
2. 图片裁剪
固定容器尺寸，让超出的图片部分隐藏：
▶ 示例
HTML
<style>
.avatar {
width: 100px;
height: 100px;
overflow: hidden;
border-radius: 50%; /* 圆形裁剪 */
background: #e0e0e0;
}
.avatar img {
width: 100%;
height: 100%;
object-fit: cover; /* 图片铺满容器 */
}
</style>
<div class="avatar">头像容器（圆形裁剪）</div>
3. 滚动容器
创建一个固定高度、可滚动的区域：
▶ 示例
HTML
<style>
.scroll-box {
height: 300px;
/* 高度 */
overflow-y: auto;
border: 1px solid #ddd;
padding: 10px;
background: #fafafa;
}
</style>
<div class="scroll-box">
<p>第1行：滚动容器可以显示大量内容</p>
<p>第2行：当内容超出容器高度时出现滚动条</p>
<p>第3行：滚动查看隐藏的内容</p>
<p>第4行：使用 overflow-y: auto 实现</p>
<p>第5行：内容越多，滚动条越往下走</p>
<p>第6行：适合用在评论区、公告栏等场景</p>
</div>
4. 清除浮动
给父容器设置 overflow: hidden 或 overflow: auto 可以清除子元素的浮动影响：
▶ 示例
HTML
<style>
.clearfix {
overflow: hidden; /* 触发 BFC，清除浮动 */
background: #e8eaf6;
padding: 10px;
}
</style>
<div class="clearfix">清除浮动容器（overflow: hidden 触发 BFC）</div>
4. object-fit（图像/视频适配）
object-fit 控制 <img> 或 <video> 等替换元素如何适应容器尺寸：
▶ 示例
HTML
<style>
.image-container {
width: 300px;
height: 200px;
background: #f5f5f5;
border: 2px dashed #aaa;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 10px;
}
.image-container img {
width: 100%;
height: 100%;
object-fit: cover; /* 铺满容器，可能裁剪 */
/* object-fit: contain; */ /* 完整显示，可能留白 */
/* object-fit: fill; */ /* 拉伸填满，可能变形 */
}
</style>
<div class="image-container">图片容器（替换为实际图片）</div>
- cover：保持比例铺满，裁剪多余部分（最常用）
- contain：保持比例完整显示，留空白
- fill：不保持比例，拉伸填满（会变形）
- none：保持原始尺寸
- scale-down：取 none 和 contain 中较小的
5. CSS 尺寸函数
(1) calc()
calc() 可以在 CSS 中动态计算尺寸，混合使用不同单位：
▶ 示例
HTML
<style>
.calc-demo {
width: calc(100% - 40px); /* 父容器宽度减40px */
height: calc(50vh - 60px); /* 半个视口高度减60px */
background: #e3f2fd;
border: 1px solid #90caf9;
display: flex;
align-items: center;
justify-content: center;
}
</style>
<div class="calc-demo">宽度自动减去40px，高度为视口一半减60px</div>
注意：运算符前后必须保留空格，否则无法识别。
❓ 常见问题
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()实现一个"全屏减去导航栏高度"的布局。
