页面重构-让我们的布局自适应
css重構(gòu)之旅
>前言： 今年我大一,馬上就要大二了。從高三畢業(yè)暑假到大學(xué)的這一年馬上過去，馬上迎來大二生活.學(xué)習(xí)前端也有將近一年了。一昧去追求那些視覺的效果和相對高端和新穎的技術(shù)，反而忽略了最基礎(chǔ)的布局技巧。
回味
2017年3月，百格教育的手機(jī)端網(wǎng)站，是我接到的第一個(gè)公司外包的項(xiàng)目。我和組長合作完成，現(xiàn)在項(xiàng)目也已經(jīng)順利完成，回想起來，自己也跟著組長學(xué)到了不少：
1）一個(gè)公告的列表（你應(yīng)該提前考慮到，一則公告的字?jǐn)?shù)一定有多有少的）多出的應(yīng)該做處理，不然超出會(huì)排成兩行，使布局陷入混沌的狀態(tài)：
overflow: hidden; text-overflow:ellipsis; white-space: nowrap;?
如果是多行溢出部分顯示省略號(hào)：
2）一個(gè)活動(dòng)列表的內(nèi)容（許多類似的情況），應(yīng)該的可伸縮的。如果你一昧用margin撐起來的布局，就會(huì)使布局不具有伸縮性，內(nèi)容多少都會(huì)被定死，情況一有變化，要多留下大片空白，要么導(dǎo)致了重疊，在此使布局陷入混沌狀態(tài)。
?
>自己多少有些愧疚，當(dāng)時(shí)還沒有養(yǎng)成寫博客總結(jié)的習(xí)慣，而且居然忽視了這個(gè)問題三個(gè)月之久
轉(zhuǎn)而繼續(xù)了JavaScript中的oop學(xué)習(xí)。之后幾個(gè)陸陸續(xù)續(xù)的小項(xiàng)目，由于都是自己一個(gè)人做，而且和后臺(tái)的人聯(lián)系不緊密，其實(shí)自己一直使用的都是固定布局。
?
正是如此：
一個(gè)人做項(xiàng)目和合作做項(xiàng)目的差別就已經(jīng)顯示出來，一個(gè)人做項(xiàng)目你會(huì)忽視很多問題，你學(xué)到的東西一定是有限的。而如果你跟前輩合作，不管是和前端還是后臺(tái)的前輩，你的問題很容易被發(fā)現(xiàn)；當(dāng)發(fā)現(xiàn)問題你的第一情緒，應(yīng)該是開心和喜悅，因?yàn)樵诮鉀Q問題和bug的過程中，是你進(jìn)步最快的過程（我覺得沒有之一，一）
時(shí)隔三個(gè)月
時(shí)隔三個(gè)月，今天5月29號(hào)，這次我跟主任合作，我覺得我學(xué)到了很多很多，也意識(shí)到了自己的問題，
一昧去追求那些視覺的效果，反而忽略了最基礎(chǔ)的布局技巧（是我給自己這三個(gè)月的總結(jié)反思吧）
一昧用margin撐起來的布局，具有很差的伸縮性。
>記得，無論第一次帶我的家興學(xué)長也是現(xiàn)任主任；還是老主任，還是組長；一個(gè)人如果很很認(rèn)真的指出你們沒有認(rèn)識(shí)到的問題，你應(yīng)該感激他們，你的進(jìn)步和成果離不開一些人的指導(dǎo)，我相信每個(gè)人的研發(fā)生涯中，總有這么一些人，無論是前端，后臺(tái)還是其他。
這次的項(xiàng)目不大，但是內(nèi)容還是比較多的（今年我大一，對我來說一個(gè)能學(xué)到很多東西項(xiàng)目才是最好的項(xiàng)目，至于現(xiàn)在掙多少外快，都是次要的）
先提到一個(gè)經(jīng)典的基礎(chǔ)布局-自適應(yīng)高度（大家不要見笑）
?
<!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">頭部左側(cè)</div><div id="header_right">頭部右側(cè)</div></div><div id="main"><div id="main_content">主頁內(nèi)容</div></div><div id="footer">底部（footer）</div> </div> </body> </html>重構(gòu)布局
移動(dòng)端重構(gòu)頁面布局8大方法：http://www.divcss5.com/html5/h20001.shtml
昨天晚上讀了張鑫旭的CSS流體(自適應(yīng))布局下寬度分離原則、頁面重構(gòu)的三無準(zhǔn)則獲益匪淺，對流體布局有了新的認(rèn)識(shí)吧
流式布局就像在學(xué)校食堂排長隊(duì)打飯一樣，來一個(gè)就跟在后面，這樣使布局具有很強(qiáng)的伸縮性，
正如張鑫旭的文章介紹的無寬度原則，犧牲一層標(biāo)簽，單獨(dú)設(shè)置寬度。
寬度，浮動(dòng)，絕對定位都會(huì)阻礙容器流動(dòng)性，而padding和border不會(huì)，
使用寬度分離的原則就不用擔(dān)心里面的內(nèi)容（里面的內(nèi)容需遵循“無寬度準(zhǔn)則”）會(huì)因?yàn)閷挾纫绯鰮伍_布局而造成錯(cuò)位了。
這個(gè)作品可以幫你仔細(xì)分析下幾種頁面重構(gòu)布局的差異：
http://wow.techbrood.com/fiddle/fork?id=25477；
總結(jié)
頁面重構(gòu)的方法和技巧有很多，自己應(yīng)該保持一個(gè)謙卑的心，在重構(gòu)的道路路上走下去。
一千張，我還差好多好多；
?
上個(gè)月讀完格拉德威爾寫的異類，第一章講了一個(gè)效應(yīng)叫做馬太效應(yīng)，“一個(gè)人從出生比不是就是一無所有，從出生開始我們就擁有了一定的資助和稟賦，能在眾王面前站立人，好像完全憑借他的能力，事實(shí)上，總有潛在的優(yōu)勢，非凡的機(jī)遇和傳統(tǒng)的文化令他們獲益”
但是很多人都沒有走完這一萬小時(shí)，遇到挫折、批評、誤解就輕言放棄。
推薦一篇異類的讀后感：
http://www.cnblogs.com/stoneniqiu/archive/2016/01/19/5143189.html
>如果有一天：你不再尋找愛情，只是去愛；你不再渴望成功，只是去做；你不再追求空泛的成長，只是開始修養(yǎng)自己的性情；你的人生一切，才真正開始。
?
后記--
因?yàn)槲覍W(xué)習(xí)前端經(jīng)驗(yàn)還不夠，干貨不多，希望當(dāng)做筆記和心情記錄下來。
以后、畢業(yè)或者就業(yè)后還可以回味那時(shí)寫的些許稚嫩的“博客”。
總結(jié)
以上是生活随笔為你收集整理的页面重构-让我们的布局自适应的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 借百度爸爸下蛋的好看搜索框
- 下一篇： 元素的居中方式总结