写在最前

我们都是前端工程师，无论你现在是页面仔，还是 Node 服务开发者，抑或是全端大神，毋庸置疑的是，我们都是前端工程师，我们生来就对追求页面的极致拥有敏锐的触觉，无论是页面实现方式的高大上、页面的极致的性能还是页面完美的展现，都是我们孜孜不倦的追求目标。即使这些在别人眼里，只是跟其他的页面一样没什么不同，但我们却能为其中那只有我们才知道的一抹别致而窃喜。

而今天我要讲的，就是我们最熟悉的老朋友，CSS。不讲枯燥的语法，抛开 js，让我们一起来看业务中那别致的纯 CSS 实现，让我们一起来追求那更好的页面实现，希望我带着你走完这段旅程后，你能收获一些惊喜甚至灵感。

WHY，为什么

“ 我有很多事要做诶，忙都忙不过来，难道我要在这 CSS 上面浪费很多时间？”

不，不，不，我们要做的事情，当然不会只是满足技术的追求，而是会有实质的好处的！

我的观点如下：

1. CSS 跟 UI 结合更加紧密；
2. 用 CSS 来实现，能减少 JS 计算，减少样式修改，减少重绘，提升渲染效率；
3. 用 CSS 实现的，是一种模块化，更符合 Web Components 组件化思想，shadow DOM 不就是致力于这么做么；
4. 咱最爱的，逼格更高~

WHEN，何时

“ 我懂了，看起来是有那么点意思，可是我什么时候能用 CSS 来做大事啊？”

在我看来：

1. 实现的对象是非交互性 UI；
2. 这么做不会给你带来过量的 DOM。要知道最不能忍受的，就是臃肿的页面；
3. 这么做能完美实现 UI、能覆盖所有场景，否则设计跟产品不服。

什么是非交互性 UI，就是不会在用户触发了某种行为时，哗啦啦来个闪瞎眼的交互，吓得用户直接高潮，而是从页面渲染后，就一直在那里，那么安静，那么美的女子，哦不，UI。

HOW，该怎么做

“ 可是我还是不懂该如何做才能这么有逼格”

我个人的见解：

1. 布局之美，理解透盒子模型，熟悉各种布局，不要忘了这是咱的根本；
2. 自适应之美，放心交给浏览器去做，我们要做的，是思考规则；
3. Magic，新技术及小技巧，总能在某一刹那给你最需要的援助；
4. 前人之鉴，坑王之王，你已经身经百战了，还怕什么。

这些就是我总结出你要用 CSS 来实现一个别人想不到的东西时，应该具有素质。最重要的还是思考，因为没有一个东西是绝对最好的，我们总在前进。

下面就以两个手机 QQ 实际业务的例子，带领大家感受一下 CSS 的魅力。

一、手 Q 吃喝玩乐   好友去哪儿九宫格图

下图是手 Q 吃喝玩乐   好友去哪儿九宫格图的图示：

从上图我们可以分析出如下需求：

• 图片大小自适应；
• 图片个数不同时，图片按照指定方式排列；
• 图片相邻处有 1px 空白间隙。

我们以最复杂的 6 图布局为例，一步一步来看如何以纯 CSS 实现。

float 布局

最容易想到的，也是最简单的方案，就是 float 布局：

• 图片大小自适应：宽度百分比，高度使用 padding-top 百分比
• 图片个数不同时，图片按照指定方式排列：使用 nth-child 伪类指定不同情况下的元素大小
• 图片相邻处有 1px 空白间隙：使用 border-box + border 模拟边框

这里父元素的高度未知，height 使用百分比行不通，而 padding 的百分比值是依据父元素的宽度来计算的，我们可以使用 padding-top 撑开高度。

让我们一瞅伪码，猛击我看 demo