“1、user agent stylesheet”问题

昨天在用F12调试css的时候，发现了自己写的很多样式都被这个“user agent stylesheet”覆盖了，写的样式都无效了，垂死挣扎了很久，还是未果o(╥﹏╥)o… …

【就是这样式的 ↓↓↓】

2、user agent stylesheet”缘由

        多有不解，然后摒着有不懂，问度娘的原则，马不停蹄的去找了缘由，得知，这个“user agent stylesheet”，中文翻译是：用户代理样式表。

        原因是：在写网页时，有时候会发现自己写的样式根本不起作用，是因为user agent stylesheet的样式将我们写的样式给覆盖了，user agent stylesheet是浏览器默认样式表，浏览器的css样式渲染了我们的html，所以才会出现这种问题。

3、user agent stylesheet”解决办法

        正因为出现这种问题，所以我们在写前台页面的时候，首先要对前台页面初始化，这不仅仅是解决方法之一，也是一个很好的习惯喔。
        方法一：写reset.css或者normalize.css；
eg:

/* 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,textarea,input,button,select,keygen,legend{font:12px/1.14 arial,\5b8b\4f53;color:#333;outline:0;} body{background:#fff;} a,a:hover{color:#333;}

写这个的**目的是减少浏览器在默认行高，边距和标题字体大小等方面的不一致性**。

        **方法二：由于user agent stylesheet的优先级很低，所以自己写样式覆盖即可；**eg：可以重新定义div的样式，↓↓↓

总结：

        其实还是推荐大家去使用第一种方法的，也是要养成好的习惯对不咯？为了各种浏览器的兼容性，还是尽量去使用CSS初始化代码比较好些，引发这个问题完全是源于我的不细心，我一个标签写错了，也没报错，找老半天了，害~，老是制造bug，一遇到bug，又慌得雅痞，唉，前端之路还任重而道远呐(灬ꈍ ꈍ灬)！！！