当你不为html元素设置任何样式时，显示在浏览器上的（比如：元素会显示粗体、
元素有纵向margin、
元素大一倍……）这是为什么呢？
因为浏览器自带一个默认的样式，在html元素未被设置样式时，浏览器会按照自己默认的样式来显示。但是浏览器默认样式的级别是最低的，一旦有其他地方设置了样式，浏览器默认样式就会被覆盖掉。
注意，不同浏览器的默认样式有些地方是不一样的。例如，我们在写css时，都会首先设置 * {margin:0; padding:0;}，这是为何？就是因为有浏览器兼容性问题。干脆，全部弄成0，这样各个浏览器就都统一了。
下面，我们贴出默认样式的代码：
html, address,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 }/*以上列表元素默认状态下一块状显示，未显示的将以内联元素显示，该列表针对HTML4版本，部分元素在XHTML1中将废弃*/li { display: list-item }/*默认以列表显示*/head { display: none }/*默认不显示*/table { display: table }/*默认为表格显示*/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; }/*默认为单元格显示*/caption { display: table-caption }/*默认为表格标题显示*/th { font-weight: bolder; text-align: center }/*默认为表格标题显示，呈现加粗居中状态*/caption { text-align: center }/*默认为表格标题显示，呈现居中状态*/body { margin: 8px; line-height: 1.12 }h1 { font-size: 2em; margin: .67em 0 }h2 { font-size: 1.5em; margin: .75em 0 }h3 { font-size: 1.17em; margin: .83em 0 }h4, p, blockquote, ul, fieldset, form, ol, dl, dir, menu { margin: 1.12em 0 }h5 { font-size: .83em; margin: 1.5em 0 }h6 { font-size: .75em; margin: 1.67em 0 }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; }big { font-size: 1.17em }small, sub, sup { font-size: .83em }sub { vertical-align: sub }/*定义sub元素默认为下标显示*/sup { vertical-align: super }/*定义sub元素默认为上标显示*/table { border-spacing: 2px; }thead, tbody, tfoot { vertical-align: middle }/*定义表头、主体表、表脚元素默认为垂直对齐*/td, th { vertical-align: inherit }/*定义单元格、列标题默认为垂直对齐默认为继承*/s, strike, del { text-decoration: line-through }/*定义这些元素默认为删除线显示*/hr { border: 1px inset }/*定义分割线默认为1px宽的3D凹边效果*/ol, ul, dir, menu, dd { margin-left: 40px }ol { list-style-type: decimal }ol ul, ul ol, ul ul, ol ol { margin-top: 0; margin-bottom: 0 }u, ins { text-decoration: underline }br:before { content: "A" }/*定义换行元素的伪对象内容样式*/:before, :after { white-space: pre-line }/*定义伪对象空格字符的默认样式*/center { text-align: center }abbr, acronym { font-variant: small-caps; letter-spacing: 0.1em }:link, :visited { text-decoration: underline }:focus { outline: thin dotted invert }/* Begin bidirectionality settings (do not change) */
BDO[DIR="ltr"] { direction: ltr; unicode-bidi: bidi-override }/*定义BDO元素当其属性为DIR="ltr"时的默认文本读写显示顺序*/BDO[DIR="rtl"] { direction: rtl; unicode-bidi: bidi-override }/*定义BDO元素当其属性为DIR="rtl"时的默认文本读写显示顺序*/*[DIR="ltr"] { direction: ltr; unicode-bidi: embed }/*定义任何元素当其属性为DIR="ltr"时的默认文本读写显示顺序*/*[DIR="rtl"] { direction: rtl; unicode-bidi: embed }/*定义任何元素当其属性为DIR="rtl"时的默认文本读写显示顺序*/@media print { /*定义标题和列表默认的打印样式*/ h1 { page-break-before: always } h1, h2, h3, h4, h5, h6 { page-break-after: avoid } ul, ol, dl { page-break-before: avoid }}
html, address,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 }/*以上列表元素默认状态下一块状显示，未显示的将以内联元素显示，该列表针对HTML4版本，部分元素在XHTML1中将废弃*/ 为何默认情况下p、h1、ul、div都是block显示，就是这里定义的。所以，不要再说div天生就是block??这句话应该换成：浏览器默认样式规定了div是block！是块元素还是内联元素是由默认样式规定的，不是浏览器的内核规定的。
没有设置block的元素，默认为inline元素。
li { display: list-item }/*默认以列表显示*/我们在使用display时，常用的值一般是：inline/block/inline-block，用不到list-item。那这里的list-item到底有什么作用？我们不妨亲自试一试：
看到没有，出现了ul-li中的效果了吧，如果再加一个margin-left是不是就跟ul-li一样了？
所以，ul-li为什么会默认显示成那种样子？??list-item才是“罪魁祸首”。
table { display: table }/*默认为表格显示*/举一个例子：
上图中，第一个div默认是block，宽度撑满整个页面。第二个div设置了display:table，宽度根据内容而定。这就是“包裹性”。
td, th { display: table-cell; }/*默认为单元格显示*/记得刚学html时候，不会用div + css做多列布局，我就用table做多列布局。而今，你可以用table-cell，像用table一样做多列布局，做出来的效果和table做出来的效果是一模一样的。
button, textarea, input, object, select { display:inline-block; } 能被父容器居中、能设置高度宽度和margin、不会像table或div那样占一正行……??这就是inline-block。（具体可看看设置了该样式元素的表现。）
引用的css文件。
在一些新闻网站中，经常看到可以设置字体大小的快捷菜单，例如下图就是搜狐新闻中的设置。
这些是给一些有视觉障碍的人看的，反正我是没用过，我也有视觉障碍，不过我是通过近视镜来解决的。
其实浏览器也有这样的设置，例如chrome浏览器中，我们就可以设置字号和字体。
用户在这里设置了字体和字号之后，它们会覆盖掉浏览器默认的样式。
本篇内容节选自《CSS知多少》
Wie richte ich WeChat so ein, dass meine Zustimmung erforderlich ist, wenn mich jemand zu einer Gruppe hinzufügt?
Lösung für das Zurücksetzen der Verbindung
Welche Server sind von der Registrierung ausgenommen?
Gründe, warum der Zugriff auf eine Website zu einem internen Serverfehler führt
Was ist der Handel mit digitalen Währungen?
Verwendung der Kalenderklasse in Java
Kosten für die Servermiete
Registrierungsfreier CDN-Beschleunigungsdienst
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
