------------
開場show：前不生“不猶豫”，后半生“不后悔”飘弧。今天又逃課识藤，我不后悔
素材：推特公司的前端框架bootstrap（下稱bt）砚著，解讀源碼（當(dāng)然你也可以在官網(wǎng)分分鐘下載一個(gè)源碼包應(yīng)用學(xué)習(xí)）
介紹：不介紹，著名的流行的框架痴昧，總有一大推的介紹
思考（或許會(huì)打自己臉）：bt給我的感覺就像是人家寫好的模板稽穆，雖然是頂級(jí)公司寫的，但總感覺很別扭赶撰，就像廚師使用的是大師配置好舌镶，現(xiàn)成的高湯，料汁扣囊，只是在應(yīng)用層乎折。優(yōu)秀的前端不應(yīng)該自己配置調(diào)料嗎，最好的辦法侵歇，就是偷學(xué)骂澄，偷學(xué)，手里拿到人家不外傳的菜品祖?zhèn)髅刂泼壑杪牵穱L分析坟冲，之后自成一派，成為人生贏家（有沒有人家的感受）溃蔫，當(dāng)然這是在廚師界健提，秘制不外傳。
理解畢竟是關(guān)乎吃飯的家伙事伟叛，被人學(xué)會(huì)怎么辦私痹，在前端，風(fēng)氣不一樣统刮，就講究開源紊遵，所以咱賺了，把bt當(dāng)成一個(gè)學(xué)習(xí)的途徑侥蒙，品嘗大牛配置的湯料暗膜，閱讀優(yōu)秀的代碼，是happy的鞭衩，廢話講完....
------------
本文由：小老虎中午喝的蛋花湯学搜，
電腦旁5cm長鉛筆，
bt還有normalize贊助
bt的重置模塊直接使用的是normalize（他是什么论衍？一個(gè)優(yōu)秀的瀏覽器默認(rèn)樣式重置組件也好瑞佩，文件也好）
如果你有興趣，直接搜索在文件中引入坯台，或者使用sass和compass更加靈活運(yùn)用它炬丸，說起compass就不得不提reset和normalize的關(guān)系（這里埋下伏筆）
使用bt做項(xiàng)目，既會(huì)引入normalize捂人，他是嵌入在bt文件中的御雕，在源碼開頭即可見
這里可能會(huì)出現(xiàn)代碼冗余的現(xiàn)象，也就是說滥搭，有些重置并不需要酸纲，你也可以修改源代碼，除了這個(gè)沒有其他更好的方法
我在這里對(duì)compass的reset模塊瑟匆，和本文主角進(jìn)行些許對(duì)比
重置宗旨“保證所有瀏覽器的統(tǒng)一”
1.normalize有（下稱nm）
- 頁面重置組
- block組
- inline-block組
- 文字格式化組
- 表單重置組
- 表格重置組
2.reset有（下稱rs）
- 去邊距組
- 去文字樣式組
- block組
- 去邊框組
整體模塊：
nm對(duì)body和html進(jìn)行了邊距闽坡，字體，字號(hào)愁溜，行高的重置
疑惑：其中定義html字號(hào)為10號(hào)疾嗅，body字號(hào)定義為14號(hào)，明顯頁面中的字號(hào)會(huì)繼承body的冕象，于是html的字號(hào)等于多余（個(gè)人之見）
在測試中也是如此代承，改變html的字號(hào)，并不會(huì)對(duì)頁面中的文字產(chǎn)生影響（）
html { font-size: 10px; /*是不是10px渐扮，無意義*/
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);<br>
font-family: sans-serif; /*無意義*/}<br>body {<br>
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;<br>
font-size: 14px; /*是不是14px论悴，繼承者的爸爸*/<br>
line-height: 1.42857143;<br> color: #333;<br>
background-color: #fff;<br>}
頁面中的文字會(huì)繼承那個(gè)呢，請(qǐng)看大屏幕
------------------分隔線--------------------
疑問：正常情況下墓律，會(huì)禁用body的字號(hào)嗎膀估，或許是nm維護(hù)者設(shè)置的第二道防線
說明：這里html{font-size：10px}設(shè)置無意義，
還有html的字體設(shè)置{font-falimy：sans-serif耻讽；}也無意義察纯，我真的想不出哪里有應(yīng)用場景
-------------
block組：
你說html標(biāo)簽中有哪些是display：block（塊級(jí)元素）的，div是不是针肥，p是不是饼记，ul ol dl是不是，都是Ｗ媲握恳！然而新元素呢
div在瀏覽器中，默認(rèn)是block捺僻，瀏覽器自動(dòng)添加乡洼，看下面的大屏幕，
咱啥都沒有干匕坯，只在html中添加div還有header束昵，article（沒有樣式表）
在firebug中發(fā)現(xiàn)
神奇：居然自動(dòng)添加顯示屬性，里外呼應(yīng)葛峻，正好
于是又出現(xiàn)疑問：既然瀏覽器會(huì)自動(dòng)默認(rèn)這些元素為block顯示屬性锹雏，為什么需要再加上去能呢，代碼又冗余
article,aside,details,figcaption,figure,footer,header,main,nav,section,summary{display: block;}/*源碼*/
再看上面的源碼就會(huì)發(fā)現(xiàn)术奖，有增無減礁遵，多了三四個(gè)標(biāo)簽轻绞，也許這就是需要加上去的理由
再說：列表中的標(biāo)簽大多不需要更改display值，所以為了加強(qiáng)強(qiáng)度佣耐，和保證瀏覽器的統(tǒng)一性政勃，加上了這句話
------------
inline-block組：
是啥？擺明了是不想兼容ie6兼砖，7,啥奸远，那倆玩意兒連video都不支持，好吧讽挟，看來他已經(jīng)被拋棄
需要ie6 7這倆古董兼容inline-block的話懒叛，是這樣寫的
{display:inline-block;
*display:inline;
*zoom:1;}
而nm是這樣的
audio,canvas,progress,video {display: inline-block;
vertical-align: baseline;}
國外就是好，把時(shí)間放在更好的屬性研究上面
疑問：為什么沒有inline組呢耽梅，難道是看不起內(nèi)聯(lián)樣式薛窥？
OH，別煩我好嗎（待研究）
------------
文字格式化組：
并沒有說頭眼姐，個(gè)人喜好拆檬，隨意定制，
原諒我這一生不羈放縱愛自由
表單重置組：
這里只對(duì)基本的屬性做了重置妥凳，看了半天竟贯，也說不出一個(gè)花來，行高逝钥，邊距
對(duì)不同屬性框的重置屑那，搜索框，數(shù)字框艘款，單選框持际，復(fù)選框
如果你想有更深的體會(huì)的話，還是自行下載bootstrap源代碼學(xué)習(xí)哗咆，并且他完全不要錢
表格重置組：
表格的使用場景蜘欲，布局，數(shù)據(jù)晌柬，反正我就只試過這兩個(gè)用途
說起布局姥份，我就想到使用表格做表單的布局，說起來有點(diǎn)繞年碘，但是以前有小伙伴說澈歉，為了語義化，所以不使用table做表格布局屿衅，我當(dāng)然同意
不過表格輸入框這種等于是小布局埃难，就算是使用語義化，也沒有適合的標(biāo)簽可以使用
見得最多的是使用div ul ol dl做表單的布局
看大屏幕：
網(wǎng)易注冊(cè)頁，表單使用的是dl涡尘，壯觀忍弛，如果使用table布局呢，我就說考抄，有一次我還用了呢
咱大汽車之家
壯觀的tr剧罩，不管怎么樣，咱之家還是年收入過億
（以后深入探討使用table做表單布局）
------------
尾部：normalize是一個(gè)好東西座泳，bootstrap也是好東西（詞窮）
申明：本文中的觀點(diǎn)只是博主的觀點(diǎn)
如果有疏漏那也是正常的，歡迎各行業(yè)大神
前來交流辯駁幕与！
