让一个元素水平居中对于CSS来说非常简单：如果是一个内联元素，我们可以在他的父元素上设置text-align:center;；如果是一个块元素，我们可以使用margin:auto;。然而，只要一想到让一个元素垂直居中，让人死的心都有了。多年来，垂直居中已成为CSS的不朽神话，也是前端专业人士群体中的一个内部笑话。

在过去的几年中，有种网页设计趋热是越来越受欢迎：这就是我所说的“自适应的背景，固定宽度的内容”。让我们思考一下这个例子中使用的margin:auto。这个margin的值等于视窗一半的宽度减去页面内容一半宽度值。因为视窗宽度我们不知道他具体有多大的值，所以他的一半宽度只能用百分比来计算(假设其祖先元素没有显式的设置宽度)，在这个示例中，可以使用50% - 450px来表达。在CSS Values and Units Level 3定义了一个calc()函数，允许我们做一些简单的数学表达式运算。

在很多情况下，我们需要给元素的兄弟元素以不同的样式风格呈现。主要的用例是提高用户体验和在大屏幕中不断增加列表荐。以前也介绍过有关于Quantity Queries相关的技术，那么这篇文章再次通过实例阐述这方面的知识。

虽然我们很久以前就停止使用表格来布局，但在网页中还是占有一席之地，比如表格数据统计、电子邮件，列表清单等等。同时，我们使用display属性，可以让元素渲染的形式和表格相似。然而，有时候看起来很方便，但有很多内容是动态的，这让布局非常难以预测。

大家都知道，如果不显式的给一个元素设置height值，它将会根据元素的内容自动调整。如果我们要想要给元素的宽度也有一个类似的行为呢？一个相对较新的规范 CSS Intrinsic & Extrinsic Sizing Module Level 3给width和height定义了一些新的关键词，其中一个非常有用的是min-content。

JavaScript有两种变量：局部变量和全局变量。而这两个对于初学JavaScript的同学来说是一个较为麻烦的。非常容易搞错。我也看了好几天有关于这方面的教程，也还没完全整明白。今天把自己理解的记录下来，有不对之处，还请高手斧正。

在很多语言当中都有变量，而这也是基础知识。在JavaScript中也有变量，而最近也在学习有关于这方面的知识。今天就来总结一下JavaScript中有关于变量的一些基础知识。

CSS 是前端领域中进化最慢的一块。由于 ES2015/2016 的快速普及和 Babel/Webpack 等工具的迅猛发展，CSS 被远远甩在了后面，逐渐成为大型项目工程化的痛点。也变成了前端走向彻底模块化前必须解决的难题。

洗牌算法是我们常见的随机问题，在玩游戏、随机排序时经常会碰到。它可以抽象成这样：得到一个M以内的所有自然数的随机顺序数组。在百度搜“洗牌算法”，第一个结果是《百度文库-洗牌算法》。扫了一下里面的内容，很多内容都容易误导别人走上歧途，包括最后用链表代替数组，也只是一个有限的优化（链表也引入了读取效率的损失）。

有时候我们需要向别人展示两幅图像的视觉差异，通常一幅是修改前的图像、一幅是修改后的。例如，把两幅图像放在一起，展示照片处理的效果。比如一些美容师的网站要展示某些美容护理的效果，某个地理区域发生灾难的结果。最常见的方案是将两张图片并排放置。但是，这样的话人的眼睛就只能注意到非常突出的差异、而察觉不到那些小的变化。如果对比不是那么重要或者两图之间的差异非常大的话，这种方法是没有问题的，但是对于其它情况呢，我们需要一些更好的方法。