常見標籤的默認屬性值及相互做用——關於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寫法