Appearance
CSS 盒模型应用 👌
1 改变宽高范围
1.1 问题背景
默认情况下，width 和 height 设置的是内容盒的宽高，但在实际设计中，我们往往需要控制的是边框盒的尺寸。这种差异会导致布局计算的复杂性。
1.2 传统解决方案：精确计算
在 CSS3 之前，开发者需要手动计算元素的实际尺寸：
css
/* 传统方式：手动计算 */
.box {
width: 200px; /* 内容宽度 */
padding: 20px; /* 左右内边距各 20px */
border: 5px solid #333; /* 左右边框各 5px */
/* 实际占用宽度 = 200 + 20*2 + 5*2 = 250px */
}
/* 如果要让边框盒宽度为 200px，需要这样计算 */
.box-precise {
width: 150px; /* 200 - 20*2 - 5*2 = 150px */
padding: 20px;
border: 5px solid #333;
/* 边框盒宽度 = 150 + 20*2 + 5*2 = 200px */
}1.3 现代解决方案：box-sizing 属性
1.3.1 属性值详解
| 属性值 | 描述 | 计算方式 |
|---|---|---|
content-box | 默认值，宽高指内容盒 | width/height = 内容区域 |
border-box | 宽高指边框盒 | width/height = 内容 + 内边距 + 边框 |
padding-box | 宽高指内边距盒（已废弃） | width/height = 内容 + 内边距 |
1.3.2 实际应用示例
css
/* 使用 border-box 简化计算 */
.modern-box {
box-sizing: border-box;
width: 200px; /* 边框盒宽度直接为 200px */
padding: 20px;
border: 5px solid #333;
/* 内容宽度自动计算为：200 - 20*2 - 5*2 = 150px */
}1.3.3 全局设置最佳实践
css
/* 推荐的全局设置 */
*,
*::before,
*::after {
box-sizing: border-box;
}2 改变背景覆盖范围
2.1 默认行为
默认情况下，元素的背景会覆盖到边框盒，包括内容区域、内边距和边框。
2.2 background-clip 属性
2.2.1 属性值详解
| 属性值 | 描述 | 覆盖范围 |
|---|---|---|
border-box | 默认值 | 背景延伸到边框外边缘 |
padding-box | 内边距盒 | 背景延伸到内边距外边缘，不包括边框 |
content-box | 内容盒 | 背景仅在内容区域显示 |
3 溢出处理
3.1 overflow 属性概述
overflow 属性控制当内容超出元素的边框盒时的处理方式，是布局控制的重要工具。
3.2 属性值详解
| 属性值 | 描述 | 应用场景 |
|---|---|---|
visible | 默认值，内容可见 | 一般不主动设置 |
hidden | 隐藏溢出内容 | 图片裁剪、文本截断 |
scroll | 始终显示滚动条 | 固定高度的内容区域 |
auto | 需要时显示滚动条 | 响应式内容容器 |
clip | 裁剪溢出内容（CSS3） | 性能优化场景 |
3.3 分轴控制
css
/* 分别控制水平和垂直方向 */
.scroll-container {
width: 300px;
height: 200px;
overflow-x: auto; /* 水平方向自动滚动 */
overflow-y: hidden; /* 垂直方向隐藏溢出 */
}
/* 简写形式 */
.scroll-both {
overflow: auto hidden; /* 水平 auto，垂直 hidden */
}3.4 实际应用场景
3.4.1 文本截断
css
/* 单行文本截断显示省略 */
.text-ellipsis {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}3.4.2 图片容器
css
/* 图片裁剪容器 */
.image-container {
width: 200px;
height: 200px;
overflow: hidden;
border-radius: 50%; /* 圆形头像 */
}
.image-container img {
width: 100%;
height: 100%;
object-fit: cover;
}4 断词规则
4.1 word-break 属性
word-break 属性控制文字在什么位置被截断换行，对于多语言网站尤其重要。
4.1.1 属性值详解
| 属性值 | 描述 | 适用场景 |
|---|---|---|
normal | 默认规则 | CJK 字符在文字位置截断，非 CJK 在单词位置截断 |
break-all | 强制截断 | 所有字符都可以在任意位置截断 |
keep-all | 保持完整 | 所有文字都在单词边界截断 |
break-word | 优雅截断 | 优先在单词边界截断，必要时截断单词内部 |
5 空白处理
5.1 white-space 属性
white-space 属性控制元素内空白字符的处理方式，包括空格、制表符、换行符等。
5.1.1 属性值详解
| 属性值 | 空格/制表符 | 换行符 | 自动换行 | 应用场景 |
|---|---|---|---|---|
normal | 合并 | 合并 | 是 | 普通文本 |
nowrap | 合并 | 合并 | 否 | 单行文本 |
pre | 保留 | 保留 | 否 | 代码显示 |
pre-wrap | 保留 | 保留 | 是 | 格式化文本 |
pre-line | 合并 | 保留 | 是 | 诗歌、地址 |
break-spaces | 保留 | 保留 | 是 | 现代标准 |
5.1.2 实际应用示例
css
/* 单行文本不换行 */
.single-line {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 代码块显示 */
.code-display {
white-space: pre;
font-family: "Courier New", monospace;
background: #f5f5f5;
padding: 10px;
border-radius: 4px;
}
/* 保持格式的文本 */
.formatted-text {
white-space: pre-wrap;
/* 保留空格和换行，但允许自动换行 */
}
/* 诗歌或地址显示 */
.poetry {
white-space: pre-line;
/* 保留换行符，但合并多余空格 */
}