当今流行的浏览器(如:Firefox、Opera、Internet Explorer、Chrome、Safari等等)中,有一些都是以自己的方式去理解CSS规范,这就是的相同的代码相同的页面在不同的浏览器中可能会渲染出不同的效果。
为解决这个问题,一些前辈们想到了一种避免浏览器兼容性问题的方法,那就是CSS Reset,也可以叫做CSS重设、CSS复位、默认CSS、CSS重置等。可以理解为CSS重设就是由于各种浏览器解释CSS样式的初始值有所不同,导致开发时在没有定义某个CSS属性时,不同的浏览器会按照自己的默认值来为没有定义的样式赋值,使得不同的浏览器渲染出不同的效果,我们先定义好一些CSS样式,来让所有浏览器都按照同样的规则解释CSS,这样就能避免发生这种问题。
每个做前端的建议都要配置一套适合自己的reset.css,可以有效的规避一些开发风险,减少开发工作量,事半功倍。
下面是我总结的一套自己的reset.css,分享一下。
body,html{
width: 100%;
height: 100%;
font-size: 62.5%;/*这样会使1rem=10px;或者子元素的1em=10px*/
}
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,a,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline: 0;
box-sizing: border-box;
position: relative;
}
input,button,textarea,select{
outline: 0;
box-sizing: border-box;
}
h1,h2,h3,h4,h5,h6,em,i {
font-weight: 100;
font-style: normal;
}
ul,ol,li {
list-style-type: none;
}
a {
text-decoration: none;
}
button:active{
transform: translateY(2px);
}
生命不在长而在于好,只要每一次尽力的演示,都值得鼓励与喝采。
网友评论