常见标签的默认属性值及相互做用——关于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写法