前端页面架构之Reset

2016-10-03 本文已影响289人黑白度

问题

这篇文章适合所有人阅读，也不需要具备程序开发的功底。如果你是前端开发人员，那么你可能会听过Reset，或者已经在用了。如果你是一个对前端感兴趣的人，也可以快速窥视一个前端开发工程师是如何优化自己的代码，进行代码艺术创造的。

下面简短介绍这张图，左边的红色块是由HTML+CSS编写的。

 <style type="text/css">
       div{border:1px solid red;width: 100px;height: 100px;background-color: red;float: right;}
 </style> 
<body>    
    <div></div>
</body>

右边是开发者工具，可以看到蓝色框上面那段字：element.style;翻译过来是默认样式。用通俗的话来讲，这是控制那个div（红色块）与整个页面（body）之间的上下左右间隔为8px的间隔。

demo

程序员在开发的过程中，难免会遇到诸如此类的问题，那么，程序员是如何解决的呢？Reset.CSS就是一种解决方案。

2：介绍一些全局变量样式，不同浏览器样式不同，有很多样式我们不需要。

为什么要Reset？

从产品角度看，有些样式不需要，那么就需要覆盖掉，如果一个个覆盖，会有大量的冗余代码要写，会有大量的开发量。

什么是Reset

清除默认样式
进行全局样式定义

那么怎么进行reset?

既然浏览器通过标签设置样式，那么我们也通过标签来设置样式，用来覆盖原先我们并不需要的样式。

demo2

两个注意点

初期的时候，就要把这个reset定好。因为reset是全局的属性，假如说项目开发初期的时候没有定好，到了项目中后期，你的css已经写了很多东西了，这样就会导致牵一发动全身。或者说到了项目维护阶段，再去改css，你的回归工作就变得非常繁杂，根据项目设计，把绝大多数样式用标签设置好
在引入css 文件的时候，一定要在第一位。
如果是内嵌的样式，reset也要写在第一位，如果不按照顺序，就会起不到作用。

我的Reset

这个reset方案并不是全能的，因为产品需求不同。所以应该根据自己的产品，制定自己的reset.

/*Reset*/
html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;font-weight:normal;}
html,body,fieldset,img,iframe,abbr{border:0;}
i,cite,em,var,address,dfn{font-style:normal;}
[hidefocus],summary{outline:0;}
li{list-style:none;}
h1,h2,h3,h4,h5,h6,small{font-size:100%;}
sup,sub{font-size:83%;}
pre,code,kbd,samp{font-family:inherit;}
q:before,q:after{content:none;}
textarea{overflow:auto;resize:none;}
label,summary{cursor:default;}
a,button{cursor:pointer;}
h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;}
del,ins,u,s,a,a:hover{text-decoration:none;}
body{min-width:1280px;}
a,a:hover{color:#333;}