虎说：bootstrap源码解读（重置模块）

------<!--action-->------

开场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);
   font-family: sans-serif;         /*无意义*/
}
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;          /*是不是14px，继承者的爸爸*/
  line-height: 1.42857143;
  color: #333;
  background-color: #fff;
}

页面中的文字会继承那个呢，请看大屏幕

------------------分隔线--------------------

疑问：正常情况下，会禁用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做表单布局）

------<!--没有尿点 end-->------

尾部：normalize是一个好东西，bootstrap也是好东西（词穷）

申明：本文中的观点只是博主的观点，不代表博客园的以及其他大神的见解，

如果有疏漏那也是正常的，欢迎各行业大神

前来交流辩驳！