Css Reset 复位相关资料整理

PS：

*{
padding:0;
margin:0;
}

这就是最常用的Css Reset，但是这里会有很多问题。

原文前部分说了很多关于Css,以及各浏览器的css规则的不同,而制定"CssReset"也是为了兼容与统一,正确有效的使用"Css Reset"可以在某种程度上节约时间与金钱.

非常感谢Perishable的整理与归纳

下面是关于几类Css Reset的简单介绍,本人能力有限.只能理解大概意思,还请各位看官见谅.

Minimalistic Reset [ Version 1 ]
相信这一段你经常看到.而且也是我们经常用到的

*{
padding:0;
margin:0;
}

Minimalistic Reset [ Version 2 ]
border:0的设计有些不靠谱了

*{
padding:0;
margin:0;
border:0;
}

Minimalistic Reset [ Version 3 ]
当然这个也是不推荐的.会跟某些默认样式有冲突

复制代码

代码如下:
*{
outline:0;
padding:0;
margin:0;
border:0;
}

Condensed Universal Reset
这是作者当前比较钟意的一种写法.保证了相对普遍浏览器样式的统一性.

复制代码

代码如下:
*{
vertical-align:baselinebaseline;
font-weight:inherit;
font-family:inherit;
font-style:inherit;
font-size:100%;
border: 0none;
outline:0;
padding:0;
margin:0;
}

Poor Man’s Reset
其实这也是我们常用的一类Css Reset.对字体的大小复位,以及图片链接的边框处理.
也经常在某些站点看到

复制代码

代码如下:
html, body{
padding:0;
margin:0;
}
html {
font-size:1em;
}
body {
font-size:100%;
}
a img, :link img, :visited img{
border:0;
}

Shaun Inman’s Global Reset
作者认为Shaun写这类的Css Reset是有某种目的性.
而且这类规则是针对的是某些重要的常用浏览器.
比如ie,firefox等

复制代码

代码如下:
body, div, dl, dt, dd, ul, ol, li, h1, h2,h3, h4, h5, h6,pre,
form, fieldset, input, p, blockquote, table, th, td, embed, object{
padding:0;
margin:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset, img, abbr{
border:0;
}
address, caption, cite, code, dfn,em,
h1, h2, h3, h4, h5, h6, strong, th, var{
font-weight:normal;
font-style:normal;
}
ul {
list-style:none;
}
caption, th{
text-align:left;
}
h1, h2, h3, h4, h5, h6{
font-size:1.0em;
}
q:before, q:after{
content:'';
}
a, ins{
text-decoration:none;
}

上一篇：div 内table 居中实现代码

下一篇：编写跨浏览器兼容的 CSS 代码

发表评论

共有条评论