使用方式
使用能力查询按属性和值确认支持范围。Flex、Grid、普通流、表格和定位有不同约束；一个属性存在，不保证所有组合都与浏览器一致。
接入和限制
页面优先明确盒尺寸、字体资源和滚动容器。排查时先确认 computed style，再检查盒模型、父容器尺寸和溢出。多栏、CSS Shapes、Subgrid 的范围按默认构建和范围说明核对。
实际布局代码
设置页用 Flex 分配侧栏和工作区，窄窗口切换方向。样式文件与课程工程使用相同源码，具体行为可运行项目检查。
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: "Segoe UI", "Microsoft YaHei", sans-serif; background: #f5f7fa; color: #202936; }
.app { display: flex; min-height: 100vh; }
.sidebar { width: 184px; flex-shrink: 0; background: #fafbfc; border-right: 1px solid #e2e7ee; padding: 24px 14px; }
.wordmark { font-size: 19px; font-weight: 700; margin: 0 10px 32px; }
.sidebar-label { font-size: 11px; color: #6c788a; margin: 0 10px 10px; }
.nav-item { padding: 9px 12px; font-size: 13px; line-height: 1.4; margin-bottom: 4px; border-radius: 5px; color: #536174; }
.active { background: #e9f0ff; color: #235bcd; font-weight: 600; }
.workspace { flex: 1; min-width: 0; padding: 20px 28px; }
.topline { display: flex; justify-content: space-between; font-size: 11px; color: #6c788a; padding-bottom: 12px; border-bottom: 1px solid #e2e7ee; }
h1 { font-size: 25px; line-height: 1.3; margin-top: 18px; margin-bottom: 7px; }
.intro { font-size: 13px; line-height: 1.6; color: #637084; margin-bottom: 18px; }
.panel { padding: 16px 20px; background: #ffffff; border: 1px solid #dfe5ed; border-radius: 7px; margin-bottom: 14px; }
.panel h2 { font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.panel-note { font-size: 12px; line-height: 1.6; color: #6c788a; margin-bottom: 16px; }
.field { margin-bottom: 16px; }
label { font-size: 13px; display: block; margin-bottom: 6px; }
input[type=text] { width: 100%; padding: 8px 10px; font-size: 14px; color: #202936; background: #fff; border: 1px solid #bbc6d5; border-radius: 4px; }
input:focus { outline: 2px solid #4379df; outline-offset: 2px; }
input[aria-invalid=true] { border-color: #a93828; }
.checkbox-row { display: flex; align-items: center; gap: 9px; font-size: 13px; min-height: 24px; }
.checkbox-row label { margin-bottom: 0; }
.details { display: flex; gap: 20px; }
.detail { flex: 1; border-top: 1px solid #e8ecf2; padding-top: 12px; }
.detail p { font-size: 11px; color: #6c788a; margin-bottom: 5px; }
.detail strong { font-size: 13px; font-weight: 600; }
.actions { display: flex; gap: 10px; align-items: center; margin-top: 18px; }
button { padding: 8px 18px; font-size: 13px; background: #2864d7; color: #fff; border: 1px solid #2864d7; border-radius: 4px; cursor: pointer; }
button:hover { background: #1e53ba; border-color: #1e53ba; }
button:active { background: #19469e; }
button:focus { outline: 2px solid #4379df; outline-offset: 3px; }
button.secondary { background: #fff; color: #43536b; border-color: #cbd4e0; }
button.secondary:hover { background: #edf2f9; border-color: #abbad0; }
.status { margin-top: 12px; min-height: 34px; padding: 8px 12px; font-size: 12px; line-height: 1.5; background: #edf1f6; border-radius: 4px; color: #58677d; }
.status[data-state=success] { color: #2855a2; background: #eaf1ff; }
.status[data-state=error] { color: #a33434; background: #fff0ef; }
@media(max-width: 760px) {
.sidebar { width: 152px; padding: 20px 10px; }
.wordmark { font-size: 17px; }
.workspace { padding: 18px; }
.panel { padding: 16px; }
.details { flex-direction: column; gap: 12px; }
}
@media(max-width: 560px) {
.app { flex-direction: column; }
.sidebar { width: 100%; padding: 14px 18px; }
.wordmark { margin: 0; }
.sidebar-label, .nav-item { display: none; }
.workspace { padding: 18px; }
.actions { flex-wrap: wrap; }
}
自带字体与系统字体
@font-face 可配置 local 与 url 字体源。系统没有指定字体时，使用随应用部署的文件。相对路径需要按页面加载方式确认；使用 loadHTML 的工程可以改为可控绝对路径，或采用完整资源加载方案。
@font-face {
font-family: "AppMono";
src: local("Consolas"), url("fonts/app-mono.woff2") format("woff2");
}
code { font-family: "AppMono", monospace; }字体加载的范围
当前 SDK 的 @font-face 采用同步加载模型。font-display 的值会被解析存储，但没有浏览器异步加载下的 FOUT/FOIT 差异；unicode-range 的码点级字体匹配也不能仅凭语法解析成功认定已支持。
从空白页搭出稳定布局
从结构开始调，能更快判断是哪一层出了问题。
- 使用语义容器拆分标题栏、导航、内容和状态区，为主要容器标注 id。
- 设定外层高度与滚动归属，再用 Flex 或 Grid 分配区域。
- 对可缩小内容设置 min-width:0；需要内部滚动的 Flex 子项检查 min-height:0。
- 最后加字体、颜色、边框与状态样式；分别检查宽窗口和最小窗口。
布局常见现象
按现象缩小范围，再修改对应文件。
| 现象 | 检查与处理 |
|---|---|
| 内容把窗口撑宽 | 检查固定宽度、长文本与 min-width，避免给主区域叠加重复 padding。 |
| 滚动条没有出现 | 确认滚动容器有受约束的高度，再检查 overflow。 |
| 样式看起来没生效 | 在 DevTools 核对选择器是否命中、computed style 和当前尺寸；再查询具体属性值支持。 |
主题由一组变量控制
把背景、文字、边框、强调色和间距集中声明；交互状态使用 class 或 data 属性，不在每个节点重复写行内样式。不同主题保持相同结构，便于逐项比较。
:root { --surface: #f5f7fa; --ink: #1d2939; --line: #d9e1ec; --accent: #2563eb; }
.panel { background: var(--surface); color: var(--ink); border: 1px solid var(--line); padding: 16px; }
.panel[data-state="error"] { border-color: #bb3348; }文档有误或遗漏？
反馈此页问题 →