语义化 HTML
用正确的标签表达内容含义：<header> <nav> <main> <article> <section> <footer>。语义化提升可访问性、SEO 与可维护性。
<main>
<article>
<h1>标题</h1>
<p>正文段落</p>
</article>
<aside>侧边栏</aside>
</main>div 没有语义。能用 article/nav/button 等表达就用它们，屏幕阅读器与搜索引擎都更友好。
盒模型
每个元素是一个盒子：content + padding + border + margin。box-sizing: border-box 让宽高包含 padding 与 border，更直观。
*, *::before, *::after {
box-sizing: border-box; /* 推荐全局默认 */
}
.card {
width: 300px;
padding: 16px;
border: 1px solid #ddd; /* 总宽仍为 300px */
}相邻块级元素的垂直 margin 会合并取较大值。想避免就用 padding 或开启 BFC（如 overflow:hidden）。
Flexbox
Flex 是一维布局（主轴/交叉轴），适合导航栏、卡片排列、居中等。父设 display:flex，子用 flex 属性分配。
.nav {
display: flex;
justify-content: space-between; /* 主轴分布 */
align-items: center; /* 交叉轴居中 */
gap: 12px;
}
.nav > a { flex: 1; } /* 等分剩余空间 */Grid 布局
Grid 是二维布局（行+列），适合整体页面骨架、仪表盘。用 grid-template-columns 定义列，fr 表示比例。
.layout {
display: grid;
grid-template-columns: 240px 1fr 1fr; /* 侧栏 + 两列 */
gap: 16px;
}
.header { grid-column: 1 / -1; } /* 横跨所有列 */一维排列（横向菜单、纵向列表）用 Flex；需要行列同时控制的网格用 Grid。两者可嵌套组合。
定位与层叠
position 决定元素如何脱离/参与文档流：static/relative/absolute/fixed/sticky。z-index 控制层叠顺序（需配合定位）。
.modal {
position: fixed; /* 相对视口固定 */
inset: 0; /* top/right/bottom/left:0 */
z-index: 1000;
}
.sticky-bar { position: sticky; top: 0; } /* 滚动到顶后吸顶 */响应式设计
移动优先：先写小屏样式，用 @media (min-width: ...) 渐进增强大屏。配合相对单位与弹性布局适配多端。
.container { width: 100%; padding: 0 16px; }
@media (min-width: 768px) {
.container { max-width: 720px; margin: 0 auto; }
}能用 flex/grid 自动换行就别写死断点；用 clamp()、min()/max() 做流式尺寸，减少媒体查询数量。
BEM 命名
BEM（Block__Element--Modifier）让类名有结构、避免冲突、可读可维护：块__元素--修饰符。
.card { } /* Block */
.card__title { } /* Element */
.card--featured { } /* Modifier */
/* 避免 .card .title .active 这类难以追溯的嵌套 */常见陷阱与 FAQ
可能忘了 box-sizing: border-box，padding/border 会撑大盒子。全局设 border-box 可消除这类困惑。
默认 flex-shrink:1 允许收缩。需要保持尺寸时设 flex-shrink:0 或用 min-width:0 处理文本溢出。
z-index 只在定位元素（非 static）或 flex/grid 子项上有效。检查 position 与层叠上下文是否被祖先隔离。