上一节《css知多少（3）——样式来源与层叠规则》介绍了样式的五种来源，咱们再通过一张图回顾一下。
对于上面的三层，咱们大概都比较熟悉了。下面的两层中，用户自定义样式一般也就是改一改字号大小和字体样式，也没甚好说的。而最有的说的就是浏览器的默认样式。
不同浏览器的默认样式多少有些区别，特别是老版本的浏览器之间，现在高级浏览器越来越向统一的标准靠拢，对前端程序猿来说是一件好事情。虽然有些许差异，但是绝大部分还是相同的，我先把代码粘贴出来，具体的解读咱们慢慢道来（只说重点，比较容易的或者不常用的就不说了）。
浏览器默认样式
1．理念上的转变
在解读代码之前，我先把我看浏览器默认样式最大的体会给大家说一下，这个是非常重要的。就是要先从理念上重新认识html和css。
以前我都是认为浏览器自身本来就认识各种html标签，并且会根据规则设置标签的样子，例如p是block显示，ul有margin-left，h1粗体显示……以前以为这些标签默认的显示方式和css无关，是浏览器自己干的，css设置网页样式是加载之后又渲染的。
现在知道这种想法是错误的。其实浏览器加载了html之后只为一件东西——dom树，浏览器把html变为dom树结构，就完成了对html的结构化。至于后来对视图的渲染，p是block、br换行，那是整合了css之后的事情。而浏览器整合css又是另一个路线，和解析html是分开的。这里的“css”就包含了浏览器默认样式。
可以结合下图理解（第二节的图）：
一句话，浏览器将载入的html变为dom树，但是此时没有任何显示样式。所以显示的样式，都是css定义的，浏览器只会通过css来渲染视图样式。
——多好的设计：指责单一，开放封闭！
2．block元素
为何默认情况下p、h1、ul、div都是block显示，就是这里定义的。所以，不要再说div天生就是block——这句话应该换成：浏览器默认样式天生规定了div是block——所以才导致了div是block！是默认样式规定的，不是浏览器的内核规定的。
没有设置block的元素，，默认为inline显示。
3. display: list-item
我们在使用display时，常用的值一般是：inline/block/inline-block，用不到list-item。那这里的list-item到底有什么作用？我们不妨亲自试一试：
看到没有，出现了ul-li中的效果了吧，如果再加一个margin-left是不是就跟ul-li一样了？
所以，ul-li为什么会默认显示成那种样子？——list-item才是“罪魁祸首”。
4. diplay:table
先给出一个快速思考题：<table>和<div>在容器尺寸上最大区别是什么（只是容器尺寸，不考虑内容区别）？请在两秒钟内说出答案。
答案是——div宽度和父容器相同，table宽度根据内容而定——即table具有“包裹性”。
举一个例子：
上图中，第一个div默认是block，宽度撑满整个页面。第二个div设置了display:table，宽度根据内容而定。这就是“包裹性”。而提到“包裹性”，又不得不让我想到float和absolute。具体怎样这里无法细说，后面的文章会详细讲到，有兴趣的可以先查着。
各位思考一下，你们做的项目中，哪些地方想要这种“包裹性”，而不是写死宽度或者用js计算宽度？如果想不到，我给大家截个图提醒一下。如下图：
5. display: table-cell
上面的截图中，我们看到了眼花缭乱的好多display，而且都是和table相关的。从字面意思上我们能看出，这是浏览器为了渲染一个完整的表格，而需要的许多显示方式（PS：看似一个简单的表格，渲染规则就这么多，这就提醒我们思考问题的严谨性和逻辑性）。
这里的大部分都是我们一直都不会用到的，用不到的了解即可，没必要深究。但是这个table-cell我们却能用得到，而且是用它来干一件很重要的事情——多列布局。
多列布局在css中有多重要就不用我说了吧，传统模式下大家都使用float来解决这一问题，但是float写出来的东西代码复杂，宽度调整不灵活，浏览器兼容性有问题。所以才有了新方案——table-cell，注意，IE6、7不行！
简单举个例子：
记得我刚学html时候，不会用div + css做多列布局，我就用table做多列布局。而今，你可以用table-cell，像用table一样做多列布局，做出来的效果和table做出来的效果是一模一样的。
6. body样式
在body中，定义了两个样式，如上图。
还深深埋在心底，要除去，怕是不能活命。
