瀏覽器默認樣式(user agent stylesheet)+cssreset

時間 2019-11-12

標籤瀏覽器默認樣式 user agent stylesheet cssreset 欄目瀏覽器简体版

原文原文鏈接

每種瀏覽器都有一套默認的樣式表，即user agent stylesheet，在寫網頁時，沒有指定的樣式，按瀏覽器內置的樣式表來渲染。這是合理的，像word中也有一些預留樣式，可讓咱們的排版更美觀整齊。不一樣瀏覽器甚至同一瀏覽器不一樣版本的默認樣式是不一樣的。這才帶來了不少的坑，讓你們用cssreset去填。。css

1、瀏覽器默認樣式

瞭解各瀏覽器的默認樣式能讓咱們對每條Reset規則的寫法作到心中有數，對咱們瞭解瀏覽器的差別，寫各瀏覽器兼容的代碼也有很大幫助。html

因此先看看瀏覽器默認樣式長什麼樣：前端

FF下的瀏覽器默認樣式能夠經過：resource://gre-resources/html.css來查看。html5

不一樣瀏覽器的默認樣式可能不一樣，點我查看各個瀏覽器的默認樣式。css3

2、HTML4默認樣式

掌握html標籤的css屬性的默認值，可讓咱們無論是在重置樣式仍是在自定義樣式的時候都更加遊刃有餘。git

w3官網上有一份HTML4默認樣式的附錄，點我查看。同時有一句話說：This appendix is informative,not normative。github

這只是一份資料性的附錄，而非規範性附錄，可能也不適合做爲規範或標準。可是瀏覽器何其多，我的以爲能夠以此做爲切入點了解默認樣式。而且這份樣式是基於對現有UA的大量調查而獲得的，描述了全部html4元素的典型的排版。web

View Code

如下爲對這些瀏覽器默認樣式的一點認識和思考：面試

一、哪些元素是塊級元素？

常常在面試時被問到哪些是塊級元素，哪些是行級元素？經過html4默認樣式能夠看到如下這些標籤都是塊級元素。chrome

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。

二、display:inline-block

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

display 的inline-block集合了inline元素和block元素的一些特性，能夠在一行內顯示多個（inline特性），能夠設置寬高等（block特性）。常常見的能夠在一行內放幾個button之類的效果，就是由於它的display屬性爲inline-block。

三、哪些元素是加粗的？

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

可見除了hx和strong外，還有th是加粗的。

可能面試會被問到b和strong的區別是什麼？i和em的區別是什麼？

由於默認的顯示效果上b和strong是同樣的，i和em是同樣的。

HTML4中：

em:表示emphasized text

strong：表示strong emphasized text，因此strong的強調程度更強。

在HTML5中strong的定義改爲了important text。

<em>表示內容的着重點，是局部的強調，視覺上效果是閱讀到某處纔會注意到；<strong>表示內容的重要性，是全局的強調，一眼望去，馬上凸顯出來的關鍵語句。斜體和粗體剛好知足了這兩種視覺效果，所以成了瀏覽器給em和strong的添加的默認效果。

而b和i僅僅是表示"這裏加粗顯示"和"這裏斜體顯示"。瞭解更多，見知乎。

四、哪些元素是斜體的？

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

i很少說，

cite一般用在<q>或者<blockquote>標籤中，內容爲標題，斜體顯示。

em強調某個文本，效果和i同樣，若是隻是想用斜體的效果就用i。

address也是同樣的，但它除了斜體外還有個默認樣式是display:block。

還有一個dfn也是斜體顯示，第一次用到某個術語時，用以區分，不多用。

五、文本尺寸相關

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 }

big大小，small小寫，small小寫且顯示文字爲上標，sub小寫且顯示文字爲下標，而和刪除線相關的有s,strike,和del。

可是html5不支持<strike>和<s>了，可用del代替，<del>用的時候和<ins>配合使用，表示更新和修改。

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 }

這裏能夠看出爲何ul和ol默認會有左間距以及間距大小。

雖然這裏列表的縮進用的是margin-left，可是firefox和chrome其實都是用padding來實現的，firefox用的 -moz-padding-start: 40px;chrome瀏覽器用的-webkit-padding-start: 40px;。IE不一樣版本不同，低版本用的margin，高版本逐漸加入padding。因此須要reset。

