🎨 CSS/HTML 场景决策

/* 经典后台布局 */ .layout { display: grid; grid-template-areas: "header header" "sidebar main" "footer footer"; grid-template-columns: 240px 1fr; grid-template-rows: 60px 1fr 40px; min-height: 100vh; } .header { grid-area: header; } .sidebar { grid-area: sidebar; } .main { grid-area: main; } .footer { grid-area: footer; } /* 响应式：移动端侧边栏折叠 */ @media (max-width: 768px) { .layout { grid-template-areas: "header" "main" "footer"; grid-template-columns: 1fr; } .sidebar { display: none; } }

/* 简单又强大的导航栏 */ .navbar { display: flex; align-items: center; /* 垂直居中 */ justify-content: space-between; /* 两端对齐 */ padding: 0 24px; height: 60px; } .navbar-links { display: flex; gap: 16px; /* 替代 margin 的现代方案 */ } /* <nav class="navbar"> <div class="logo">Logo</div> <div class="navbar-links"> <a>首页</a> <a>关于</a> <a>联系</a> </div> </nav> */

/* ❌ 问题：子元素浮动后父元素高度为0 */ .parent { border: 1px solid red; /* 高度塌陷！看不到边框 */ } .child { float: left; width: 100px; height: 100px; } /* ✅ 方案1：overflow 创建 BFC */ .parent { border: 1px solid green; overflow: hidden; /* 或 auto */ } /* ✅ 方案2：display: flow-root（最干净） */ .parent { border: 1px solid blue; display: flow-root; /* 无副作用，专为BFC设计 */ } /* ✅ 方案3：现代做法——直接用 Flex */ .parent { display: flex; /* Flex 本身就是 BFC，顺便解决布局 */ }

/* 表头滚动到顶部时吸住 */ .table-header { position: sticky; top: 0; /* 距顶部0px时开始粘滞 */ z-index: 10; /* 确保在内容上方 */ background: #fff; /* 必须设背景，否则内容会透过来 */ } /* ⚠️ sticky 失效的常见原因 */ // 1. 父元素有 overflow: hidden/auto/scroll → sticky 失效 // 2. 父元素高度不够 → 没有滚动空间 // 3. 没设置 top/bottom → 不知道粘在哪里

/* ✅ 方案1：Flex 居中 — 最推荐 */ .container { display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ height: 100vh; } /* ✅ 方案2：Grid 居中 — 最简洁 */ .container { display: grid; place-items: center; /* 一行搞定！*/ height: 100vh; } /* ✅ 方案3：绝对定位 + transform */ .container { position: relative; height: 100vh; } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* ✅ 方案4：绝对定位 + margin auto（需已知宽高）*/ .child { position: absolute; inset: 0; /* top:0; right:0; bottom:0; left:0 的简写 */ margin: auto; width: 200px; height: 100px; }

/* 不用 media query，自动响应式！*/ .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; } /* 容器宽度 > 1120px → 4列 */ /* 容器宽度 840-1120px → 3列 */ /* 容器宽度 560-840px → 2列 */ /* 容器宽度 < 560px → 1列 */ /* clamp() 流式字号 */ h1 { font-size: clamp(24px, 5vw, 48px); /* 最小24px，理想5vw，最大48px */ }

/* 父容器声明查询容器 */ .sidebar { container-type: inline-size; } /* 根据父容器宽度（不是视口宽度）变化 */ @container (min-width: 400px) { .card { display: flex; /* 宽了就横排 */ gap: 16px; } } @container (max-width: 399px) { .card { display: block; /* 窄了就竖排 */ } } /* 同一个 .card 组件，放在 sidebar 里是竖排，放在 main 里是横排 */ /* 不用关心视口宽度，只关心自己所在容器宽度！*/

/* ✅ 只改这些属性 → GPU 加速，60fps */ .fast-animation { transform: translateX(100px); /* 移动 */ opacity: 0.5; /* 透明度 */ } /* ❌ 改这些属性 → 触发重排重绘，卡顿 */ .slow-animation { left: 100px; /* ❌ 触发 layout */ top: 100px; /* ❌ 触发 layout */ width: 200px; /* ❌ 触发 layout */ margin: 20px; /* ❌ 触发 layout */ } /* 性能等级：transform/opacity > box-shadow > color/background > width/height/margin */

/* Loading 旋转 */ @keyframes spin { to { transform: rotate(360deg); } } .spinner { animation: spin 1s linear infinite; } /* 脉冲呼吸 */ @keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.05); opacity: 0.8; } } .pulse { animation: pulse 2s ease-in-out infinite; } /* 弹入效果 */ @keyframes bounceIn { 0% { transform: scale(0.3); opacity: 0; } 50% { transform: scale(1.05); } 70% { transform: scale(0.9); } 100% { transform: scale(1); opacity: 1; } } .bounce-in { animation: bounceIn 0.5s ease-out; }

/* 亮色主题（默认）*/ :root { --bg: #ffffff; --text: #1a1a1a; --primary: #3b82f6; --card-bg: #f3f4f6; --border: #e5e7eb; } /* 暗色主题 */ [data-theme="dark"] { --bg: #F7F6F3; --text: #cdd6f4; --primary: #58a6ff; --card-bg: #FFFFFF; --border: #30363d; } body { background: var(--bg); color: var(--text); transition: background 0.3s, color 0.3s; } // JS 切换主题 document.documentElement.dataset.theme = isDark ? 'dark' : 'light'; // 或者跟随系统 const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

<!-- ✅ 语义化结构 --> <header> <nav aria-label="主导航"> <a href="/">首页</a> <a href="/about">关于</a> </nav> </header> <main> <article> <h1>文章标题</h1> <time datetime="2024-01-15">2024年1月15日</time> <p>文章内容...</p> <figure> <img src="chart.png" alt="数据图表"> <figcaption>图1：月度增长趋势</figcaption> </figure> </article> <aside> <h2>相关推荐</h2> ... </aside> </main> <footer> <p>版权信息</p> </footer> <!-- ❌ div 汤 --> <div class="header"> <div class="nav">...</div> </div> <div class="content"> <div class="post">...</div> <div class="sidebar">...</div> </div>

<style scoped> /* 自动添加 data-v-xxx 属性，样式只对当前组件生效 */ .card { padding: 16px; border-radius: 8px; } .card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.1); } </style> <style> /* 不加 scoped 的 style 块 = 全局样式 */ /* 适合引入第三方库的全局样式覆盖 */ .el-dialog { border-radius: 12px; } </style>

// 文件名必须带 .module.css // Button.module.css .btn { padding: 8px 16px; border-radius: 6px; } .primary { background: #3b82f6; color: white; } // Button.jsx import styles from './Button.module.css'; function Button({ variant, children }) { return ( <button className={`${styles.btn} ${styles[variant]}`}> {children} </button> ); }

/* 必填字段 * 标记 */ .required::after { content: '*'; color: red; margin-left: 4px; } /* CSS 三角形 */ .tooltip::after { content: ''; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); border: 8px solid transparent; border-top-color: #333; /* 只有顶边有色 = 三角形 */ } /* 序号计数器 */ ol { counter-reset: section; } li { counter-increment: section; } li::before { content: counter(section) ". "; font-weight: bold; } /* 自定义 checkbox（隐藏原生 + 伪元素替代）*/ input[type="checkbox"] { display: none; } input[type="checkbox"] + label::before { content: ''; display: inline-block; width: 18px; height: 18px; border: 2px solid #999; border-radius: 3px; margin-right: 8px; vertical-align: middle; } input[type="checkbox"]:checked + label::before { background: #3b82f6; border-color: #3b82f6; }