容器长宽比，这个话题在站上也有相关的文章介绍，最早出现于Responsive Web Design中，主要用来处理img、iframe、video和object这些元素的自适应问题。简单点讲，就是根据容器的宽度，按照宽高比例自动计算出容器的大小。并且让图片，视频之类能自适应容器。另外记得在知乎上有一个问题“移动端布局，div按比例布局，宽度为百分比，但又想让高度和宽度一样，即让div为正方形，怎么做布局呢？”，其实解决方案在前面的教程已提到过。既然有相应的解决方案，继续花时间来说，是不是有点多余。那么这个问题又回到了CSS的根源上：在Web中，使用CSS解决问题，往往不只有一种方案，只有更适合的方案。这两天看到@Chris Coyier特意也整理了一篇《Aspect Ratio Boxes》文章，里面有新的方案值得我们思考，特别是CSS自定义属性的部分。那我们再次花时间将相关方案整理在一起，仅供学习与参考。

今天聊的内容是淘宝虚拟互动实验室的@渚薰大神 在2017年06月在北京GMTC大会上分享的一个主题。未能亲临听到相关的精彩分享，但还算是有幸的，在内部听到@渚薰大神 的分享。个人对Web动画这方面的课程非常的感兴趣，而且现在和团队一直在致力于手淘互动动效相关的研究。经历了从Gif、视频到CSS Animation的零至一的过程，并且致力于JavaScript驱动的动效开发，以及现在致力于研究的数据化驱动的动效。这样的一个过程是幸福的，而且也是具有挑战力的。我想很多喜欢动画的同学也对这样的一个课程会感兴趣，所以接下来，我们根据@渚薰大神分享的PPT的思路来聊聊渐进式动画解决方案。

Web存储机制，在这里主要聊有关于Web Storage API提供的存储机制，通过该机制，浏览器可以安全地存储键值对，比使用cookie更加直观。接下来简单的了解如何使用这方面的技术。

CSS Grid Layout是W3C规范中专门为Web布局提供的一个特性。CSS Grid Layout将改变传统的布局模式，他将让布局从一维布局变成了二维布局。简单的说，有了CSS Grid Layout之后，布局不再局限于单个维度了。这个时候你要实现类似九宫格，拼图之类的布局效果显得格外的容易。虽然CSS Grid Layout给Web布局带了革命性的变化，那么他在原生客户端（也就是APP）开发中，其运用是否也能像Web一样呢？接下来我们就一起来探讨。

今天看到@Dennis Gaebel分享的一篇博文。觉得很有意思。同时感觉老外分享出来的东西就是不一样，尽管自己也专门整整CSS，但从新特性的发掘和敏锐性就差十万八千里。不吐槽了，还是回到正题来吧。

最近在看Canvas的一些动画实例当中，时常看到lerp()这个函数，一直以来并不知道这个函数起什么作用，有什么特性。今天花了一些时间，Google了一下，才知道这个函数是线性插值。那么线性插值是个什么鬼？他在一些程序中又起啥作用？这就是这篇文章要探讨和学习的。

通过前面的Canvas学习，了解到在Canvas中绘制图形时，使用strokeStyle和fillStyle来设置绘制图形的边框颜色和填充颜色。前面的教程我们看到的都是给这两个属性设置具体的颜色值，比如#fff、red之类。其实在Canvas中，除了给strokeStyle和fillStyle设置颜色之外，还可以设置渐变色。今天我们要学习的就是Canvas中的渐变知识。

在Web的布局设计中时常会碰到全屏的效果，而且很多时候会碰到在限制宽度的容器中实现全屏效果。到写这篇文章的这个时候，前端有关于布局方面的技术又得到了新的突破，比如CSS Grid布局方案，到现在已经得到了主流的浏览器支持。在这里提到CSS Grid布局方案，其实就是想说一点，通过现在的CSS Grid布局效果，也可以实现在限宽容器中实现全屏布局效果。这也是接下来要介绍的内容。

Web发展到现在，已经有很大的变化，特别在当前这样的时代，我们面对的设备种类繁多。言外之意，这样的环境之下，Web的页面布局时常会碰到一些缩放比例的控制，特别是针对img、iframe、object、video和embed等元素的比例缩放。当然，就img元素而言，要实现纵横比例的布局已有多种方案，而且实战性也特别的强，并且在Responsive设计中已使用广泛。

上一节中学习了Canvas的图像合成，通过图像合成的技术可以轻易的实现类似于刮刮卡的效果，其实除了实现刮刮卡的效果之外，还可以使用这种技术制作类似于探照灯的效果。