用div和span模擬實現一下列表項目的效果，對比看看發現效果都來自display: list-item;

<style type="text/css">
ul{
    background-color: green;
}
div{
/*    margin-left: 40px;*/
    padding-left: 40px;
    background-color: purple;
}
div span{
    display: list-item;
}
</style>
----------------------------------------------------------
<body>
<ul>
<li>內容</li>
<li>內容</li>
<li>內容</li>
<li>內容</li>
</ul>
<div>
<span>內容</span>
<span>內容</span>
<span>內容</span>
<span>內容</span>
</div>
</body>

效果：

這也給咱們用ul li作菜單一個很好的提示。以前多是用float:left而後設置list-style-type:none來進行，如今給出一種新的方案：

代碼：

<style>
ul{
    padding-left: 0;
    margin-left: 0;
}
ul li{
display: inline;/*默認li的display爲list-item，如今設置爲inline就不須要去設置浮動清除樣式等*/
}
li~li:before{ /*E~F：css3選擇器，匹配任何在E元素以後的同級F元素*/
    content: "|";
    color: red;
    padding-right: 5px;
}
li a{
    display: inline-block;
    text-decoration: none;
    background-color: orange;
}
</style>

<body>
<ul>
<li><a href="">title1</a></li>
<li>title2</li>
<li>title3</li>
<li>title4</li>
<li>title5</li>
</ul>
</body>

效果：

七、僞類和僞元素

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

火狐下用的:focus的默認樣式爲outline: 1px dotted; 不設定顏色，顏色使用默認值。
chrome的處理方式又不同，致使input輸入框在獲取焦點時樣式有差別：

八、table相關

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 }

在這裏給出一個默認table效果的例子【爲效果明顯加了1px的border】。

View Code

a、display:table 和 block 最大的區別在於：包裹性——block元素寬度和父容器相同，而table寬度根據內容而定。

<div style="display:block;">
display:block;
</div>
<div style="display:table;">
display:table;
</div>

b、代碼裏不寫<tbody>瀏覽器顯示時會自動補全的，因此咱們看到的table中th單元格都是水平垂直居中且加粗，td單元格都是垂直居中的（水平用默認值left），有人也利用用這個來作垂直居中。

c、用table-cell代替float作多列布局

有人使用table-cell進行多列布局和兩欄自適應佈局。我沒研究過很少說。

<body >
<div style="display:table-cell;width:20%;">
第一列內容
</div>
<div style="display:table-cell;">
第二列
</div>
<div style="display:table-cell;width:20%;">
第三列
</div>
</body>

九、標題相關

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 }

因此標題系列除了font-weight加粗外還有font-size設置和margin預留。

十、其餘元素設置的樣式

head            { display: none }

默認不顯示，就像<script>腳本同樣，默認在瀏覽器下不顯示。

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

IE六、7中body的頁邊距用的是margin: 15px 10px;IE八、9之後改成margin: 8px;考慮兼容性的時候要重置。
line-height:1.12 貌似在各瀏覽器默認樣式中並無。

h4, p,
blockquote, ul,
fieldset, form,
ol, dl, dir,
menu            { margin: 1.12em 0 }

因此p處理display：block外還設置了上下margin，這樣表現就是p標籤段前段後有段邊距。

blockquote      { margin-left: 40px; margin-right: 40px }

這樣就實現了<blockquote>將內容文字兩邊向中間縮排，一組標籤，縮排一個單位，兩組標籤，縮排兩個單位。

實現相似這樣的效果：

代碼：

<body >
 這是正文 <blockquote style=""> 這是一個很長很長很長很長很長很長的引用。1 <blockquote style=""> 這是一個很長很長很長很長很長很長的引用。2 <blockquote style=""> 這是一個很長很長很長很長很長很長的引用。3 </blockquote> </blockquote> </blockquote> 這是正文
</body>

hr              { border: 1px inset }

爲何一般見到的<hr/>默認是那樣的，就是由於這條樣式border:1px inset加上和其它元素組合定義中的display:block。

br:before       { content: "\A"; white-space: pre-line }

可見br的white-space屬性爲：pre-line，因此它對空白符的處理是合併空白符序列，可是保留換行符。

