css reset的重置作用(可取还是不可取,取决于你)

Posted 2020-08-05 月半的我们

 

一.重置的理由

　　当今流行的浏览器中,有些都是以自己的方式去理解css规范,这就会到只有的浏览器对css的解释与设计师的css定义初衷相冲突,使得网页的样子在某些浏览器下能正确按照设计师的想法显示.,但是有些浏览器却没有按照设计师想要的样子显示出来,这就导致浏览器的兼容性问题

　　所以,通过重置button标签的css属性,然后再将它统一定义,就可以产生相同的显示效果

　　css reset的作用就是让各个浏览器的css样式有一个统一的基准,而这个基准更多的就是"清零"!

以下是一整段的css reset的样式重置信息展示:

 1 html, body, div, span, object, iframe,
 2 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 3 abbr, address, cite, code,
 4 del, dfn, em, img, ins, kbd, q, samp,
 5 small, strong, sub, sup, var,
 6 b, i,
 7 dl, dt, dd, ol, ul, li,
 8 fieldset, form, label, legend,
 9 table, caption, tbody, tfoot, thead, tr, th, td,
10 article, aside, canvas, details, figcaption, figure, 
11 footer, header, hgroup, menu, nav, section, summary,
12 time, mark, audio, video {
13     margin:0;
14     padding:0;
15     border:0;
16     outline:0;
17     font-size:100%;
18     vertical-align:baseline;
19     background:transparent;
20 }
21 
22 body {
23     line-height:1;
24 }
25 
26 :focus {
27     outline: 1;
28 }
29 
30 article,aside,canvas,details,figcaption,figure,
31 footer,header,hgroup,menu,nav,section,summary { 
32     display:block;
33 }
34 
35 nav ul {
36     list-style:none;
37 }
38 
39 blockquote, q {
40     quotes:none;
41 }
42 
43 blockquote:before, blockquote:after,
44 q:before, q:after {
45     content:‘‘;
46     content:none;
47 }
48 
49 a {
50     margin:0;
51     padding:0;
52     border:0;
53     font-size:100%;
54     vertical-align:baseline;
55     background:transparent;
56 }
57 
58 ins {
59     background-color:#ff9;
60     color:#000;
61     text-decoration:none;
62 }
63 
64 mark {
65     background-color:#ff9;
66     color:#000; 
67     font-style:italic;
68     font-weight:bold;
69 }
70 
71 del {
72     text-decoration: line-through;
73 }
74 
75 abbr[title], dfn[title] {
76     border-bottom:1px dotted #000;
77     cursor:help;
78 }
79 
80 table {
81     border-collapse:collapse;
82     border-spacing:0;
83 }
84 
85 hr {
86     display:block;
87     height:1px;
88     border:0;   
89     border-top:1px solid #cccccc;
90     margin:1em 0;
91     padding:0;
92 }
93 
94 input, select {
95     vertical-align:middle;
96 }

对于上述的代码,我做以下的几点说明:

　　1.该部分是对于浏览器部分的css进行重置,个人认为并非所有的代码都是需要如此的操作出来,毕竟其中含有的很多标签在你写页面的过程中不一定会用到

　　2.根据自己的实际的情况选择适合自己的代码来使用,不要 照抄,这是前辈们总结出来的经验

以上代码也可以简化成下面的代码形式:

1 body, dl, dd, h1, h2, h3, h4, h5, h6, p, form{
2     margin:0;
3 } 
4  ol,ul{
5     margin:0;
6     padding:0;
7 }

根据实际的情况合理的使用相关的reset的代码,因为如果你的css文件本身就比较大的话,增加相关的reset代码也会使得你的css文件变得更大点,对于公司来说,这点是不可取!!!