成果：https://euthpic.github.io/Squred-Paper/squared-paper.html
第一步：画一个格子
一开始用的是P标签，但想想其实什么标签都可以，只是用它的background-color而已，于是按要求改用div。设置完颜色之后可以看到页面没变化，这是因为div里没有content来撑开一块区域，默认height是0的，要设置height和width才能看出来。再弄个边角（border-radius）和边框（margin），一个格子就画好了。
第二步：画第二个格子
哎，怎么第二个格子是在下面而不是上面的？查资料之后明白，在文档的正常流里，div是占据一整行的(正常流实则是标签在html中的排列方式——块级元素独占一行垂直排列，内联元素在行内从左至右依次排列)，所以它的下一个元素会被挤下去。改为float布局，样式里添加{float:left}，让div浮起来，这样它们就可以共行了。两个div都要float，不然它们会重叠，因为浮动元素不占据正常流的空间。
第三步：画第四个格子
这时候遇到的问题是：怎么让格子换行呢？
如果继续float它会继续向右排列，不float就会重叠。OK，翻书时刻。书里介绍了一个clear属性，如果你不希望元素的左边出现浮动元素，就{clear:left}清除左边的浮动元素，这样元素就会被左边的浮动元素挤到下面去了。
这样，九个格子就画完了。
第四步：自适应布局
嗯~ o(*￣￣*)o 之前接触过一些响应式布局，是套上框架来实现的，原以为自适应也是这样，可是这一次我实现过程中查资料没发现一种解决方案建议用框架的，看来自适应是没框架的，得一个个改。
CSS里常用的单位有px和em等，px就是常说的像素，em是基于浏览器小写x的font size来计算的一个单位长度，它们都是绝对单位，不适合自适应布局。
第一反应是将px改成%,这样它就可以随着窗口大小而变化了，可是问题又来了：原先的正方体会变形呀。。
如何让height等于width呢？再深一层的思考：CSS支持除%之外复杂的计算属性吗？
做个实验：
可以看到在chrome里面就算10*10这样的简单计算CSS都不支持。
不过意外发现了这个：calc()，实验发现chrome是支持的，用来做一些简单计算，可是还是不知道如何获取某一个对象的值。
第二反应是用js获取width的值再传给height，可是先不考虑能否实现，在CSS的任务中不应该考虑用JS。
最后是发现了两个单位。
vw:相对于视口的宽度。视口被均分为100单位的vw
vh:相对于视口的高度。视口被均分为100单位的vh （v for viewport）
与要求比较之后选用了vw，最终解决了自适应的问题。
查资料的过程中发现了一种有趣的方案：
为什么这样也能自适应呢？width继承父元素的宽度可以理解，可是padding-bottom不是继承高度吗（我原先的理解，top-bottom表示上下）？这样还能保持正方形吗？答案不是。
可以看到padding-bottom的%是继承自父元素的宽度的，而且padding的其他三个位置也是这样。
width和padding-bottom都继承自同一对象，那么
正方形打野
啊呸，正方形格子就可以自适应了。
看到深度思考里有提到ide和文本编辑器的争议。根据我一段时间来的体会，我觉得工具本身对于初学者来说并没那么重要，初学者应该关注的是代码本身。而且对于一个选择困难症患者来说，要避免让各种选择弄得自己很头疼，你要这样想：有人用，就说明它可以用。那么你就用，等哪天你用了一段时间，对它了解更深了，你觉得它不好用，那你就换别的，这时你的选择是更加坚决的，因为你了解更多了。
最后，那么，今天就争取搭建一个服务器吧。昨天用阿里云无脑搭了一个wordpress，今天要搭一个个人的网站用来部署github的项目。不过我看到一堆新的名词真的很头疼，什么SVN，什么什么咯。哎哎