开发每一张网页都离不开布局排版，基于良好布局排版打下基础，才能使后续的开发更顺利。当然不能停留在IExplorer时代那种局限思维上，没办法解决的布局排版都用JS实现。今时不同往日，现代CSS属性能更好地快速实现各种布局排版，节约更多时间去摸鱼。
不过按照笔者目前了解的情况来看，大部分同学即使在无需兼容IExplorer的情况下还是遵循CSS+JS的方式完成一些常见或特殊的布局排版。从HTML/CSS/JS前端三剑客的定位来看，HTML映射网页的「结构」，CSS映射网页的「表现」，JS映射网页的「行为」。
「布局排版」指将图形、文本、图像、媒体等可视化信息元素在页面布局上调整位置、尺寸等属性使页面布局变得条理化的过程。大部分同学认为布局排版就是几个合理的CSS属性随便拼凑在一起，但多数情况即使实现也会存在瑕疵，此时就可能使用JS介入。
从布局排版的特征可知它属于表现范畴，因此笔者认为大部分布局排版都能使用纯CSS完成，无需JS介入。
本文秉承「能使用CSS实现的效果都优先使用CSS」的原则，为大家讲解笔者如何巧妙运用各种纯CSS开发技巧完成一些常见或特殊的布局排版。因此笔者建议大家认真看一遍以下内容，绝对让你有所收货和惊喜。
属性
在进入主题前，笔者总结出布局排版一些必备属性，这些属性能快速搭建整体效果，再通过一些常用选择器加以修饰达到完美效果。看似简单，但使用起来不一定完全驾驭。
必备属性都是一些几何属性，主要用于声明位置和尺寸。
选择器因CSS模块众多而派生出的数量也众多，若无特别方式记熟这些选择器对应的功能，也很难将其发挥到最大作用。
笔者根据选择器的功能划分出八大类，每个类别的选择器都能在一个应用场景里互相组合，记熟这些类别的选择器，相信就能将选择器发挥到最大作用，也能游刃有余将其应用到一些常见或特殊的布局排版里。
布局排版可能只应用到某些选择器，但也不妨碍大家通过以下归类方式记忆。选择器作为CSS的重要组成部分，比起属性组合会有更多的玩法。
技巧
有了上述前置知识，接下来跟着笔者体验一次如何巧妙运用各种纯CSS开发技巧完成一些常见或特殊的布局排版吧。为了方便浏览器自动计算某些样式，需全局设置box-sizing:border-box，编码前请引入笔者整理的reset.css。
主体布局
「主体布局」指在大部分情况下通用且具备统一特征的占位布局。掌握主体布局是一个前端必不可少的技能，养成看设计图就能大概规划出整体布局的前提是必须熟悉这些主体布局的特点与构造。
三列布局
经典的「三列布局」由左中右三列组成，其特点为连续两列宽度固定、剩余一列宽度自适应和三列高度固定且相等。以下以左中列宽度固定和右列宽度自适应为例，反之同理。整体的实现原理与上述两列布局一致。
圣杯布局/双飞翼布局
经典的「圣杯布局」和「双飞翼布局」都是由左中右三列组成，其特点为左右两列宽度固定、中间一列宽度自适应和三列高度固定且相等。其实也是上述两列布局和三列布局的变体，整体的实现原理与上述N列布局一致，可能就是一些细节需注意。
圣杯布局和双飞翼布局在大体相同下也存在一点不同，区别在于双飞翼布局中间列需插入一个子节点。在常规实现方式里也是在这个中间列里做文章，如何使中间列内容不被左右列遮挡。
横向布局
「横向布局」指容器内节点以水平方向排列且溢出部分被隐藏的占位布局。竖向布局很常见，声明overflow:hidden;width:xpx;height:ypx就能实现，但横向布局却不能使用类似方式实现。
为了方便使用多种方式实现横向布局，以下将通用代码拆分出来。
凸显布局
「凸显布局」指容器内节点以同一方向排列且存在一个节点在某个方向上较突出的占位布局。该布局描述起来可能比较拗口，直接看以下效果吧，这是一个横向列表，节点从左往右排列，最右边的节点特别突出。这就是凸显布局的特征，凸显的节点可在凸显布局任意位置，上下左右，左上左下右上右下都行。
间距布局
「间距布局」指容器内节点从左往右从上往下排列且以特定间距间隔的占位布局。间距布局常见于各大列表，是笔者认为最重要的布局之一。为何如此简单的布局还是花费一些篇幅讲解呢？最近笔者查看了Github上很多与间隔布局相关的CSS代码，虽然整体效果看上去无大碍，但margin/padding和结构选择器却乱用，因此笔者想从零到一纠正间距布局的正确编码方式。
在进入编码环节前，笔者想重点讲解:nth-child()的点睛之笔。大部分同学可能只认得:nth-child(n)、:nth-child(2n-1)、:nth-child(2n)和:nth-child(xn)的日常用法，但其实还有一些你可能未见过的用法。在此笔者借这次机会将:nth-child()所有用法总结下，n/x/y代表正整数，最小值为1。
空载布局
「空载布局」指容器内无任何节点时使用其他形式代替的占位布局。还有使用JS判断列表集合为空时显示占位符吗？相信很多使用MVVM框架开发的同学都会使用条件判断的方式渲染虚拟DOM，若列表长度不为0则渲染列表，否则渲染占位符。
多格布局
「多格布局」指容器内节点以动态数量的格子形式排列的占位布局。微信朋友圈的相册就是最常见的多格布局了，当单张照片排列、两张照片排列、三张照片排列等等，每种情况下照片的尺寸都可能不一致。笔者制作了一个动态多格相册怀念我家狗狗「AB」。大家感受下纯CSS实现动态数量的多格布局吧。
在此留个悬念，不讲解如何实现，看看大家能不能根据笔者列出的提示尝试将该效果复原。主要原理是根据结构选择器限制节点范围实现，在本文也可找到原理的答案喔！
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、微信小程序定制开发、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）等一系列互联网应用服务。
公安局备案号：
专属顾问
