HTML4的默认样式

来源：https://www.w3.org/TR/CSS21/sample.html

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; unicode-bidi: embed }
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 }
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, select   { display: 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, tr      { vertical-align: inherit }
s, strike, del  { text-decoration: line-through }
hr              { border: 1px inset }
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"; white-space: pre-line }
center          { text-align: center }
: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="rtl"]  { direction: rtl; unicode-bidi: bidi-override }

*[DIR="ltr"]    { direction: ltr; unicode-bidi: embed }
*[DIR="rtl"]    { direction: rtl; unicode-bidi: embed }

@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控件组】, form,
frame, frameset,
h1, h2, h3, h4,
h5, h6, noframes,
ol, p, ul, center,
dir, hr, menu【菜单】, pre { display: block; unicode-bidi: embed }

没有显示设置display的元素为inline内联元素，因为display的默认值就是inline。
unicode-bidi属性详情请戳：direction和unicode-bidi

内联块状元素

button, textarea,input, object,select { display:inline-block; }

加粗元素

h1, h2, h3, h4,
h5, h6, b,
strong { font-weight: bolder }
th { font-weight: bolder; text-align: center }

h1, h2, h3, h4,h5, h6除了加粗还有个默认样式是display: block
b, strong的区别请戳：b/strong和i/em的区别

斜体元素

i, cite, em,var, address { font-style: italic }

i, em的区别请戳：b/strong和i/em的区别
address除了斜体外还有个默认样式是display:block。

文本元素

big             { font-size: 1.17em }
small, sub, sup { font-size: .83em }
sub             { vertical-align: sub }
sup             { vertical-align: super }
s, strike, del  { text-decoration: line-through }
u, ins          { text-decoration: underline }
abbr, acronym   { font-variant: small-caps; letter-spacing: 0.1em }

html5不支持<strike>和<s>了，可用del代替
acronym在firefox下默认会有一个abbr[title], acronym[title] { border-bottom: 1px dotted;}，但在chrome中没有，这会导致在给<acronym>标签title属性后，浏览器显示不同。

列表元素

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 }
li { display: list-item }

虽然这里列表的缩进用的是margin-left，但是firefox和chrome其实都是用padding来实现的，firefox用的 -moz-padding-start: 40px;chrome浏览器用的-webkit-padding-start: 40px;。IE不同版本不一样，低版本用的margin，高版本逐渐加入padding。所以需要reset。

伪类和伪元素

:before, :after { white-space: pre-line }
:link, :visited { text-decoration: underline }
:focus          { outline: thin dotted invert }

火狐下用的:focus的默认样式为outline: 1px dotted; 不设定颜色，颜色使用默认值。
chrome的处理方式又不一样，导致input输入框在获取焦点时样式有差异：

表格元素

table           { display: table }
table           { border-spacing: 2px; }/*默认table中相邻单元格的水平和垂直间隔都是2px*/
tr              { display: table-row }
thead           { display: table-header-group }
tbody           { display: table-row-group }
thead, tbody,tfoot           { vertical-align: middle }/*td继承tbody的vertical-align属性，th继承thead的vertical-align属性*/
tfoot           { display: table-footer-group }
col             { display: table-column }
colgroup        { display: table-column-group }
td, th          { display: table-cell; }
td, th          { vertical-align: inherit }
th              { font-weight: bolder; text-align: center }
/* table中的标题默认文字粗体和文字水平垂直居中，垂直居中是继承的 */
caption【表格标题】         { display: table-caption } 
caption         { text-align: center }

display:table 和 block 最大的区别在于：包裹性——block元素宽度和父容器相同，而table宽度根据内容而定。

<div style="display:block;background-color:green;">
    display:block;
</div>
<div style="display:table;background-color:purple;">
    display:table;
</div>

标题元素

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 }

bidi元素

/* Begin bidirectionality settings (do not change) */
BDO[DIR="ltr"]  { direction: ltr; unicode-bidi: bidi-override }
BDO[DIR="rtl"]  { direction: rtl; unicode-bidi: bidi-override }

*[DIR="ltr"]    { direction: ltr; unicode-bidi: embed }
*[DIR="rtl"]    { direction: rtl; unicode-bidi: embed }

打印元素

@media print {
  h1            { page-break-before: always }
  h1, h2, h3,
  h4, h5, h6    { page-break-after: avoid }
  ul, ol, dl    { page-break-before: avoid}
}

参考：[浏览器默认样式(user agent stylesheet)+cssreset]
(https://www.cnblogs.com/starof/p/4462355.html)