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

 

一.重置的理由css

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

  因此,经过重置button标签的css属性,而后再将它统必定义,就能够产生相同的显示效果canvas

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

如下是一整段的css reset的样式重置信息展现:ide

 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 }

对于上述的代码,我作如下的几点说明:spa

  1.该部分是对于浏览器部分的css进行重置,我的认为并不是全部的代码都是须要如此的操做出来,毕竟其中含有的不少标签在你写页面的过程当中不必定会用到设计

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

以上代码也能够简化成下面的代码形式:orm

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文件变得更大点,对于公司来讲,这点是不可取!!!htm

相关文章
相关标签/搜索