css重構之旅 >前言： 今年我大一,馬上就要大二了。從高三畢業暑假到大學的這一年馬上過去，馬上迎來大二生活.學習前端也有將近一年了。一昧去追求那些視覺的效果和相對高端和新穎的技術，反而忽略了最基礎的佈局技巧。 回味 2017年3月，百格教育的手機端網站，是我接到的第一個公司外包的項目。我和組長合作 ...
css重構之旅
>前言： 今年我大一,馬上就要大二了。從高三畢業暑假到大學的這一年馬上過去，馬上迎來大二生活.學習前端也有將近一年了。一昧去追求那些視覺的效果和相對高端和新穎的技術，反而忽略了最基礎的佈局技巧。
回味
2017年3月，百格教育的手機端網站，是我接到的第一個公司外包的項目。我和組長合作完成，現在項目也已經順利完成，回想起來，自己也跟著組長學到了不少：
1）一個公告的列表（你應該提前考慮到，一則公告的字數一定有多有少的）多出的應該做處理，不然超出會排成兩行，使佈局陷入混沌的狀態：
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
如果是多行溢出部分顯示省略號：
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:3;
overflow:hidden;
2）一個活動列表的內容（許多類似的情況），應該的可伸縮的。如果你一昧用margin撐起來的佈局，就會使佈局不具有伸縮性，內容多少都會被定死，情況一有變化，要多留下大片空白，要麼導致了重疊，在此使佈局陷入混沌狀態。
>自己多少有些愧疚，當時還沒有養成寫博客總結的習慣，而且居然忽視了這個問題三個月之久
轉而繼續了JavaScript中的oop學習。之後幾個陸陸續續的小項目，由於都是自己一個人做，而且和後臺的人聯繫不緊密，其實自己一直使用的都是固定佈局。
正是如此：
一個人做項目和合作做項目的差別就已經顯示出來，一個人做項目你會忽視很多問題，你學到的東西一定是有限的。而如果你跟前輩合作，不管是和前端還是後臺的前輩，你的問題很容易被髮現；當發現問題你的第一情緒，應該是開心和喜悅，因為在解決問題和bug的過程中，是你進步最快的過程（我覺得沒有之一，一）
時隔三個月
時隔三個月，今天5月29號，這次我跟主任合作，我覺得我學到了很多很多，也意識到了自己的問題，
一昧去追求那些視覺的效果，反而忽略了最基礎的佈局技巧（是我給自己這三個月的總結反思吧）
一昧用margin撐起來的佈局，具有很差的伸縮性。
>記得，無論第一次帶我的家興學長也是現任主任；還是老主任，還是組長；一個人如果很很認真的指出你們沒有認識到的問題，你應該感激他們，你的進步和成果離不開一些人的指導，我相信每個人的研發生涯中，總有這麼一些人，無論是前端，後臺還是其他。
這次的項目不大，但是內容還是比較多的（今年我大一，對我來說一個能學到很多東西項目才是最好的項目，至於現在掙多少外快，都是次要的）
先提到一個經典的基礎佈局-自適應高度（大家不要見笑）
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="Generator"content="EditPlus®"> <meta name="Author"content=""> <meta name="Keywords"content=""> <meta name="Description"content=""> <style text="text/css"> /** 佈局 */ body { margin:0px; } #container { width:100%; margin:0 auto; border:1px solid 81cfa2 ; } #header { width:100%; float:left; clear:both; border:1px solid #81cfa2; } #header_left { width:50%; border:1px solid #81cfa2 ; float:left; } #header_right { width:49%; border:1px #F00 solid; float:right; } #main { width:100%; float:left; clear:both; border:1px #F00 solid; } #main_content{ width:100%; border:1px solid blue; } #footer { width:100%; float:left; clear:both; border:1px #F00 solid; } </style> </head> <body> <div id="container"> <div id="header"> <div id="header_left"> 頭部左側 </div> <div id="header_right"> 頭部右側 </div> </div> <div id="main"> <div id="main_content"> 主頁內容 </div> </div> <div id="footer">底部（footer）</div> </div> </body> </html>
重構佈局
移動端重構頁面佈局8大方法：http://www.divcss5.com/html5/h20001.shtml
昨天晚上讀了張鑫旭的CSS流體(自適應)佈局下寬度分離原則、頁面重構的三無準則獲益匪淺，對流體佈局有了新的認識吧
流式佈局就像在學校食堂排長隊打飯一樣，來一個就跟在後面，這樣使佈局具有很強的伸縮性，
正如張鑫旭的文章介紹的無寬度原則，犧牲一層標簽，單獨設置寬度。
寬度，浮動，絕對定位都會阻礙容器流動性，而padding和border不會，
使用寬度分離的原則就不用擔心裡面的內容（裡面的內容需遵循“無寬度準則”）會因為寬度溢出撐開佈局而造成錯位了。
這個作品可以幫你仔細分析下幾種頁面重構佈局的差異：
http://wow.techbrood.com/fiddle/fork?id=25477；
總結
頁面重構的方法和技巧有很多，自己應該保持一個謙卑的心，在重構的道路路上走下去。
一千張，我還差好多好多；
上個月讀完格拉德威爾寫的異類，第一章講了一個效應叫做馬太效應，“一個人從出生比不是就是一無所有，從出生開始我們就擁有了一定的資助和稟賦，能在眾王面前站立人，好像完全憑藉他的能力，事實上，總有潛在的優勢，非凡的機遇和傳統的文化令他們獲益”
但是很多人都沒有走完這一萬小時，遇到挫折、批評、誤解就輕言放棄。
推薦一篇異類的讀後感：
http://www.cnblogs.com/stoneniqiu/archive/2016/01/19/5143189.html
>如果有一天：你不再尋找愛情，只是去愛；你不再渴望成功，只是去做；你不再追求空泛的成長，只是開始修養自己的性情；你的人生一切，才真正開始。
