css布局项目实战_制作一个带有侧边栏的博客模板
最稳妥的侧边栏固定+主内容自适应布局用 display: flex；.sidebar 设固定宽260px，.main 必须设 flex: 1 和 min-width: 0；侧边栏滚动需 height: calc(100vh - 64px) + overflow-y: auto；图片和代码块需 max-width: 100%、pre 加 overflow-x: auto；收起时需同步修改 .main 为 width: 100%。
侧边栏固定宽度 + 主内容自适应的 flex 布局写法
用 display: flex 是目前最稳妥的方案，避免浮动或绝对定位带来的流式断裂问题。主区域必须设 flex: 1，否则在小屏下会溢出或塌陷。
.container {
display: flex;
}
.sidebar {
width: 260px; /* 固定宽度，不建议用 % */
}
.main {
flex: 1; /* 关键：撑满剩余空间 */
min-width: 0; /* 防止内容过长时 flex 项不收缩 */
}- 别给
.main设width: 100%—— 它会和.sidebar冲突，导致换行 -
min-width: 0必须加，否则内部text-overflow: ellipsis或长单词可能失效 - 如果侧边栏需要响应式隐藏，用
flex: none+display: none组合，不要只靠display
侧边栏滚动独立于主内容
用户常误以为给 .sidebar 加 overflow-y: auto 就够了，但实际需配合高度约束，否则滚动条不会出现。
.sidebar {
height: calc(100vh - 64px); /* 减去 header 高度 */
overflow-y: auto;
}
.sidebar::-webkit-scrollbar {
width: 6px;
}
.sidebar::-webkit-scrollbar-thumb {
background: #ccc;
}- 高度必须是「可计算值」，
height: 100%在 flex 容器里通常无效 - 用
calc()比 JS 动态算更轻量，也避免 SSR 渲染错位 - 滚动条样式仅在 WebKit 内核生效；若需全平台统一，得用第三方库（如
simplebar）
博客正文图片与代码块的宽度越界问题
Markdown 渲染后的 和 默认按原始尺寸显示，极易突破 .main 宽度，尤其在移动设备上。
.main img,
.main pre {
max-width: 100%;
box-sizing: border-box;
}
.main pre {
overflow-x: auto; /* 横向滚动代替折行 */
padding: 1rem;
}-
max-width: 100%必须作用于具体元素，不能只写在.main上 -
overflow-x: auto对更友好 —— 保留缩进和语法高亮完整性 - 如果用了 Prism.js，注意它生成的
嵌套层级深，选择器要写全：.main pre code
移动端侧边栏收起后内容区宽度未重占的问题
用 transform: translateX(-100%) 隐藏侧边栏时，.main 的宽度不会自动扩展，视觉上仍留白。
.sidebar.collapsed {
transform: translateX(-100%);
}
.container.sidebar-collapsed .main {
flex: none;
width: 100%;
}- 不能只动侧边栏，必须同步调整
.main的 flex 行为 —— 否则它还“记得”原来要让出 260px - 用 class 切换比 media query 更可控，便于配合 JS 控制按钮状态
- 动画过渡要加在
.sidebar上，但transition: transform .3s ease，别加在width上（会触发重排）
侧边栏布局真正难的不是怎么“放上去”，而是各种边界场景下的行为一致性：小屏折叠后是否留白、长代码块是否截断、图片在 Retina 屏是否模糊、滚动是否卡顿……这些细节堆起来，才决定用户愿不愿意多看两篇文章。
