首页 > 代码库 > css reset的重置作用(可取还是不可取,取决于你)
css reset的重置作用(可取还是不可取,取决于你)
一.重置的理由
当今流行的浏览器中,有些都是以自己的方式去理解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文件变得更大点,对于公司来说,这点是不可取!!!
css reset的重置作用(可取还是不可取,取决于你)
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。