系列文章目录《JavaScript 基础与进阶笔记》前期偏基础巩固与常见面试点后续进入闭包、异步、工程化等进阶主题第 01 篇数据类型与类型判断第 02 篇变量声明与作用域第 03 篇闭包与高阶函数第 04 篇函数工厂第 05 篇this 指向与绑定第 06 篇原型与原型链第 07 篇类与继承第 08 篇JS 执行机制与异步队列第 09 篇数组常用方法第 10 篇字符串算法第 11 篇常见手写题合集上第 12 篇常见手写题合集下第 13 篇Promise 与 async/await第 14 篇数据结构基础第 15 篇垃圾回收与内存第 16 篇DOM 基础全面解析第 17 篇DOM 性能与渲染第 18 篇DOM 交互补充第 19 篇DOM 实战案例第 20 篇CSS 布局与可视化高频本文文章目录系列文章目录前言一、居中方案1.1 方案对照1.2 常用代码二、BFC块级格式化上下文2.1 是什么2.2 如何触发三、Flex 布局一维3.1 主轴与交叉轴3.2 flex 简写面试高频四、Grid 布局二维4.1 与 Flex 分工4.2 grid-template-areas页面布局4.3 响应式网格五、布局选型口诀六、易混淆点归纳七、思考与练习总结前言DOM 阶段结束后页面「长什么样、怎么排」交给CSS 布局。面试与日常开发最高频的几块居中、BFC、Flex、Grid。本篇按「居中 → BFC → Flex/Grid → 选型」展开每个都给出最小 CSS 与易混点移动端viewport、rem等放在下一篇。一、居中方案1.1 方案对照方案适用要点Flex容器内水平垂直justify-contentalign-items: centerGrid同上写法更短place-items: center绝对定位 transform已知/未知尺寸脱离文档流top/left: 50%translate(-50%, -50%)绝对定位 margin auto子元素有明确宽高inset: 0; margin: automargin: 0 auto块级水平居中需固定 widthtext-align: center行内/文本水平不能垂直居中块级1.2 常用代码/* Flex — 最常用 */.flex-center{display:flex;justify-content:center;align-items:center;min-height:200px;}/* Grid — 最简 */.grid-center{display:grid;place-items:center;min-height:200px;}/* 绝对定位 transform — 弹窗常用 */.modal-wrap{position:relative;min-height:100vh;}.modal{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}/* margin: 0 auto — 仅水平 */.box{width:400px;margin:0 auto;}注意translate的-50%相对自身宽高place-items对齐的是grid 单元格内的项不是justify-content那套 flex 主轴语义。二、BFC块级格式化上下文2.1 是什么BFC是一块独立布局区域内部块级盒垂直排列与外部布局隔离常用于解决清除浮动父元素高度包含浮动子元素阻止 margin 折叠把其中一个盒子包进新 BFC自适应两栏左 float 右 BFC右侧不与 float 重叠2.2 如何触发方式说明display: flow-root推荐专为创建 BFC无副作用overflow: hidden/auto常用但可能裁剪溢出float/ 绝对定位元素自身成 BFCdisplay: flex/grid容器成 BFC/* 清除浮动 — 高度塌陷 */.clearfix{display:flow-root;}/* 防止与外部 margin 合并 */.section{display:flow-root;}.section .box{margin-top:24px;}/* 两栏左浮动 右 BFC现代可用 Flex/Grid 替代 */.layout{display:flow-root;}.layout .aside{float:left;width:200px;}.layout .main{overflow:hidden;/* 触发 BFC不与 float 重叠 */}面试口述margin 折叠发生在同一 BFC内相邻块级盒不同 BFC之间不合并。父元素包不住浮动是因为没形成 BFCflow-root让父高度计入浮动子元素。三、Flex 布局一维3.1 主轴与交叉轴flex-direction: row默认主轴水平交叉轴垂直。justify-content主轴对齐flex-start/center/space-between…。align-items交叉轴对齐。flex-wrap: wrap换行。3.2flex简写面试高频flex: grow shrink basis写法含义flex: 1通常等价1 1 0%平分剩余空间basis 为 0flex: auto1 1 auto受内容尺寸影响flex: none0 0 auto不伸缩flex: 0 0 200px固定 200px 宽/高/* 三栏左右固定中间自适应 */.page{display:flex;gap:16px;min-height:100vh;}.sidebar{flex:0 0 200px;}.main{flex:1;}/* 自适应卡片行 */.cards{display:flex;flex-wrap:wrap;gap:12px;}.card{flex:1 1 280px;}易混flex: 1不是1 1 auto要等分列且忽略内容初始宽basis 才是0%。flex-shrink: 0可防止被压扁。四、Grid 布局二维4.1 与 Flex 分工FlexGrid维度一维一行或一列二维行列场景导航、工具栏、等分条页面骨架、仪表盘、卡片网格4.2grid-template-areas页面布局.app{display:grid;grid-template-columns:240px 1fr;grid-template-rows:64px 1fr 48px;grid-template-areas:header headersidebar mainfooter footer;gap:8px;min-height:100vh;}.header{grid-area:header;}.sidebar{grid-area:sidebar;}.main{grid-area:main;}.footer{grid-area:footer;}4.3 响应式网格.auto-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;}auto-fitminmax(280px, 1fr)列宽至少 280px空间够则自动增减列数常用于商品卡片、相册。fr按比例分配剩余轨道空间1fr 1fr两列等分内容极大时会被minmax撑开。五、布局选型口诀需求优先单行导航、左右分布Flexjustify-content: space-between垂直水平居中Flex或Gridplace-items整页 Header/Sidebar/MainGridtemplate-areas响应式卡片墙Gridauto-fit/minmax或 Flexwrap清除浮动、margin 合并BFCflow-root两栏左固定右自适应Flex/Grid现代传统float BFC六、易混淆点归纳margin: 0 auto不能垂直居中要有width。BFC解决的是布局隔离不是「万能清除浮动 class」的玄学。flex: 1的basis 常为 0%与flex: auto不同。Grid 管二维Flex 管一维可 Grid 分大块块内再 Flex。gap替代子项margin更干净Flex/Grid 均支持。place-itemsGrid≠place-content居中子项用place-items: center。七、思考与练习1.块级元素水平居中最少需要什么 CSS解析固定widthmargin: 0 auto或父级Flex/Grid居中。2.两个相邻div的margin-top/bottom都是 20px间距是多少解析20pxmargin 折叠同一 BFC 内垂直相邻块级盒取较大值。3.flex: 1与flex: 1 1 auto在子项内容很宽时有何差别解析flex: 1basis 0更易均分剩余空间autobasis会先按内容宽度再伸缩。4.实现「侧边栏 240px 主区域占满剩余」现代首选解析Flexsidebar: 0 0 240px; main: flex:1或Grid240px 1fr。5.repeat(auto-fit, minmax(250px, 1fr))做什么解析列最小 250px容器变宽时自动增加列数卡片网格响应式。总结居中业务优先Flex/Grid弹窗可用absolute transform。BFCflow-root清浮动、防 margin 合并、与 float 分栏。Flex一维flex: 1与basis是面试常问。Grid二维template-areas搭页面auto-fit/minmax做响应式网格。下一篇讲移动端与 viewportrem/vw、safe-area、1px 与高清图等。