成果：https://euthpic.github.io/Squred-Paper/squared-paper.html

第一步：畫一個格子

一開始用的是P標簽，但想想其實什么標簽都可以，只是用它的background-color而已，于是按要求改用div。設置完顏色之后可以看到頁面沒變化，這是因為div里沒有content來撐開一塊區(qū)域，默認height是0的，要設置height和width才能看出來。再弄個邊角（border-radius）和邊框（margin），一個格子就畫好了。

第二步：畫第二個格子

哎，怎么第二個格子是在下面而不是上面的？查資料之后明白，在文檔的正常流里，div是占據一整行的(正常流實則是標簽在html中的排列方式——塊級元素獨占一行垂直排列，內聯(lián)元素在行內從左至右依次排列)，所以它的下一個元素會被擠下去。改為float布局，樣式里添加{float:left}，讓div浮起來，這樣它們就可以共行了。兩個div都要float，不然它們會重疊，因為浮動元素不占據正常流的空間。

第三步：畫第四個格子

這時候遇到的問題是：怎么讓格子換行呢？

如果繼續(xù)float它會繼續(xù)向右排列，不float就會重疊。OK，翻書時刻。書里介紹了一個clear屬性，如果你不希望元素的左邊出現浮動元素，就{clear:left}清除左邊的浮動元素，這樣元素就會被左邊的浮動元素擠到下面去了。

這樣，九個格子就畫完了。

第四步：自適應布局

嗯~ o(*￣￣*)o? 之前接觸過一些響應式布局，是套上框架來實現的，原以為自適應也是這樣，可是這一次我實現過程中查資料沒發(fā)現一種解決方案建議用框架的，看來自適應是沒框架的，得一個個改。

CSS里常用的單位有px和em等，px就是常說的像素，em是基于瀏覽器小寫x的font size來計算的一個單位長度，它們都是絕對單位，不適合自適應布局。

第一反應是將px改成%,這樣它就可以隨著窗口大小而變化了，可是問題又來了：原先的正方體會變形呀。。

如何讓height等于width呢？再深一層的思考：CSS支持除%之外復雜的計算屬性嗎？

做個實驗：

可以看到在chrome里面就算10*10這樣的簡單計算CSS都不支持。

不過意外發(fā)現了這個：calc()，實驗發(fā)現chrome是支持的，用來做一些簡單計算，可是還是不知道如何獲取某一個對象的值。

第二反應是用js獲取width的值再傳給height，可是先不考慮能否實現，在CSS的任務中不應該考慮用JS。

最后是發(fā)現了兩個單位。

vw:相對于視口的寬度。視口被均分為100單位的vw

vh:相對于視口的高度。視口被均分為100單位的vh? ? （v for viewport）

與要求比較之后選用了vw，最終解決了自適應的問題。

查資料的過程中發(fā)現了一種有趣的方案：

為什么這樣也能自適應呢？width繼承父元素的寬度可以理解，可是padding-bottom不是繼承高度嗎（我原先的理解，top-bottom表示上下）？這樣還能保持正方形嗎？答案不是。

可以看到padding-bottom的%是繼承自父元素的寬度的，而且padding的其他三個位置也是這樣。

width和padding-bottom都繼承自同一對象，那么正方形打野? 啊呸，正方形格子就可以自適應了。

看到深度思考里有提到ide和文本編輯器的爭議。根據我一段時間來的體會，我覺得工具本身對于初學者來說并沒那么重要，初學者應該關注的是代碼本身。而且對于一個選擇困難癥患者來說，要避免讓各種選擇弄得自己很頭疼，你要這樣想：有人用，就說明它可以用。那么你就用，等哪天你用了一段時間，對它了解更深了，你覺得它不好用，那你就換別的，這時你的選擇是更加堅決的，因為你了解更多了。

最后，那么，今天就爭取搭建一個服務器吧。昨天用阿里云無腦搭了一個wordpress，今天要搭一個個人的網站用來部署github的項目。不過我看到一堆新的名詞真的很頭疼，什么SVN，什么什么咯。哎哎