老實說我已經快沒梗了，
不過梗這種東西，
就跟肥宅的乳溝一樣，
擠一擠就會跑出來的，
請大家不用擔心。

今天大部分的時間都在追蹤自己第一次寫網頁時的程式碼，
雖然網路上很多教學都耳提面命地提醒大家各種要點，
但我這個人如果不自己去嘗試一遍，
是不會體會這些要點為何重要的，
因此中間犯了很多很蠢的錯誤，
在往後幾天我會慢慢分享出來讓大家引以為戒，
別像我一樣蠢。

1. margin: 0 auto; 是個好東西，記得用它

一般來說，網頁通常會有一些固定的內容，
以 iT邦幫忙的例子來說，
最上方的那條槓槓，除了顯示你目前的所在頁面外，
還指出了這個網頁的其他頁面....等等，
我們一般稱之它為 header。
再來就是最下方那一大陀黑色的不明物體，
裡面寫了一堆沒人會點進去看的東西，
像是版權聲明之類的，
我們稱之為 footer。
剩下來的部分就是網頁的內容 container。

為了較佳的使用者體驗，
通常前面二者的長度會與裝置的螢幕等寬，
而 container則是會依需求改變大小並且置中。
按照正常的做法，
應該是設定 container的寬度之後，
直接使用margin: 0 auto;就能夠水平置中了。

但是第一次嘗試置中的我並沒有想到現在的科技是如此的強大，
還用小算盤去算左右推擠的距離是多少。
舉個例子吧：
假設整個網站最寬是 1024px，
也就是 header跟 footer的寬度，
中間的 container我們假設它是 800px好了，
正常的作法只要指定container的寬度，並用margin: 0 auto;即可。
整段程式碼看起來會像這個樣子：

.container{
    width: 800px;
    margin: 0 auto;
}

可是我當時由於經驗不足，
採用的方法是用小算盤算出左右該推擠的距離，
也就是 (1024 - 800) / 2 = 112
所以我的程式碼就會變成：

.container{
    margin-left: 112px;
    margin-right: 112px;
}

雖然這二者的結果看起來是一樣的，
但前者的好處在於，
若今天需要調整 container的寬度，
我只要更改 width就可以了，
更改後的內容還是會置中；
但若是用我寫的程式碼，
每次更改寬度，
我就必須要再重新計算一次，
就行為來說是一件很蠢的事情。

最後再說一次： margin: 0 auto; 是個好東西，要記得用它。

本來是打算列個三點的，
但是看了自己寫的爛 code讓我頭很痛，
剩下的明天再分享吧！(也讓我多撐幾天)