------------
開場show：前不生“不猶豫”，后半生“不后悔”。今天又逃課，我不后悔
素材：推特公司的前端框架bootstrap（下稱bt），解讀源碼（當然你也可以在官網分分鐘下載一個源碼包應用學習）
介紹：不介紹，著名的流行的框架，總有一大推的介紹
思考（或許會打自己臉）：bt給我的感覺就像是人家寫好的模板，雖然是頂級公司寫的，但總感覺很別扭，就像廚師使用的是大師配置好，現成的高湯，料汁，只是在應用層。優秀的前端不應該自己配置調料嗎，最好的辦法，就是偷學，偷學，手里拿到人家不外傳的菜品祖傳秘制蜜汁，品嘗分析，之后自成一派，成為人生贏家（有沒有人家的感受），當然這是在廚師界，秘制不外傳。
理解畢竟是關乎吃飯的家伙事，被人學會怎么辦，在前端，風氣不一樣，就講究開源，所以咱賺了，把bt當成一個學習的途徑，品嘗大牛配置的湯料，閱讀優秀的代碼，是happy的，廢話講完....
------------
本文由：小老虎中午喝的蛋花湯，
電腦旁5cm長鉛筆，
bt還有normalize贊助
bt的重置模塊直接使用的是normalize（他是什么？一個優秀的瀏覽器默認樣式重置組件也好，文件也好）
如果你有興趣，直接搜索在文件中引入，或者使用sass和compass更加靈活運用它，說起compass就不得不提reset和normalize的關系（這里埋下伏筆）
使用bt做項目，既會引入normalize，他是嵌入在bt文件中的，在源碼開頭即可見
這里可能會出現代碼冗余的現象，也就是說，有些重置并不需要，你也可以修改源代碼，除了這個沒有其他更好的方法
我在這里對compass的reset模塊，和本文主角進行些許對比
重置宗旨“保證所有瀏覽器的統一”
1.normalize有（下稱nm）
- 頁面重置組
- block組
- inline-block組
- 文字格式化組
- 表單重置組
- 表格重置組
2.reset有（下稱rs）
- 去邊距組
- 去文字樣式組
- block組
- 去邊框組
整體模塊：
nm對body和html進行了邊距，字體，字號，行高的重置
疑惑：其中定義html字號為10號，body字號定義為14號，明顯頁面中的字號會繼承body的，于是html的字號等于多余（個人之見）
在測試中也是如此，改變html的字號，并不會對頁面中的文字產生影響（）
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>}
頁面中的文字會繼承那個呢，請看大屏幕
------------------分隔線--------------------
疑問：正常情況下，會禁用body的字號嗎，或許是nm維護者設置的第二道防線
說明：這里html{font-size：10px}設置無意義，
還有html的字體設置{font-falimy：sans-serif；}也無意義，我真的想不出哪里有應用場景
-------------
block組：
你說html標簽中有哪些是display：block（塊級元素）的，div是不是，p是不是，ul ol dl是不是，都是??！然而新元素呢
div在瀏覽器中，默認是block，瀏覽器自動添加，看下面的大屏幕，
咱啥都沒有干，只在html中添加div還有header，article（沒有樣式表）
在firebug中發現
神奇：居然自動添加顯示屬性，里外呼應，正好
于是又出現疑問：既然瀏覽器會自動默認這些元素為block顯示屬性，為什么需要再加上去能呢，代碼又冗余
article,aside,details,figcaption,figure,footer,header,main,nav,section,summary{display: block;}/*源碼*/
再看上面的源碼就會發現，有增無減，多了三四個標簽，也許這就是需要加上去的理由
再說：列表中的標簽大多不需要更改display值，所以為了加強強度，和保證瀏覽器的統一性，加上了這句話
------------
inline-block組：
是啥？擺明了是不想兼容ie6，7,啥，那倆玩意兒連video都不支持，好吧，看來他已經被拋棄
需要ie6 7這倆古董兼容inline-block的話，是這樣寫的
{display:inline-block;
*display:inline;
*zoom:1;}
而nm是這樣的
audio,canvas,progress,video {display: inline-block;
vertical-align: baseline;}
國外就是好，把時間放在更好的屬性研究上面
疑問：為什么沒有inline組呢，難道是看不起內聯樣式？
OH，別煩我好嗎（待研究）
------------
文字格式化組：
并沒有說頭，個人喜好，隨意定制，
原諒我這一生不羈放縱愛自由
表單重置組：
這里只對基本的屬性做了重置，看了半天，也說不出一個花來，行高，邊距
對不同屬性框的重置，搜索框，數字框，單選框，復選框
如果你想有更深的體會的話，還是自行下載bootstrap源代碼學習，并且他完全不要錢
表格重置組：
表格的使用場景，布局，數據，反正我就只試過這兩個用途
說起布局，我就想到使用表格做表單的布局，說起來有點繞，但是以前有小伙伴說，為了語義化，所以不使用table做表格布局，我當然同意
不過表格輸入框這種等于是小布局，就算是使用語義化，也沒有適合的標簽可以使用
見得最多的是使用div ul ol dl做表單的布局
看大屏幕：
網易注冊頁，表單使用的是dl，壯觀，如果使用table布局呢，我就說，有一次我還用了呢
咱大汽車之家
壯觀的tr，不管怎么樣，咱之家還是年收入過億
（以后深入探討使用table做表單布局）
------------
尾部：normalize是一個好東西，bootstrap也是好東西（詞窮）
申明：本文中的觀點只是博主的觀點
如果有疏漏那也是正常的，歡迎各行業大神
前來交流辯駁！
