热搜刷屏：“div 布局怎么防塌陷”、“flex 还是 grid 更香”、“移动端悬浮按钮挡视线”、“overflow-y: scroll 要不要剃掉”。冯唐说：身体要调匀，页面也一样——骨架、血肉、呼吸，一样都不能乱。
写在开头：div 不只是方块
div 多了会喘，写杂了会塌。先让它站直，再让它好看。别急着塞 100vh，别一股脑儿 min-h-screen，布局需要留白，才有呼吸。
热搜脉象：四个高频痛点
- 防塌陷：父容器忘了清理浮动、撑不住子元素高度。
- Flex vs Grid：横排按钮求自适应，网格输入求对齐。
- 悬浮按钮：右下角挡正文，还跟系统手势抢地盘。
- 滚动条：一刀切
overflow-y: scroll，结果视觉打架。
骨架心法：先定容器，再谈排列
- 视口层：用
max-width锁视线，padding打底，少用强制满高。 - 主体层：
display: flex; flex-direction: column; gap: 1.5rem;，用 gap 代替满天飞的 margin。 - 卡片层：
min-height: 50vh足矣，统一内边距和圆角，阴影轻一点。 - 悬浮层：
position: fixed; right: 16px; bottom: calc(64px + 8px); z-index: 40;，给正文让路，也给手势让路。
排列血肉：Flex / Grid 用武之地
- 按钮组：
flex-wrap: wrap; gap控节奏，小屏自动换行，不挤眼睛。 - 输入网格：
grid-template-columns: repeat(auto-fit, minmax(48px, 1fr));，字母格子随屏幕自调。 - 信息条：用
align-items: center稳住基线，别让图标、文字各走各的路。
呼吸节奏：滚动条与留白
- 去掉全局
min-h-screen，让页面按内容自然落地。 - 只给需要滚动的局部加
overflow-y: auto，全局滚动交给 body。 - 留白优先：用内边距塑形，用
max-width收束视线，用浅色背景减压。
即贴即用的骨架片段
.page {
display: flex;
justify-content: center;
padding: 24px 16px;
}
.shell {
width: 100%;
max-width: 1100px;
display: flex;
flex-direction: column;
gap: 24px;
}
.card {
min-height: 52vh;
padding: 24px;
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}
.fab {
position: fixed;
right: 16px;
bottom: calc(64px + 8px);
z-index: 40;
}移动端要诀：掌心留出口
- 触控面积 ≥ 44px，
line-height放宽到 1.4 以上。 - 悬浮按钮上移一指宽，别挡系统手势。
- 让网格可折行，别逼用户横向拖动。
主题配色：情绪即体验
- 浅：柔白 + 雾灰；深：炭黑 + 雾灰。对比度至少 WCAG AA。
- 过渡：
transition: background-color .2s, color .2s, box-shadow .2s;，让切换不炸眼。 - 阴影：两层轻影，暗色再收一点，别糊成泥。
SEO 小抄（写给机器看的温柔）
- 关键词串联：div 布局、防塌陷、flex 布局、grid 布局、去掉滚动条、悬浮按钮、max-width、gap、min-height、移动端布局。
- 标题带行动词（“战报”“摆平”），摘要点热搜，正文分段清晰，代码含核心词。
- 图片 alt 写实：示意卡片、悬浮按钮、输入网格。
收尾：少即是多，稳即是美
布局像练气功：骨架先定，血肉铺开，留白给呼吸。滚动条不必全堵，但要会放。写 div，要像写诗，删掉多余的字，剩下的才是呼吸。