我就是要用CSS实现
发布于 2016-01-16 02:13:52 | 156 次阅读 | 评论: 0 | 来源: 分享
CSS层叠样式表
CSS（层叠样式表） 即 级联样式表 。
它是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
写在最前
我们都是前端工程师，无论你现在是页面仔，还是Node服务开发者，抑或是全端大神，毋庸置疑的是，我们都是前端工程师，我们生来就对追求页面的极致拥有敏锐的触觉，无论是页面实现方式的高大上、页面的极致的性能还是页面完美的展现，都是我们孜孜不倦的追求目标。即使这些在别人眼里，只是跟其他的页面一样没什么不同，但我们却能为其中那只有我们才知道的一抹别致而窃喜。
而今天我要讲的，就是我们最熟悉的老朋友，CSS。不讲枯燥的语法，抛开js，让我们一起来看业务中那别致的纯CSS实现，让我们一起来追求那更好的页面实现，希望我带着你走完这段旅程后，你能收获一些惊喜甚至灵感。
WHY，为什么
“我有很多事要做诶，忙都忙不过来，难道我要在这CSS上面浪费很多时间？”
不，不，不，我们要做的事情，当然不会只是满足技术的追求，而是会有实质的好处的！
我的观点如下：
- CSS跟UI结合更加紧密；
- 用CSS来实现，能减少JS计算，减少样式修改，减少重绘，提升渲染效率；
- 用CSS实现的，是一种模块化，更符合Web Components组件化思想，shadow DOM不就是致力于这么做么；
- 咱最爱的，逼格更高~
WHEN，何时
“我懂了，看起来是有那么点意思，可是我什么时候能用CSS来做大事啊？”
在我看来：
- 实现的对象是非交互性UI；
- 这么做不会给你带来过量的DOM。要知道最不能忍受的，就是臃肿的页面；
- 这么做能完美实现UI、能覆盖所有场景，否则设计跟产品不服。
什么是非交互性UI，就是不会在用户触发了某种行为时，哗啦啦来个闪瞎眼的交互，吓得用户直接高潮，而是从页面渲染后，就一直在那里，那么安静，那么美的女子，哦不，UI。
HOW，该怎么做
“可是我还是不懂该如何做才能这么有逼格”
我个人的见解：
- 布局之美，理解透盒子模型，熟悉各种布局，不要忘了这是咱的根本；
- 自适应之美，放心交给浏览器去做，我们要做的，是思考规则；
- Magic，新技术及小技巧，总能在某一刹那给你最需要的援助；
- 前人之鉴，坑王之王，你已经身经百战了，还怕什么。
这些就是我总结出你要用CSS来实现一个别人想不到的东西时，应该具有素质。最重要的还是思考，因为没有一个东西是绝对最好的，我们总在前进。
下面就以两个手机QQ实际业务的例子，带领大家感受一下CSS的魅力。
一、手Q吃喝玩乐 好友去哪儿九宫格图
下图是手Q吃喝玩乐 好友去哪儿九宫格图的图示：
上面一块包含左侧1个2/3的大块，右侧2个1/3的小块，下面一块则是3个1/3的小块。
我们指定2/3的大块宽度是66.6%，1/3的小块宽度是33.3%（实际可以使用-webkit-box-flex来分配，这里为了下面的计算方便）。
来看下实际效果，你也可以
这样就解决了竖间隙错位问题，但我们依然有所担心，中间的横间隙会错位吗？我们来算一下。
整体父元素宽度确定，为W；
整体父元素高度由子元素撑开，不确定；
左侧大块高度：左侧flex父元素宽度（W * 66.6%） * 100% = W * 66.6%；
左侧小块高度：左侧flex父元素宽度（ W * 66.6%） * 50% = W * 33.3%；
右侧小块高度：右侧flex父元素宽度（ W * 33.3%） * 100% = W * 33.3%。
依然是66.6%与33.3% + 33.3%的等式，但这次高度计算会受 flex 影响吗？
不会，因为此时整体父元素的高度是不确定的，是由子元素内容撑开的，flex的高度也是由子元素来撑开的。
最终 66.6% === 33.3% + 33.3%
我们来看下伪码，
二、手Q家校群先锋教师进度条
下图是手Q家校群先锋教师进度条设计稿：
图中的12345便是主角进度条。分析需求如下：
- 线的长度不固定
- 点平均地分布在一条线上
- 点的个数不固定，可能会改变
- 激活的点之间线的颜色是绿色的
让我们看下如何用纯CSS实现。
绝对定位大法
我们看了第一眼，便想起了最受青睐的万金油 absoulte，方案图如下：
我们一看宽度是百分比设死的，这样在点的数量修改时，我们还是要改css，完。
百分比宽度划分究极版
来，心中默念3遍“要优雅不要污”，灵光一闪，flex大法好！
flex重要特性之一，可以指定 flex 布局下的元素如何分配空间，我们将点线元素宽度改为-webkit-box-flex:1，此时子元素就自动平均分了父元素宽度。
实际效果，
旅程还在继续
本文讲了笔者对前端页面开发中尽量思考多用CSS实现的一些见解，主观性强烈，欢迎大家的一起来探讨。
通过业务实践中的两个例子带领大家走了一回CSS实现旅程，还望各位观众姥爷过了瘾，如大家有一些更好的实践十分欢迎与我分享。
我跟你的旅程就在此结束了，但你的旅程依然在继续，若本文能给你带来启发，我就最开心不过了。
最后，flex大法好！
行文匆忙，如大家发现错误欢迎指正。
感谢你的阅读！