颜色、排版与盒模型
使用十六进制、rgb 和 hsl 值设置颜色，选择字体，设置字号和行高，并使用外边距、边框和内边距调整元素间距。
颜色、排版与盒模型 是 CoddyKit 上的免费 Frontend Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。
CSS 颜色值
CSS 支持多种颜色格式。请根据上下文选择最清晰的格式：品牌颜色使用十六进制代码，轻松调整颜色使用 hsl()，编程生成的值使用 rgb()，快速制作原型时使用命名颜色。
color: #2b6cb0; /* hex */
color: rgb(43, 108, 176); /* rgb */
color: hsl(212, 61%, 43%); /* hsl */
color: royalblue; /* named */
color: rgba(0,0,0,0.5); /* rgba with alpha */背景颜色和图像
请使用 background-color 设置元素背景。请将 background-image 与渐变或 URL 配合使用。background 简写属性可以在一条声明中组合颜色、图像、位置、尺寸和重复方式。
background-color: #f7fafc;
background-image: linear-gradient(135deg, #667eea, #764ba2);
background: url('/hero.webp') center / cover no-repeat #1a202c;字体属性
您可以使用以下属性控制排版：font-family（字体）、font-size（em、rem、px）、font-weight（100–900）、font-style（斜体）、line-height（可读性比例）和 letter-spacing（字距）。
body {
font-family: 'Inter', system-ui, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.6;
color: #1a202c;
}文本属性
其他文本样式包括：text-align（左对齐、居中、右对齐、两端对齐）、text-decoration（下划线、删除线、无装饰）、text-transform（大写、首字母大写），以及用于截断文本的 text-overflow: ellipsis。
h1 { text-align: center; text-transform: uppercase; }
a { text-decoration: none; }
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}rem 与 em 和 px
px 是绝对单位。em 相对于元素自身的字体大小（会随层叠变化）。rem 相对于根元素的字体大小（更加可预测）。在大多数尺寸设置中，请使用 rem，以尊重用户的字体偏好。
html { font-size: 16px; } /* 1rem = 16px */
.card { padding: 1.5rem; } /* 24px */
.small { font-size: 0.875rem; } /* 14px */盒模型
每个 HTML 元素都是一个包含四层的矩形盒子：内容（元素的实际尺寸）、内边距（边框内部的空间）、边框以及 外边距（边框外部的空间）。
/* Total width = content + padding + border */
.box {
width: 200px;
padding: 16px;
border: 2px solid #ccc;
margin: 24px;
}box-sizing: border-box
默认情况下（content-box），内边距和边框会加到声明的宽度上。使用 box-sizing: border-box 后，内边距和边框会包含在声明的宽度中——这几乎总是您想要的效果。
/* Apply globally */
*, *::before, *::after {
box-sizing: border-box;
}
/* Now width: 200px includes padding and border */
.card {
width: 200px;
padding: 20px; /* doesn't add to width */
}外边距折叠
相邻块元素之间的垂直外边距会折叠——只有较大的外边距会生效。父元素与其第一个或最后一个子元素的外边距也会折叠。Flexbox 和 Grid 子元素不会发生外边距折叠。
内边距简写属性
简写形式 padding: top right bottom left 可以设置所有边。两个值分别设置垂直方向和水平方向。三个值分别设置顶部、水平方向和底部。
padding: 16px; /* all sides */
padding: 8px 16px; /* top/bottom left/right */
padding: 8px 16px 24px; /* top left/right bottom */
padding: 8px 16px 24px 32px; /* top right bottom left */边框属性
请使用 border: width style color 简写形式设置边框。也可以单独设置各个边，例如 border-top。请使用 border-radius 创建圆角。outline 与边框相似，但不会影响布局。
.card {
border: 1px solid #e2e8f0;
border-radius: 8px;
}
button:focus {
outline: 2px solid #3182ce;
outline-offset: 2px;
}溢出
overflow: hidden 会裁剪超出元素尺寸的内容。overflow: scroll 会添加滚动条。overflow: auto 只会在需要时添加滚动条。请使用 overflow-x 和 overflow-y 分别控制两个轴。
快速检查
如果使用 box-sizing: border-box，并设置 width: 300px; padding: 20px; border: 2px solid，元素最终呈现的总宽度是多少？
回顾：颜色、排版和盒模型
请使用十六进制、rgb 或 hsl 设置颜色。使用 font-family、字号、字重和 line-height 应用字体样式。每个元素都是一个盒子：内容 + 内边距 + 边框 + 外边距。请全局启用 box-sizing: border-box，以获得可预测的尺寸。
常见问题解答
「颜色、排版与盒模型」课时是免费的吗？
是的 — 「颜色、排版与盒模型」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Frontend Academy 课程的其余内容，请升级到 CoddyKit PRO。 Frontend Academy 课程共包含 4 节课。
「颜色、排版与盒模型」这节课中我会学到什么？
使用十六进制、rgb 和 hsl 值设置颜色，选择字体，设置字号和行高，并使用外边距、边框和内边距调整元素间距。 你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Frontend Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Frontend Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。
「颜色、排版与盒模型」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Frontend Academy 课中编写并运行代码吗？
能。每节 Frontend Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。