上一节介绍了五种样式的来源，我们通过一张图来回顾一下。上面的三层我们应该都不陌生了。在下面的两层中，自定义样式一般是指改变字体大小和字体样式，这个不太好说。而最受关注的就是浏览器的默认样式。不同浏览器的默认样式有些不同，尤其是老版本的浏览器。现在高级的浏览器都在向统一标准靠拢，这对前端程序员来说是件好事。虽然有一些差异，但大部分还是一样的。我先贴代码，具体解读慢慢说吧（只说重点，比较简单或者不常用的就不说了）。html,地址,blockquote,body,dd,div,dl,dt,fieldset,form,frame,frameset,h1,h2,h3,h4,h5,h6,noframes,ol,p,ul,center,dir,hr,menu,pre{display:block}/*以上都是按照block显示，如果没有规定，则按照默认inline显示*/li{display:list-item}/*显示值程序员常用的是：inline/block/inline-block，很少用到list-itemlist-item的显示效果，可以通过例子来验证。...首先，可以使用其他标签来实现list-item的效果，而不是ul-li。其次，您必须意识到浏览器将HTML视为一棵dom树。至于显示的效果，是通过浏览器默认的css实现的，即样式都是通过css设计的，与html无关*/head{display:none}table{display:table}/*display:table和block最大的区别是：wrapping。说到换行，就不得不提到float和absolute*/tr{display:table-row}thead{display:table-header-group}tbody{display:table-row-group}tfoot{display:table-footer-group}col{display:table-column}colgroup{display:table-column-group}td,th{display:table-cell;}/*其他与table相关的显示值，研究意义不大，table-cell值得一提。table-cell是最新的多列布局解决方案，比使用float更有效（不兼容IE6、7）。其实table-cell依赖于其他表格相关的显示，但是浏览器会帮我们完成这些工作，所以我们不用手动填写*/caption{display:table-caption}th{font-重量：更大胆；text-align:center}/*标题设置为粗体，文字默认居中*/caption{text-align:center}body{margin:8px;line-height:1.12}/*不同的浏览器边距不一样，所以需要设置【*{margin:0}】line-height:1.12英文没问题，中文就显得别扭了。另外，1.12是一个Relative值（即1.12em），文字相关距离设置最好使用relative值*/h1{font-size:2em;边距：.67em0}h2{字体大小：1.5em;边距：.75em0}h3{字体大小：1.17em;margin:.83em0}h4,p,blockquote,ul,fieldset,form,ol,dl,dir,menu{margin:1.12em0}/*em是一个相对单位，1em是一个单位，浏览器默认的一个单位为16px，可以通过body{font-size:20px}修改一个单位的值，p的字号为1em，h1为2em，h2为1.5em等。另外，与文字最好用相关距离值的相对单位，例如行高：1.4；margin:.5em等这样做的好处是当自定义1em的绝对px时，line-height也会改变*//*注意如果我们自己写css【*{margin:0}】，我们可以覆盖p、h1、h2和其他标签的边距。我们都知道*选择器的权重最低，但是它可以覆盖标签。Selector，表示浏览器已经在这里做了一些事情。浏览器不允许默认样式和用户自定义样式“公平竞争”，而是优先考虑用户自定义样式*/h5{font-size:.83em;边距：1.5em0}h6{font尺寸：.75em；margin:1.67em0}h1,h2,h3,h4,h5,h6,b,strong{font-weight:bolder}/*在这里你可以看到哪个标签文本是粗体*/blockquote{margin-left:40px;margin-right:40px}i,cite,em,var,address{font-style:italic}/*这里可以看到哪些标签是斜体*/pre,tt,code,kbd,samp{font-family:monospace}pre{white-space:pre}button,textarea,input,object,select{display:inline-block;}/*不知道内联块长什么样？或者不知道inline-block有什么特点？在这里可以看到哪些标签是inline-block，就知道inline-block的用途了。inline-block的具体使用，后面会详细介绍，这里只指出*/big{font-size:1.17em}small,sub,sup{font-size:.83em}sub{vertical-align:sub}sup{vertical-align:super}table{border-spacing:2px;}thead,tbody,tfoot{vertical-align:middle}td,th{vertical-align:inherit}s,strike,del{text-decoration:line-through}hr{border:1pxinset}/*为什么
默认情况下如此丑陋，尤其是在IE下，这是罪魁祸首*/ol,ul,dir,menu,dd{margin-left:40px}ol{list-style-type:decimal}/*ul和ol将有默认左边距，在这里你可以看到为什么会有差距，以及间距的具体大小是多少*/olul,ulol,ulul,olol{margin-top:0;margin-bottom:0}u,ins{text-decoration:underline}br:before{content：“A”}/*？？？？？？？？？？？？？*/:before,:after{white-space:pre-line}/*
为什么可以实现换行？浏览器在获取到html的br标签时，只会解析成一个dom节点，而“换行”的功能是通过这个实现的吗？？？？？*/center{text-align:center}abbr,acronym{font-variant:small-caps;letter-spacing:0.1em}:link,:visited{text-decoration:underline}:focus{outline:thindottedinvert}/*开始双向设置（不要改变）*/BDO[DIR="ltr"]{direction:ltr;unicode-bidi:bidi-override}BDO[DIR="rtl"]{方向：rtl;override}*[DIR="ltr"]{方向：ltr；unicode-bidi:embed}*[DIR="rtl"]{方向：rtl;unicode-bidi:embed}/*这些标签或属性都不常用*/@mediaprint{h1{page-break-before:always}h1,h2,h3,h4,h5,h6{page-break-after:avoid}ul,ol,dl{page-break-before:avoid}/*对于打印分页时的设置，不常用*//*以下都是基于标签选择器，标签选择器有比class和id选择器的权重低。因此，用户自定义样式，无论是使用标签、类还是id，都可以覆盖默认的标签选择器*/Browserdefaultstyle先说说样式最大的体验，这个很重要。需要从概念上重新认识html和css。以前总以为浏览器本身就知道各种html标签，会根据规则设置标签的外观。比如p是分块显示，ul有margin-left，h1加粗显示……我以前一直以为这些标签都是默认显示的方法，跟css没有关系。它是由浏览器本身完成的。css设置网页样式，加载后渲染。现在我知道这个想法是错误的。其实浏览器加载完html后，只是为了一件事生成一个dom树。浏览器将html变成dom树结构，完成html的结构化。至于view的后续渲染，p是一个block，br是一个换行符，这是融合了css之后的。而浏览器集成css是另一条路线，它与解析html是分开的。这里的“css”包含了浏览器的默认样式。可以结合下图来理解：一句话，浏览器把加载的html变成了dom树，但是此时没有显示样式。所以显示的样式都是css定义的，浏览器只会通过css渲染视图样式。2、为什么块元素p、h1、ul、div默认都是分块显示的，这里有定义。所以，不要说div天生就是块——这句话应该换成：浏览器的默认样式自然规定div是块——这就是为什么div是块！它是由默认样式指定的，而不是由浏览器的内核指定的。默认情况下，没有块的元素显示为内联。3.display:list-item我们在使用display的时候，常用的取值有：inline/block/inline-block，list-item是不用的。那么这里list-item的作用是什么呢？我们不妨自己尝试一下：看看你看到没有，ul-li中的效果出现了，如果加上margin-left，会不会和ul-li一样？那么，为什么ul-li默认会这样显示呢？——list-item是“罪魁祸首”。4.display:table首先给出一个快速的问题：