常見標簽的默認屬性值及相互作用——關於CSS reset的思考

在現在的網站設計中使用reset.css用重置整個站點的標簽的CSS屬性的做法很常見，但有時候我們已經為了reset而reset，我們經常看到這樣的reset代碼

div{
  padding:0px;
  margin:0px;
}

span{
  margin:0px;   
}

 其實大部分CSS reset是沒必要的，多寫了只會增加瀏覽器在渲染頁面是的負擔，當然有同學會說CSS reset還是有其意義的，這個我也承認，但是我們可以通過了解一些標簽的CSS屬性的默認值來避免過度的reset

標簽屬性默認值

由於大部分的CSS reset都是針對padding、border、margin，我們就先看看常用標簽的這三個屬性的默認值(Chrome)

標簽	padding	border	margin
html	0	0	0
body	0	0	8
form	0	0	0
div	0	0	0
span	0	0	0
p	0	0	16
th、td	1	0	0
input(text、password)	1	2	2
input(checkbox、radio)	0	0	3 0.5ex
input button	8	0	2
textarea	2	1	2
select	0	0	2
option	0	0	0
h1~h6	0	0	?px 0
ul、ol	0 0 0 40px	0	16px 0
li	0	0	0
dl	0	0	16px 0
dt	0	0	0
dd	0	0	0 0 0 40px
label	0	0	0
em、strong	0	0	0
label	0	0	0
img	0	0	0
a	0	0	0

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

雖然只是在Chrome下，但通過上面表可以看出很多標簽默認的padding、border、margin就是0，如果還在CSS reset中寫一遍豈不是畫蛇添足了，除了瀏覽器的默認值，還有一些標簽的屬性值得我們注意。

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

1. 行內元素不會應用width屬性，其長度是由內容撐開的
2. 行內元素不會應用height屬性，其高度也是由內容撐開的，但是高度可以通過line-height調節
3. 行內元素的padding屬性只用padding-left和padding-right生效，padding-top和padding-bottom會改變元素范圍，但不會對其它元素造成影響
4. 行內元素的margin屬性只有margin-left和margin-right有效，margin-top和margin-bottom無效
5. 行內元素的overflow屬性無效，這個不用多說了
6. 行內元素的vertical-align屬性無效（height屬性無效）

看個例子

<div style="background-color: #a44;">
        <span style="padding:4px; margin:8px; height: 500px; width:1000px; background-color:#0e0;">123456789123456789</span>
    </div>

    <div style="background-color: #a44;">
        <span style="padding:4px; margin:8px; height: 500px; width:1000px; background-color:#0a0;">123456789</span>
    </div>

 

通過例子可以看出，我們對span設置的width和height屬性並沒有生效，margin-top和margin-bottom無效，padding-top和padding-bottom會改變元素范圍（背景區域變大了），但並沒有影響下面元素位置

在CSS reset中我們不應該設置對行內元素無效的屬性

一些互斥的屬性

• 對於absolute和fixed定位的固定尺寸（設置了width和height屬性值）元素，如果設置了top和left屬性，那么設置bottom和right值就沒有作用了，應該是top和left優先級高，否則同時寫了瀏覽器怎么知道按照誰定位
• 對於absolute和fixed定位的元素，如果設置了top、left、bottom、right的值后margin屬性也就不起作用了
• 對於absolute和fixed定位的元素，如果設置了top、left、bottom、right的值后float屬性同樣會失效
• 塊元素如果設置了float屬性或者是absolute、fixed定位，那么vertical-align屬性不再起作用 

其它

常規情況下塊元素的width:100%，pre等很少用到的元素，個人感覺用的時候再頁面寫就可以，沒必要加到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;
}

 

寫的很精簡了，但是我感覺可以把一些不常用的標簽去掉，縮寫成這樣

html, body, div, span, iframe,
h1, h2, h3, h4, h5, h6, p, a, 
del, dfn, em, img,
small, strong,
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, section, summary
 {
    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;
}

 

如果對CSS reset 有興趣可以看看http://www.cssreset.com/，上面有很多流行的CSS reset寫法