写在最前

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

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

WHEN，何时

在我看来：

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

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

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

HOW，该怎么做

我个人的见解：

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

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

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

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

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

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

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

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

返回首页 了解更多建站资讯