外观
CSS 盒模型与布局
- 状态：未准备
- 适用方向：前端 / Go 全栈
- 最近复习：待填写
- 下次复习：待安排
一句话回答
盒模型决定尺寸如何计算，Flex 适合主轴上的排列分配，Grid 适合行列协同布局；布局异常要结合尺寸约束、格式化上下文和定位参照排查。
原理解释
content-box 与 border-box
content-box 的 width 指内容宽度；border-box 的 width 包含 padding 和 border，都不含 margin。例如 width 200px、左右 padding 20px、border 1px，前者边框盒宽 242px，后者为 200px。
BFC 解决什么问题？
BFC 是独立的块级格式化上下文，可以包含内部浮动，并阻止内部与外部相应的垂直外边距折叠。display:flow-root 是明确创建 BFC 的方式。overflow:hidden 也可触发，但会带来裁剪等影响；不能说 BFC 能阻止所有内部兄弟 margin 折叠。
Flex 常问点
- 主轴由 flex-direction 决定，justify-content 沿主轴，align-items 沿交叉轴。
flex:1在浏览器中通常展开为1 1 0%，不是“固定均分所有宽度”；还受最小尺寸、间距和其他项目约束。- 长文本撑破布局时，检查 flex 子项的自动最小尺寸，常需设置
min-width:0；纵向可滚动区域常需min-height:0。
css
.layout { display: flex; min-height: 100dvh; }
.sidebar { flex: 0 0 240px; }
.content { flex: 1; min-width: 0; }
.center { display: flex; align-items: center; justify-content: center; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }场景与边界
absolute 通常参照最近的非 static 定位祖先，但 transform 等属性也会建立包含块。sticky 需要设置对应方向的 inset，如 top，并受滚动祖先和容器范围限制。z-index 要结合层叠上下文理解，子元素不能单靠更大数字逃出祖先层级。
项目中的应用
结合 Blog 的目录布局 练习解释桌面 sticky、移动端折叠以及不同宽度下的布局约束；具体 CSS 需沿源码验证。
常见追问
- 如何居中？ 父元素 Flex 双轴居中；绝对定位配合 50% 和 translate 也可以，但需要定位上下文。
- 响应式怎么做？ 先用弹性尺寸与合理上下限，再按内容断点使用媒体查询，避免只按某款设备适配。
- margin 折叠何时出现？ 正常块布局中某些垂直 margin 会折叠；Flex/Grid 子项之间不按这种规则折叠。