css 重置样式表

前言：

 关于css样式重置 ，相信对于接触过前端的人都知道在开始编写属于自己的代码之前都需要完成这一步。不过，我还是想说说自己对css重置的理解。希望可以利人利己（哈哈，对，就素介么任性！）

首先，我觉得像我一样对于理解概念无感，容易混淆的前端小白要清楚什么是css重置样式，就要弄清楚两个概念：CSS Reset以及css重置（其实概念很相近，但是还是有所区别的），不然傻傻只知道css样式要重置，知其然不知其所以然，这对于我这种对概念有点强迫症的人来说，不搞清楚实在是太痛苦了。（哈哈哈，闲话少说，进入正题）

就我自己的理解而言，对于css重置样式表可以分为下面3个问题：

（1）什么是CSS Reset ？要用到CSS Reset的原因是？

（2）为什么要重置CSS？

好啦，问题抛出了，我也该说说我自己的理解了：（1）CSS Reset简单来讲就是根据我们自己编写页面的需求重新设置css属性（废话，这个当然大家都知道！可是我重点想说的是css reset的原因耶~）css reset主要是因为html标签在浏览器中都有各自的默认样式，比如： p 标签有上下边距，strong标签有字体加粗样式，em标签有字体倾斜样式。不同浏览器的默认样式之间也会有差别，例如ul默认带有缩进的样式，在IE 下，它的缩进是通过margin实现的，而Firefox下，它的缩进是由padding实现的。在切换页面的时候，浏览器的默认样式往往会给我们带来麻 烦，影响开发效率。所以解决的方法就是一开始就将浏览器的默认样式全部去掉，更准确说就是通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。最最简 单的说法就是把浏览器提供的默认样式覆盖掉！这就是CSS reset。

（2）涉及到为什么要重置css，这点要从浏览器出发，因为不同的浏览器对于html标签的解释各不相同，重置css可以使得html标签在各个浏览器下产生相同的表现效果。

我觉得这个时候有必要贴出css重置的样式代码，不然说了半天的废话岂不是毫无用处？毕竟咬文嚼字不大适合我们嘛。

@charset "utf-8";
/*
  Document   : CSS样式初始化
  Created on : 2016. 8. 7,09:41:00
  Author :
  Description:
  CSS样式表的初始化，全局样式设置。部分样式属性请根据具体页面重置其属性
      导入方式：<link href="css/common.css" rel="stylesheet" type="text/css" /> */

/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button {margin:0;padding:0}  /* 初始化标签在所有浏览器中的margin、padding值 */
fieldset,img {border:0 none}  /* 重置fieldset（表单分组）、图片的边框为0*/
dl,ul,ol,menu,li {list-style:none}   /* 重置类表前导符号为onne,menu在HTML5中有效 */
blockquote, q {quotes: none}   /* 重置嵌套引用的引号类型 */
blockquote:before, blockquote:after,q:before, q:after {content:'';content:none}  /* 重置嵌套引用*/
input,select,textarea,button {vertical-align:middle}  /* 重置表单控件垂直居中*/
button {border:0 none;background-color:transparent;cursor:pointer}  /* 重置表单button按钮效果 */
body {background:#fff}   /* 重置body 页面背景为白色 */
body,th,td,input,select,textarea,button {font-size:12px;line-height:1 ;font-family:"微软雅黑", "黑体","宋体";color:#666} /* 重置页面文字属性 */
a {color:#666;text-decoration:none}  /* 重置链接a标签 */
a:active, a:hover {text-decoration:none}   /* 重置链接a标签的鼠标滑动效果 */
address,caption,cite,code,dfn,em,var {font-style:normal;font-weight:normal}  /* 重置样式标签的样式 */
caption {display:none;}    /* 重置表格标题为隐藏 */
table {width:100%;border-collapse:collapse;border-spacing:0;table-layout:fixed;}    /* 重置table属性 */
img{vertical-align:top}  /* 图片在当前行内的垂直位置 */
 
/* 页面设置 */
 
  /* 取消a标签点击后的虚线框 */
a {outline: none;}  
a:active {star:expression(this.onFocus=this.blur());}
 
 /* 设置页面文字等在拖动鼠标选中情况下的背景色与文字颜色 */
/* 
::selection {color: #fff;background-color: #4C6E78;}    
::-moz-selection {color: #fff;background-color: #4C6E78;} 
*/

/*清除浮动*/
.clear{clear: both;}

/*清除浮动--推荐使用*/
.clearfix:before,.clearfix:after{content: '';display: table;}
.clearfix:after{clear: both;}