2026.8.17 星期一
一.CSS自定义属性
定义全局变量颜色，而不是给每个写死。颜色统一集中管理，修改主题色只改root一处，不需要全局搜索替换颜色值；方便做深色 / 浅色主题切换。
:root { --green: hsl(75, 94%, 57%); --white: hsl(0, 0%, 100%); --grey-700: hsl(0, 0%, 20%); --grey-800: hsl(0, 0%, 12%); --grey-900: hsl(0, 0%, 8%); }:root代表文档根元素，在这里定义的变量是全局 CSS 变量。
变量命名以--开头；使用时用var(--变量名)。如下：
/* 使用示例 */ .btn { background-color: var(--green); color: var(--white); }二.min-height和min-width
1 height vs min‑height（高度）
height:100vh：强制固定高度等于视口高度。如果页面内容很多，内容会溢出盒子，发生裁切，内容被挡住看不到。min‑height:100vh：盒子最少要有视口那么高，内容多就自动撑开变大✅页面布局首选。
2.卡片布局width:100% + max‑width
.card { width: 100%; /* 手机：占满可用宽度 */ max-width: 380px; /* 桌面：最大不超过380px，不会无限拉宽 */ /* 不要写 width:380px; 手机下直接溢出屏幕出横向滚动条！ */ }手机小屏幕：
width:100%，卡片占满父容器宽度。电脑大屏幕：卡片宽度涨到
380px就不再变大，保持舒适阅读宽度。
3.移动端+桌面端完整适配
①页面外层body
body { /* 页面最少占满屏幕高度，内容多自动变长 */ min-height: 100vh; margin:0; /* 小屏幕四周留白，防止贴边 */ padding: 24px; display:flex; justify-content:center; align-items:center; }②中间卡片
.card { width: 100%; max-width: 380px; /* 桌面端最大宽度 */ /* 不要写 height！内容多少高度就多少 */ padding: 2rem; border-radius:12px; }
