------------
开场show：前不生“不犹豫”，后半生“不后悔”。今天又逃课，我不后悔
素材：推特公司的前端框架bootstrap（下称bt），解读源码（当然你也可以在官网分分钟下载一个源码包应用学习）
介绍：不介绍，著名的流行的框架，总有一大推的介绍
思考（或许会打自己脸）：bt给我的感觉就像是人家写好的模板，虽然是顶级公司写的，但总感觉很别扭，就像厨师使用的是大师配置好，现成的高汤，料汁，只是在应用层。优秀的前端不应该自己配置调料吗，最好的办法，就是偷学，偷学，手里拿到人家不外传的菜品祖传秘制蜜汁，品尝分析，之后自成一派，成为人生赢家（有没有人家的感受），当然这是在厨师界，秘制不外传。
理解毕竟是关乎吃饭的家伙事，被人学会怎么办，在前端，风气不一样，就讲究开源，所以咱赚了，把bt当成一个学习的途径，品尝大牛配置的汤料，阅读优秀的代码，是happy的，废话讲完....
------------
本文由：小老虎中午喝的蛋花汤，
电脑旁5cm长铅笔，
bt还有normalize赞助
871918-20160405135753875-451464896.jpg
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>}
页面中的文字会继承那个呢，请看大屏幕
871918-20160405133106375-947647707.jpg
------------------分隔线--------------------
871918-20160405133120312-1255376255.jpg
疑问：正常情况下，会禁用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中发现
871918-20160405135050359-986511101.jpg
871918-20160405135102187-762884269.jpg
神奇：居然自动添加显示属性，里外呼应，正好
于是又出现疑问：既然浏览器会自动默认这些元素为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做表单的布局
看大屏幕：
871918-20160405144802062-572264168.jpg
网易注册页，表单使用的是dl，壮观，如果使用table布局呢，我就说，有一次我还用了呢
871918-20160405145004812-1060270284.jpg
咱大汽车之家
壮观的tr，不管怎么样，咱之家还是年收入过亿
（以后深入探讨使用table做表单布局）
------------
尾部：normalize是一个好东西，bootstrap也是好东西（词穷）
申明：本文中的观点只是博主的观点
如果有疏漏那也是正常的，欢迎各行业大神
前来交流辩驳！
网友评论