css知多少——解读浏览器默认样式.docx

css知多少（

css知多少（4）——解读浏览器默认样式

上一节《css知多少（3）——样式来源与层叠规则》介绍了样式的五种来源，咱们再通过

一张图回顾一下。

对于上面的三层，咱们大概都比较熟悉了。下面的两层中，用户自定义样式一般也就是

改一改字号大小和字体样式，也没甚好说的。而最有的说的就是浏览器的默认样式。

不同浏览器的默认样式多少有些区别，特别是老版本的浏览器之间，现在高级浏览器越来越向统一的标准靠拢，对前端程序猿来说是一件好事情。虽然有些许差异，但是绝大部分还是相同的，我先把代码粘贴出来，具体的解读咱们慢慢道来（只说重点，比较容易的或

者不常用的就不说了）。

1html,address,2blockquote,3body,dd,div,

4dl,dt,fieldset,form,5frame,frameset,

6h1,h2,h3,h4,7h5,h6,noframes,8ol,p,ul,center,

9dir,hr,menu,pre{display:block}

10/*以上按照block显示，没有规定的则按照默认的inline显示*/

11

12li{display:list-item}

13/*程序猿常用的display值是：inline/block/inline-block，很少用到list-item

14list-item到底是什么样的显示效果，可以通过例子验证。。。。15第一，你可以不用ul-li，而用其他标签实现list-item的效果

16第二，要意识到，浏览器对待html只是把它当作一个dom树，至于显示成什么效果，是通过浏览器默认的css实现的，即样式全部通过css设计，和html无关*/

17

18head{display:none}19table{display:table}

20/*display:table和block最大的区别在于：包裹性。提到包裹性，就不得不提一下float和absolute*/

21

22tr{display:table-row}

23thead{display:table-header-group}24tbody{display:table-row-group}25tfoot{display:table-footer-group}26col{display:table-column}27colgroup{display:table-column-group}28td,th{display:table-cell;}

29/*与table相关的其他display值，研究的意义不大，但是table-cell值得一说。

30table-cell是多列布局的最新解决方案，比使用float更加有效（不兼容IE6、7）

31实际上table-cell是要依赖其他table相关的display，但是浏览器会为我们做这些工作，不必手动填写*/

32

33caption{display:table-caption}

34th{font-weight:bolder;text-align:center}35/*标题默认设置了粗体和文字居中*/

36

37caption{text-align:center}

38body{margin:8px;line-height:1.12}

39/*不同浏览器的margin不一样，所以要设置【*{margin:0}】

40line-height:1.12针对英文没问题，但是中文看起来很别扭

41另外，1.12是一个相对值（即1.12em），与文字有关的距离设置最好用相对值*/

42

43h1{font-size:2em;margin:.67em0}44h2{font-size:1.5em;margin:.75em0}45h3{font-size:1.17em;margin:.83em0}46h4,p,

47blockquote,ul,48fieldset,form,49ol,dl,dir,

50menu{margin:1.12em0}

51/*em是相对单位，1em就是一单位，浏览器默认的一单位是16px，52可以通过body{font-size:20px}来修改一单位的值

53p的字体大小是1em，h1是2em，h2是1.5em，等等

54另外，与文字相关的距离值，最好用相对单位，例如line-heig