但是這個content:"\A"，不知道幹嗎的。像咱們一般見的content屬性都是和:before，:after僞元素來配合使用，插入生成的內容；也可能在<meta>中見到content="text/html; charset=utf-8"這樣的寫法。我仍是沒有在別處再見到content了，難道此中另有深意？我在firefox的瀏覽器默認樣式中也沒看到這個東東，因此也就不糾結了。

十一、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}
}

這是對於默認打印頁面時的設置，不經常使用。

若是要在打印頁面時，有超連接的打印出連接的地址，能夠這樣設置：

<style>
@media print {
  a[href]:after {
    content: " (" attr(href) ") ";
  }
}
</style>
-----------------------------
<body>
<a href="http://www.baidu.com">百度</a>
</body>

效果以下：

3、使用cssreset處理瀏覽器兼容問題

一、行內元素的width,height,padding,margin

a、行內元素不會應用width屬性，其寬度由內容撐開。

b、行內元素不會應用height屬性，其高度也是由內容撐開的，可是高度能夠經過line-height調節。

c、行內元素的padding屬性只對padding-left和padding-right生效，padding-top和padding-bottom會改變元素範圍，但不會對其它元素形成影響。

d、行內元素的margin屬性只對margin-left和margin-right有效，margin-top和margin-bottom無效。

e、行內元素的overflow屬性無效。

f、行內元素的vertical-align屬性無效（height屬性無效）。

對於這些無效的inline屬性值是不須要reset的。

舉例：

<style type="text/css">
.p1{
    background-color: green;
}
.p2{
    background-color: orange;
}
.p1 span{
    background-color:lightblue;
    height:10000px;/*無效*/
    width:2000px;/*無效*/
    padding-left: 50px;
    padding-right: 150px;
    padding-top:10px;/*改變span的範圍，但對其它元素不產生影響*/
    padding-bottom:20px;/*改變該元素範圍，但對其它元素不產生影響*/
    margin-left:10px;
    margin-right: 10px;
    margin-top: 10px;/*無效*/
    margin-bottom: 10px;/*無效*/
}
</style>
--------------------------------------------------------
<body>
<p class="p1">
<span>span標籤內容</span><span>span標籤內容</span>
</p>
<p class="p2">段2內容段2內容段2內容</p>
</body>

可見span對寬高設置無效，margin-top和margin-bottom無效。padding-top和padding-bottom會改變元素範圍但沒有影響下面元素佈局。

在css reset中不該該設置對行內元素無效的屬性。

二、一些互斥的屬性

a、對absolute和fixed元素，設置了width以後，left和right同時存在，只有left生效；不設置width，只有content時，left和right同時生效。一樣，設置了height以後，top和bottom同時存在時，只有top生效；不設置height，只有內容時，top和bottom同時生效。

b、對absolute和fixed元素，float無效。

c、元素設置了float屬性或者是absolute、fixed定位，那麼vertical-align屬性再也不起做用。

三、css reset

CSS reset大神Eric Meyer的寫法：

/**
 * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
 * http://cssreset.com
 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

天貓前端cssreset

View Code

pptv前端cssreset

@charset "utf-8";
body,div,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,code,form,fieldset,legend,button,textarea,table,tbody,tfoot,thead,th,td,article,aside,dialog,figure,footer,header,hgroup,menu,nav,section,time,mark,audio,video{margin:0;padding:0;outline:0;background:transparent;}article,aside,dialog,figure,footer,header,hgroup,nav,section{display:block;}body,button,input,select,textarea{font:12px/1.5 arial,\5b8b\4f53,sans-serif;}h1,h2,h3,h4,h5,h6,button,input,select,textarea{font-size:100%;}address,cite,dfn,em,var{font-style:normal;}code,kbd,pre,samp{font-family:courier new,courier,monospace;}small{font-size:12px;}ul,ol,li{list-style:none;}img{border:none;}a{text-decoration:none;outline:thin none;}a:hover{text-decoration:underline;}table{border-collapse:collapse;border-spacing:0;}.clear{clear:both;}.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}html{-webkit-text-size-adjust: none;}
body{font:12px/1.5 \5FAE\8F6F\96C5\9ED1,tahoma,arial,\5b8b\4f53,sans-serif;}