做前端这些年几乎每个项目都要和CSS网页布局正面硬碰。刚开始接触那会儿我单纯以为布局就是把元素一个接一个往下摆直到第一次对着设计稿光是一个logo怎么垂直居中就能耗掉一下午才发现这块水到底有多深。后来带过不少人发现大家踩的坑都出奇一致不是不会写某个属性而是没有一个清晰的布局知识框架只知道这样写能出来却不知道为什么能出来、什么时候会失效。这篇文章是我多年实际开发经验的沉淀适合准备入门前端、正在啃CSS布局、或者工作里经常被为什么又塌了折磨的同学。读的时候建议打开编辑器跟着敲很多布局问题光看不练是永远记不住的。1. 布局的地基盒子模型与文档流先搞懂这两个再谈怎么排1.1 盒子模型为什么div的宽高总是算不准排第一个要讲的一定是盒子模型因为CSS布局里百分之八十的尺寸怎么不对到最后都归到了这里。一个元素在页面上实际占据的宽度并不是width写上多少就占多少而是由content、padding、border和margin共同决定的。这套规则听起来简单但实际写起来特别容易算错。标准盒模型也就是浏览器默认的content-box下width只管内容区的宽度padding和border都要额外加上去。举个实际例子你写一个div样式是width: 200px; padding: 20px; border: 1px solid #ccc;。在content-box模式下这个div真实渲染出来的占用宽度是200加两个20加两个1也就是242px。如果你在某个页面里给多个元素都加了padding又没有在脑子里统一换算那最后的总宽度一定会对不上这就是很多新手做两栏布局时右边内容被挤到下一行的真正原因。我自己写项目的习惯是开局先放一段全局重置* { margin: 0; padding: 0; box-sizing: border-box; }把border-box设为默认之后width写多少最终就是多少padding和border都往里面挤布局一下子变成简单的加减法。border-box的含义是你设定的宽度包含padding和border内容区自动缩水。这也是现在主流UI框架像Bootstrap之后的版本默认采用的方式。有人会担心通配选择器对性能有影响客观说它在渲染上比标签选择器多一点点解析成本但在普通业务项目里实测完全无感不用过度纠结。除了盒子模型本身还要提一句margin的叠加规则。兄弟元素之间两个margin不会相加而是取较大的那个值。比如上面一个元素margin-bottom: 30px下面一个元素margin-top: 20px它们之间实际间距是30px而不是50px。这类以为相加其实是取大的问题在布局里也很容易让人摸不着头脑后面我会专门讲怎么处理。1.2 文档流、浮动与清除浮动前辈们踩出来的坑布局的另一个地基是文档流。默认情况下块级元素从上往下堆叠行内元素从左往右排布这个被称为普通文档流。早年做多栏布局前端最顺手的一个工具就是浮动float让元素像文字里的图片一样被推到左边或右边后面的内容紧贴着环绕。听起来很美代价也很大浮动元素一旦设置就会部分脱离文档流父容器会认为它不存在了于是高度直接塌掉。举一个特别典型的场景父div里放两个子div都设置float: left你期望父div高度被撑起来、背景色包住两个子元素。实际效果是父div高度变成0背景色根本看不到。这就是让无数新人崩溃的浮动塌陷。前辈们的解决方案是清除浮动最经典的是给父元素加一个clearfix类.clearfix::after { content: ; display: table; clear: both; }这个写法的原理是在父元素内部末尾生成一个空块级元素并让它clear: both禁止左右两边存在浮动元素于是它被推到所有浮动子元素的下方父元素也就被撑开了。还有人会用overflow: hidden给父元素加一下同样能解决原理是触发了BFC块级格式化上下文让容器把浮动子元素的高度也算进来。坦白说如果今天还在做新项目我强烈建议别再用浮动搭主布局了。浮动留给你的是一套需要不停善后的规则而后面要讲的Flexbox和Grid已经把这件事做得干净利落。但浮动这个知识点不会完全退出历史舞台——处理文字环绕图片的需求时浮动依然是最合适的方案所以理解它的原理仍然有必要。2. 布局方案怎么选Flex、Grid和定位各管哪一段2.1 Flexbox一维排列和垂直居中用它最省心Flexbox弹性盒布局是我在新项目里使用频率最高的方案它就是为在一条线上排列元素设计的。只要是把几个元素横向排开或者纵向排开而不是复杂的二维网格flex都是最直觉的选择。基本用法很简单父元素加display: flex子元素自动变成flex item沿主轴排列。默认主轴是水平方向也就是从左到右排。父元素上用两个核心属性控制对齐justify-content管主轴方向的对齐方式align-items管交叉轴方向的对齐方式。记住这个对应关系就掌握了flex的一半。新手最容易困惑的是flex这个简写属性。它其实是flex-grow、flex-shrink和flex-basis三个属性的合并写法。flex-grow表示空间富余时按什么比例放大flex-shrink表示空间不足时按什么比例缩小flex-basis相当于这个元素在主轴线上的基础尺寸。最常用的是flex: 1它的完整写法是flex: 1 1 0%表示等分剩余空间、可以缩小、基础尺寸从0开始算。我平时做导航栏或者卡片列表只要想让一组元素均分宽度就直接写flex: 1然后让外层换行即可。再分享一个高频场景——垂直水平居中。这个需求以前折磨了无数人现在用flex只需要三行.parent { display: flex; justify-content: center; align-items: center; }不管子元素宽高是多少都会老老实实待在父元素正中央。相比早年的absolute加margin套路这套方案简单得多也基本不会出问题。flex的另一个好用细节是margin: auto。在flex容器里给某个子元素设置margin-left: auto它会被推到最右边这比手写justify-content的分组方案灵活不少。2.2 Grid二维布局整页骨架级别的神器Grid网格布局比flex更重一些它把容器划分成行和列然后往格子里放内容天然适合二维布局。判断标准很简单如果你需要同时控制横向和纵向的排列比如搭一个整页三栏结构、做一个卡片矩阵Grid是最省力的选择。举个例子我要实现左侧导航、中间内容、右侧广告的经典三栏以前用浮动写半天还容易翻车用Grid就这么几行.container { display: grid; grid-template-columns: 220px 1fr 220px; gap: 16px; }grid-template-columns直接定义了每一列的宽度左侧220px固定中间1fr自动占据剩余空间右侧220px固定。gap统一控制列间距和行间距不用再一个个设margin干净利落。做整页布局时我还会用grid-template-areas给各个区域起名字可读性会好很多.page { display: grid; grid-template-areas: header header header sidebar main aside footer footer footer; grid-template-columns: 220px 1fr 220px; grid-template-rows: auto 1fr auto; } .header { grid-area: header; } .sidebar { grid-area: sidebar; } .main { grid-area: main; } .aside { grid-area: aside; } .footer { grid-area: footer; }这样页面骨架一眼就能看懂。还有一个特别推荐的响应式写法repeat(auto-fit, minmax(260px, 1fr))。意思是让一列最小260px空间足够就多排几列空间不够自动换新行非常适合做响应式卡片墙不需要写任何媒体查询就能自动适配屏幕宽度。那是不是Grid可以完全替代Flex也不是。Grid适合规划整体框架Flex更适合组件内部的对齐和排布实际项目里两者混用才是常态。一个页面的外壳用Grid搭出来里面导航栏的间距、按钮图标的对齐这些一维问题还是交给Flex更顺手。2.3 定位的正确打开方式absolute、fixed和sticky定位这套体系平时用得不算特别频繁但一旦需要覆盖某些元素、做吸顶导航、做浮层它就是唯一方案。CSS提供了五种定位方式它们的核心差异在于相对于谁定位。定位值定位参照典型场景是否脱离文档流static无默认普通文档流否relative自身原本位置微调元素、作为absolute的父参照否absolute最近的定位祖先浮层、角标是fixed视口全局导航、回到顶部是sticky滚动容器吸顶表头否特殊用absolute时最核心的纪律是父元素必须有position: relative或其他非static定位。否则它会一路向上找直到以视口为参照物位置就可能完全不是你想要的。fixed看起来是以视口为参照但如果某个祖先元素设置了transform、filter或者will-change属性情况会变复杂我下面专门讲。sticky是个很好用的折中方案元素在滚动过程中先按照文档流排布滚到指定位置后粘住类似吸顶效果。但它有个容易踩的坑sticky是相对最近的滚动容器工作的如果某个祖先设置了overflow: auto或overflow: hidden它就会粘在那个祖先里面而不是你预期的视口位置。所以做吸顶导航时要检查一下祖宗链路上有没有overflow属性。2.4 换个角度看布局transform与层叠上下文的小坑transform在布局里通常是辅助手段但它引发的层叠上下文和包含块问题我见过太多人栽跟头。先说一个经常被搜索的问题transform: rotateY(60deg) translateZ(300px) 到底是个什么效果这句话的意思是先让元素绕Y轴旋转60度再沿着当前Z轴方向平移300px。视觉效果大概就是元素先向右斜转然后往屏幕深处推了一把。为了让这个3D效果真正呈现出来父容器还得设置透视距离比如.parent { perspective: 800px; } .child { transform: rotateY(60deg) translateZ(300px); }没有perspective时rotateY的旋转会产生倾斜压缩感translateZ也基本看不出纵深。这些在做CSS 3D相册或者翻转卡片时都会用到。更重要的是布局层面的坑transform哪怕只是translate(-50%, -50%)都会让元素创建新的层叠上下文同时改变后代的包含块规则。最典型的案例是一个position: fixed的回到顶部按钮突然不跟着视口走了而是停在了某个div内部。一查十有八九是那个div加了transform。原理就是fixed元素现在以transform祖先为包含块不再相对视口定位。遇到这种问题先检查祖先们有没有transform、filter、opacity小于1、will-change这些属性。3. 实战拆解居中、多栏、响应式布局我这样写3.1 水平垂直居中的六种方案按场景选而不是硬背居中大概是CSS里被问得最多的问题。原因很简单方案太多反而不知道用哪个。我按实际场景整理了六种大家可以直接对号入座。方案代码要点适用场景注意点Flex父元素 display:flex; justify-content:center; align-items:center块级盒子、未知宽高、组件内部不兼容老IEGrid父元素 display:grid; place-items:center同时还要做其他网格排布与flex二选一即可绝对定位margin子元素 absolute; left/top/right/bottom:0; margin:auto子元素有固定宽高必须设宽高绝对定位transform子元素 absolute; left:50%; top:50%; transform:translate(-50%,-50%)未知宽高父元素需relativeline-height父元素 height:40px; line-height:40px单行文本垂直居中多行文本会出问题文本水平居中text-align:center行内元素或文本对块级元素无效我个人推荐优先用Flex或者Grid它们对未知宽高最友好。早年流行的absolute加margin方案也不是不能用只是要求子元素必须有明确宽高我一般只在做弹窗遮罩这类场景才碰。绝对定位加transform适合子元素宽高不确定的居中但它同样改变层叠上下文前面提过需要留意。还要专门提醒一点text-align: center只能让行内元素居中对块级元素本身无效margin: 0 auto也只能让设置了宽度的块级元素水平居中。这两个都是新手最常用的写法出错率极高。如果你发现居中不生效先回过头看元素的display类型再对照上面的表格找方案。3.2 两栏和三栏布局从经典圣杯到Grid一行代码多栏布局曾经是CSS最折腾人的地方圣杯布局和双飞翼布局就是那个时代的产物。它们的核心诉求是中间的main内容要在HTML里优先出现有利于内容尽早渲染和SEO两侧的栏再通过负margin等手段拉到正确位置。做是可以做但理解成本很高我当年学的时候绕了很久。现在用Flex做两栏布局逻辑清晰到不行。左侧固定右侧自适应.aside { width: 220px; flex-shrink: 0; } .main { flex: 1; min-width: 0; }这里flex-shrink: 0很关键它保证左侧栏不会因为空间不足而被压缩右边flex: 1自动占满剩余空间。min-width: 0也值得说因为flex子项默认的min-width是auto如果内容特别长右侧会被撑开导致整体溢出设置成0后让子项可以正常收缩。用Grid做三栏就更简单了前面已经给过代码。我还常用12列栅格来做内容骨架.grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; } .col-4 { grid-column: span 4; } .col-8 { grid-column: span 8; }这个模式几乎就是Bootstrap栅格的最小实现。做内容管理系统后台、营销页的时候我会直接在项目里写一套类似的工具类需要几格就写几格比引整个框架灵活得多。3.3 响应式布局媒体查询、断点设计和弹性细节做响应式布局第一件事是确认页面有没有加viewport标签meta nameviewport contentwidthdevice-width, initial-scale1.0没有它手机浏览器会默认按桌面宽度980px渲染页面然后缩小给你看你做的一切媒体查询都会乱套。这是移动端适配的第一步很多同学漏掉之后排查半天。接下来就是断点设计。我自己的写法是移动优先也就是先写手机端的样式再用min-width从小往大覆盖/* 默认样式手机端 */ .card { display: block; } /* 宽度大于等于768px时平板竖屏 */ media (min-width: 768px) { .card { display: flex; } } /* 宽度大于等于1200px时桌面 */ media (min-width: 1200px) { .card { display: grid; grid-template-columns: 2fr 1fr; } }用min-width的好处是符合从小到大渐进增强的思路写起来自然不用想桌面样式会不会影响到手机端。断点的数值不要死记硬背某个框架的档位应该根据你的内容来定发现布局乱了就把断点设在那个临界宽度上。用max-width做桌面优先也不是不行只是注意两个方向别混用否则中途改起来很痛苦。响应式布局里还有几个容易忽视的细节。图片一定要给max-width: 100%配合height: auto让图片等比例缩放。字号如果是固定px在手机端会显得过大可以给html根元素设置font-size然后正文用rem或者直接使用clamp()这类相对单位。容器宽度建议用width: min(100%, 1200px)而不是死写max-width前者语义更明确而且居中配合margin: 0 auto依然有效。4. 布局问题排查那些让我熬过夜的坑4.1 外边距折叠、高度塌陷与BFC先说外边距折叠。前面提到兄弟元素的外边距是取大者更隐蔽的是父子边距折叠父div的上边距和第一个子div的上边距会发生重叠结果整个父div带着子div一起往下移动哪怕你只给子div设了margin-top。这个现象让很多人百思不得其解以为自己的margin没生效。解决办法有几个。最简单的是给父元素加padding-top或者border-top任何一个隔层都能阻断折叠。但最优雅的是给父元素设置display: flow-root它会创建BFC并且没有任何副作用。BFC块级格式化上下文可以理解成一个独立的布局容器容器内部的元素排列不会影响外部外部的东西也传不进去。创建BFC的方式有很多overflow不为visible、float、绝对定位、inline-block、flex和grid容器、display: flow-root都行。高度塌陷的本质也是BFC浮动子元素或者脱离文档流的元素不参与父容器高度计算。解决办法依然是让父元素成为BFC。不过注意用overflow: hidden虽然触发BFC但如果你有子元素需要溢出显示比如下拉菜单、气泡提示它会把内容裁掉。所以我现在的首选是display: flow-root老代码里用clearfix也行。4.2 高频视觉问题速查图片空隙、文字溢出和特效坑下面这组问题是评论区和我自己带新人时出现频率最高的。我给整理成了一张速查表遇到直接对照。现象原因解决方案图片底部多出一截空白图片默认按文字基线对齐给img设置 display:block 或 vertical-align:middle长英文单词把容器撑破默认不换行word-break: break-word; overflow-wrap: anywhereflex子项被压缩变形min-width默认为auto设 min-width: 0 或 flex-shrink: 0单行文本不省略号没写全三件套white-space:nowrap; overflow:hidden; text-overflow:ellipsis多行文本省略号不生效需要WebKit内核支持用display:-webkit-box配合-webkit-line-clampmargin不生效父子外边距折叠父元素建立BFC建议display:flow-rootfixed导航脱离视口祖先有transform/filter去掉祖先的transform或调整结构字体渐变是这些年比较常见的效果做法其实很巧妙把文字颜色设为透明再用background-clip: text把背景裁剪到文字范围内。示例.gradient-text { background: linear-gradient(90deg, #6a11cb, #2575fc); -webkit-background-clip: text; color: transparent; }背景裁剪到文字形状再让文字本身透明渐变就透了上来。注意background-clip的兼容性写作最好加上-webkit-前缀。类似地鼠标移入效果就是hover伪类加transition过渡但transition要写在原始状态而不是hover状态下否则移出时会瞬间回到原样这也是个很常见的疏漏。4.3 兼容性修复思路IE11样式失效的排查流程虽然现在新项目基本可以放弃IE了但公司老系统里IE11还是阴魂不散。遇到CSS样式失效这种问题不要慌按下面几条来查。先看是不是没补前缀。IE11对Grid的支持是-ms-grid老代码里很多用的是这种前缀写法flex的有些属性它也只认旧语法比如flex: 1在IE11里可能完全不生效要写成-ms-flex: 1 1 0%。如果你在用PostCSS和Autoprefixer一般会自动补全但要确认Browserslist配置里有没有加ie 11。再看是不是用了它不支持的属性和选择器。position: sticky在IE全系不支持CSS变量var()不支持calc()支持但要求运算符两边必须有空格:not()、:nth-child等选择器部分用法不支持。还有object-fit图片裁剪、gap在flex里的间距也不支持。重构时最稳的办法是页面结构上先保证基本可读然后把视觉增强功能用现代写法实现IE里只是不好看但不至于坏这叫渐进增强。调试方面我比较依赖开发者工具。在Elements面板里选中元素右边Computed标签能直接看到盒模型四层结构谁把宽度撑大了立刻清楚。排查布局乱掉时我给元素临时加上outline: 1px solid red注意不是borderoutline不影响布局或者加半透明背景色一眼就能看出每个元素的真实占位范围。在团队项目里我偶尔会写一个.debug类一键给所有元素描边做完布局再删掉效率提升不是一点半点。另外样式引入方式也会影响布局效果。外部样式表建议放在head里用link引入行内style优先级过高不好覆盖在CSS里写样式时注意选择器优先级同样权重的情况下后写的生效。遇到保存了样式但页面没变化先看是不是缓存再看选择器权重最后看有没有别的样式把属性覆盖了。最后分享一个我自己的排查顺序尺寸不准先查盒模型位置不对先查定位参照高度塌了先查浮动和BFC样式没生效先查优先级和引入方式。照着这个顺序走大部分布局问题都能在几分钟内定位。CSS布局学到后面难点不是记语法而是建立看到需求就条件反射到对应方案的直觉。多动手做几个整页布局把居中、多栏、响应式这几套练成肌肉记忆以后再拿到设计稿心里自然就有谱了。