vue或者react的css样式初始(css样式重置)——reset.css与normalize.css

前言

为什么要样式重置即 css reset ？
原因：不同的浏览器在实现w3c标准过程中，对各个元素的实现是不一致的。这就导致了同一个页面在不同的浏览器中比如ie和chrome中，表现有差异。为了解决这个问题，即不同浏览器中表现的一致性，需要使用css reset。

实现

1. 初学

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

   优缺点：简单粗暴，迅速实现，但是* 通配符需要将所有标签遍历，但标签数量和种类较多的时候，会增加客户端的负担，影响网页性能。

2. 常用
   全局引入自定义经典的 reset.css 文件，网上有许多优秀的 reset.css 提供参考

   html,body,div,span,applet,object,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;
   	font-weight:normal;
   	vertical-align:baseline;
   }
   /* HTML5 display-role reset for older browsers */
   article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
   	display:block;
   }
   ol,ul,li {
   	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;
   }
   th,td {
   	vertical-align:middle;
   }
   /* custom */
   a {
   	outline:none;
   	color:#16418a;
   	text-decoration:none;
   	-webkit-backface-visibility:hidden;
   }
   a:focus {
   	outline:none;
   }
   input:focus,select:focus,textarea:focus {
   	outline:-webkit-focus-ring-color auto 0;
   }
   

3. 最优（个人认为）
   新的CSS工具——normalize.css
   其最大的好处就是Normalize.css的作用是保留有用的浏览器默认样式，而不是从每个元素中删除所有默认样式。

   1. 安装

   npm install --save normalize.css
   

   2. 引入

   import 'normalize.css/normalize.css'