CSS重置

作者: hunter97 | 来源:发表于2018-08-23 12:34 被阅读0次

  当今流行的浏览器(如: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);
}

生命不在长而在于好,只要每一次尽力的演示,都值得鼓励与喝采。

相关文章

  • CSS:认识 css reset

    什么是css reset.? reset,重置。顾名思义,css reset就是重置样式。 为什么需要css re...

  • HTML对默认样式进行重置或标准化

    使用css重置 rest.css 使用normalize.css重 normalize.css

  • 查询类布局模板

    html mixin css 查询和重置

  • Css3解决塌陷和元素居中的代码

    重置样式表-去除默认样式 重置浏览器默认样式,可以使用reset.css和normalize.css。reset....

  • CSS Reset 的来龙去脉

    目录 浏览器的默认样式 三种样式重置方法 硬重置 软重置 个性化重置 Normalize.css 源码解析 总结 ...

  • Html5课堂总结

    /*重置样式*/ *{ margin: 0; padding: 0; } css的重置样式主要是因为html标签在...

  • CSS重置

    当今流行的浏览器(如:Firefox、Opera、Internet Explorer、Chrome、Safari等...

  • CSS 重置

    主要解决标签在不同浏览器显示不一致的问题 @charset"utf-8";html{background-colo...

  • css重置

    CSS 重置 现在我们已经知道了,某些元素即使我们不对它声明样式,浏览器也会有些默认的样式,如 h1、p。 那么问...

  • css重置

    电脑端 手机端

网友评论

      本文标题:CSS重置

      本文链接:https://www.haomeiwen.com/subject/jwqpiftx.html