王志远，微医前端技术部
前言一篇文章的时间，让我们回到画页面的那个夏天，彻底搞懂前端页面布局。
本文期待整合布局知识网络整合最佳实现并整理样式片段（以less为例），拿走即用高频面试题梳理回答知识网络常见布局对于CSS的布局，在应用层面，分为三类，居中布局、多列布局、全屏布局；
居中分为垂直、水平和平面；多列分为两列、三列、圣杯、双飞翼；全屏分为等分、等高、全屏；image.pnggraph TBA[常见布局]--B1[居中布局]B1--五种方案--C11[水平居中]B1--五种方案--C12[垂直居中]B1--五种方案--C13[平面居中]A--B3[全屏布局]A--B2[多列布局]B2--七种方案--C21[两列右侧自适应布局]B2--四种方案--C22[三列右侧自适应布局]B2--两种方案--C23[三列中间自适应布局,圣杯-双飞翼]
每个布局类型都有他们对应的最佳实践，衡量标准主要是兼容性和组成场景，举栅格多列布局而言，移动端通用是flex新特性，而PC端则要更多的考虑兼容从而使用margin负值+盒模型inline-block技巧；
常见实现这些布局的实现有六种常用实现：盒模型、浮动、定位、flex布局、Grid布局和Shapes布局。
graphTBB4[常见实现]--C1[Float]B4--C2[盒模型]B4--C3[定位]B4--C4[Flex和grid]B4--C5[Columns和Shapes]image.png
接下来，我们以应用层面为分析主线，梳理分别的最佳实现吧！
居中布局使用复制粘贴链接：