写在最前

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

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

WHEN，何时

在我看来：

1. 实现的对象是非交互性 UI；

2. 这么做不会给你带来过量的 DOM。要知道最不能忍受的，就是臃肿的页面；

3. 这么做能完美实现 UI、能覆盖所有场景，否则设计跟产品不服。

HOW，该怎么做

我个人的见解：

1. 布局之美，理解透盒子模型，熟悉各种布局，不要忘了这是咱的根本；

2. 自适应之美，放心交给浏览器去做，我们要做的，是思考规则；

3. Magic，新技术及小技巧，总能在某一刹那给你最需要的援助；

4. 前人之鉴，坑王之王，你已经身经百战了，还怕什么。

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

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

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

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




实际效果并不理想，如下图：

还有谁？flex！flex 布局有以下重要特性：

• 这里面的子元素同一水平、垂直方向展示对我们很有帮助，它使我们更容易控制子元素的排列，而不会错位。

上面一块包含左侧 1 个 2/3 的大块，右侧 2 个 1/3 的小块，下面一块则是 3 个 1/3 的小块。



然而我们忽略了 flex 一个重要特性，子元素会自动占满父元素剩余空间，这时子元素宽度计算受 flex 控制，下面块的 3 个子元素宽度计算并非一定是相等的，会有些许差异，此时 66.6% != 33.3% + 33.3%。

这样就解决了竖间隙错位问题，但我们依然有所担心，中间的横间隙会错位吗？我们来算一下。

整体父元素高度由子元素撑开，不确定；

左侧小块高度：左侧 flex 父元素宽度（W * 66.6%）* 50% = W * 33.3%；

依然是 66.6% 与 33.3% + 33.3% 的等式，但这次高度计算会受 flex 影响吗？

最终 66.6% === 33.3% + 33.3%









图中的 12345 便是主角进度条。分析需求如下：

• 让我们看下如何用纯 CSS 实现。

绝对定位大法




• 于是我们回归本源，遵从 CSS 世界的规则来，将点线合起来看，每个子元素包含自己的点线，从左至右排列，并使用自适应布局的方式，子元素宽度为百分比，如下图的方案：




• 灰色背景线依旧使用父元素的 after 实现；

• 每个子元素宽度一致，为平均下来的百分比值，如 25%；

• 点绝对定位在子元素右侧；

• 绿色线条在子元素内实现。

此外，最左侧只有点，没有线条，点的宽度固定，线条宽度不定，css 无法计算（忘掉表达式吧），无法隐藏线条，fail！

百分比宽度切分进化版




腾出空间方式：父元素 margin-left 出空间，子元素负 margin-left 移回原位。







百分比宽度划分究极版


flex 重要特性之一，可以指定 flex 布局下的元素如何分配空间，我们将点线元素宽度改为-webkit-box-flex:1，此时子元素就自动平均分了父元素宽度。

本文讲了笔者对前端页面开发中尽量思考多用 CSS 实现的一些见解，主观性强烈，欢迎大家的一起来探讨。

我跟你的旅程就在此结束了，但你的旅程依然在继续，若本文能给你带来启发，我就最开心不过了。

 

感谢你的阅读！