reset浅谈
更新日期:
文章目录
谈谈实用reset
最近尝试着结合cms来做套完整的网站。刚准备敲的时候发现自己没有一套完整的reset.css表。于是,要为自己整理一份属于自己的reset表。花了点时间推出了reset0.0.1。
/*有默认margin以及padding的标签*/ /*ul,ol,p,blockquote*/ /*有默认margin的标签*/ /*body,dl,dd,h1,h2,h3,h4,h5,h6,pre*/ /*有默认padding的标签*/ /*legend*/ /*有默认margin,padding,border的标签*/ /*fieldset*/ /*有默认padding,border的标签*/ /*input,textarea,button,th,td*/ /*有默认border的标签*/ /*table*/ /*需知的一些标签默认属性*/ /* textarea -> resize属性 * 改变光标 -> cursor属性 * table -> border-collapse */看到这里你会不会有一种新天地的feel。我这里对各个标签分的很细跟大多数网上的reset表是完全不同的,这里也不去评论其他的reset表。推荐大家看下张鑫旭写的CSS reset的重新审视。
- 作为一名前端工程师,我们常把细节、性能优化挂在嘴边。因此从这些角度出发,我更认为自己有必要写这样一份有助于我们工作的reset表。
附表一份
PC端reset表 body{ font: 16px/1.5 sans-serif arial "微软雅黑"; margin: 0; } p,blockquote{ margin: 0; padding: 0; } dl,dd,h1,h2,h3,h4,h5,h6,pre{ margin: 0; } legend{ padding: 0; } fieldset{ margin: 0; padding: 0; border: none; } a{ text-decoration: none; } ul,ol{ margin: 0; padding: 0; list-style: none; } /*清除浮动通用方法*/ .clearfix{ zoom:1; } .clearfix:after{ display: block; content: ''; clear: both; overflow: hidden; height: 0; }
移动端reset表
原谅宝宝的懒惰吧(这版权不属于自己),让我做一个clever lazy boy! HOHO
*{
-webkit-tap-highlight-color: transparent;
box-sizing: border-box;
margin: 0;
padding: 0;
}
div{
-webkit-tap-highlight-color: transparent;
user-select: none;
-webkit-user-select: none;
}
html,body{
/*min-height: 1008px;*/
width: 100%;
height: 100%;
overflow-x: hidden;
user-select: none;
-webkit-user-select: none;
background-color: #000;
font-family: 'MicrosoftYaHei', '微软雅黑', 'STHeitiSC';
}
.fl{float: left;}
.fr{float: right;}
.clearfix{
zoom:1;
}
.clearfix:after{
display: block;
content: '';
clear: both;
overflow: hidden;
height: 0;
}
ul,ol,li{list-style-type: none;}
a{text-decoration: none;}
img{border: none;outline: none;}
input{opacity: 1;outline: none;background: none;border: none;font-size: 30px;text-align: center;}

