有時覺得看那些國外教程感覺還挺好的，英文不多，大部分都是**多，了解個思路就好的了。然而最難啃的是那些學術性的**呢，裡面專業名詞多，難懂，**又少，最主要我這個先天英文差，死啃爛啃才把六級啃過的人，看到一大堆英文免不了還是一陣發暈。言歸正傳，聖杯布局我聽就聽了很久很久啦，而且每次看到聖杯布局總會離不開一篇文章，那就是a list apart裡面的in search of the holy grail 。隨著現在h5，css3的發展，ie6，ie7的逐漸退出舞台，或許現在工程師也沒那麼糾結了（或許而已，移動的大肆發展，還是出現了更多要相容的東西，但是現在也逐漸不用再糾結那個ie6了吧，起碼做移動端的就可以不用）。這篇文章06發布的，或許將來有一天人人的瀏覽器都支援css3的盒布局了，那浮動布局，絕對定位布局就可以退出舞台咯。
聖杯布局它的目標是左右兩欄定寬，中間那一行流式。首先是html**（為了簡便處理這裡就用位置命名id，實際操作上還是使用語義化的詞命名id）：
<一、聖杯布局需要比較多的數學計算，這裡我設left的寬度為x，right的寬度為y。這裡先不考慮padding和margin。div
id="header"
>
div>
<
div
id="container"
>
<
div
id="center"
class
="column"
>
div>
<
div
id="left"
class
="column"
>
div>
<
div
id="right"
class
="column"
>
div>
div>
<
div
id="footer"
>
div>
第一步，設定container的padding-left為left的寬度，padding-right為right的寬度。(來自 a list apart,假設了left寬為200px,right寬為150px)
#container第二步，將每一列都設定好寬度。
第四步，把left放到應該到的位置上，就是center的左邊。
接著設定left層移到padding-left的位置那邊，使用相對定位，跟它自己的位置相距離它的寬。
第五步，把right層移到padding-right的那個位置上
最後一步，可用性的修改。由於中間center層是流式的，當視窗大小縮小到x+y的時候，center就沒有了，所以應該給#container設定乙個最小寬度
body接著就是修改ie6以下的bug了，margin負值在ie6上會失效把left層弄到很遠的地方，需要把它拉回來
* html #left至於為什麼用right層的寬度，文中沒有給出解析，要我們去嘗試或者直接把它當成護身符。
二、帶有padding的聖杯布局，假設left層的左右padding為x，center層的padding為y，right層的padding為z.
body #container #container .column #center #left #right #footer聖杯布局是乙個經典，或許在ie6還有點點問題，但是隨著ie6的退出舞台，技術的快速發展，或者過多幾年，這個技術也可能沒人在用了，但是經典是不會被遺忘的。/*** ie fix **
*/* html #left
傳說中的MTU
通訊術語 最大傳輸單元 maximum transmission unit，mtu 是指一種通訊協議的某一層上面所能通過的最大資料報大小 以位元組為單位 最大傳輸單元這個引數通常與通訊介面有關 網路介面卡 串列埠等 網際網路協議允許ip分片，這樣就可以將資料報分成足夠小的片段以通過那些最大傳輸單元小...
傳說中的truncate html
學習用rails做blog的時候要用到rails的truncate功能。h truncate post.content,100,問題來了，將html截斷後出現不完整的tag，導致後續的文章排版都錯亂了。本來考慮是不是自己寫乙個，正在思考思路，結果祭起google，好嗎，已經有牛人寫了 簡單記錄一下 ...
傳說中的分頁6
set quoted identifier off goset ansi nulls on go 名稱 分頁儲存過程 使用示例 exec sp pageindex from stusources 2,10 注意 目前還沒有對輸入的引數進行嚴格的驗證 預設為輸入都是合法有效的 alter proc s...