zoukankan      html  css  js  c++  java
  • css Reset

    CSS重设就是由于各种浏览器解释CSS样式的初始值有所不同,导致设计师在没有定义某个CSS属性时,不同的浏览器会按照自己的默认值来为没有定义的样式赋值,所以我们要先定义好一些CSS样式,来让所有浏览器都按照同样的规则解释CSS,这样就能避免发生这种问题。

    一.最简化的CSS Reset(重设) :

    * {
          padding: 0;
          margin: 0;
    }

      这是最普遍最简单的CSS重设,将所有元素的padding和margin值都设为0,可以避免一些浏览器在理解这两个属性默认值上的”分歧”。

    * {
           padding: 0;
           margin: 0;
           border: 0;
    }

      这是在上一个重设的基础上添加了对border属性的重设,初始值为0的确能避免一些问题。

    * {
           outline: 0;
           padding: 0;
           margin: 0;
           border: 0;
    }

      在前两个的基础上添加了outline属性的重设,防止一些冲突。

    二.浓缩实用型CSS Reset(重设):

    * {
           vertical-align: baseline;
           font-weight: inherit; 
           font-family: inherit; 
           font-style: inherit;
           font-size: 100%;
           outline: 0;
           padding: 0;
           margin: 0;
           border: 0;
    }

      该CSS重设方法出自Perishable Press,这是他常用的方法。

    三.Poor Man 的CSS Reset:

    html, body { 
           padding: 0; 
           margin: 0; 
    }
    html {
           font-size:1em;

    body {
           font-size:100%;

    a img, :link img, :visited img {
           border:0px;

      这个重设方法将html和body下元素的padding和margin都设为0,并分别为html标签和body标签下的所有元素设置了初始的字体大小,最重要的是把有链接的图片的默认边框去掉了。

    四.Siolon’s Global Reset

    * { 
        vertical-align: baseline;
        font-family: inherit;
        fo

    nt-style: inherit;
        font-size: 100%;
        border: none;
        padding: 0;
        margin: 0; 
    }
    body {
        padding: 5px;

    h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl {
        margin: 20px 0;
    }
    li, dd, blockquote { 
        margin-left: 40px;

    table { 
        border-collapse: collapse; 
        border-spacing: 0; 
    }

    五.Shaun Inman’s Global Reset

    body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, table, th, td, embed, object {
        padding: 0;
        margin: 0; 
    }
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
        fieldset, img, abbr {
        border: 0;
    }
    address, caption, cite, code, dfn, em, 
    h1, h2, h3, h4, h5, h6, strong, th, var {
        font-weight: normal;
        font-style: normal;
    }
    ul {
        list-style: none;
    }
    caption, th {
        text-align: left;
    }
    h1, h2, h3, h4, h5, h6 {
        font-size: 1.0em;
    }
    q:before, q:after {
        content: ”;
    }
    a, ins {
        text-decoration: none;
    }

    六.Yahoo(YUI) CSS Reset:

    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre, 
    form,fieldset,input,textarea,p,blockquote,th,td { 
        padding: 0; 
        margin: 0; 

    table { 
        border-collapse: collapse; 
        border-spacing: 0; 

    fieldset,img { 
        border: 0; 

    address,caption,cite,code,dfn,em,strong,th,var { 
        font-weight: normal; 
        font-style: normal; 

    ol,ul { 
        list-style: none; 

    caption,th { 
        text-align: left; 

    h1,h2,h3,h4,h5,h6 { 
        font-weight: normal; 
        font-size: 100%; 

    q:before,q:after { 
        content:”; 

    abbr,acronym { 
        border: 0; 
    }

    七.Eric Meyer’s CSS Reset

    html, body, div, span, applet, object, iframe, table, caption, 
    tbody, tfoot, thead, tr, th, td, del, dfn, em, font, img, ins, 
    kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, 
    h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, 
    acronym, address, big, cite, code, dl, dt, dd, ol, ul, li, 
    fieldset, form, label, legend { 
        vertical-align: baseline; 
        font-family: inherit; 
        font-weight: inherit; 
        font-style: inherit; 
        font-size: 100%; 
        outline: 0; 
        padding: 0; 
        margin: 0; 
        border: 0; 

    :focus { 
        outline: 0; 

    body { 
        background: white; 
        line-height: 1; 
        color: black; 

    ol, ul { 
        list-style: none; 

    table { 
        border-collapse: separate; 
        border-spacing: 0; 

    caption, th, td { 
        font-weight: normal; 
        text-align: left; 

    blockquote:before, blockquote:after, q:before, q:after { 
        content: “”; 

    blockquote, q { 
        quotes: “” “”; 
    }

    八.Condensed Meyer Reset:

    body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, 
    pre, form, fieldset, input, textarea, p, blockquote, th, td { 
        padding: 0;
        margin: 0;
    }
        fieldset, img { 
        border: 0;
    }
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
    ol, ul {
        list-style: none;
    }
    address, caption, cite, code, dfn, em, strong, th, var {
        font-weight: normal;
        font-style: normal;
    }
    caption, th {
        text-align: left;
    }
    h1, h2, h3, h4, h5, h6 {
        font-weight: normal;
        font-size: 100%;
    }
    q:before, q:after {
        content: ”;
    }
    abbr, acronym { 
        border: 0;
    }

    九.Ateneu Popular CSS Reset

    html, body, div, span, applet, object, iframe, h1, h2, h3, 
    h4, h5, h6, p, blockquote, pre, a, abbr, acronym, 
    address, big, cite, code, del, dfn, em, font, img, ins, 
    kbd, q, s, samp, small, strike, strong, sub, sup, tt, 
    var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 
    table, caption, tbody, tfoot, thead, tr, th, td { 
        margin: 0; 
        padding: 0; 
        border: 0; 
        outline: 0; 
        font-weight: inherit; 
        font-style: inherit; 
        font-size: 100%; 
        font-family: inherit; 
        vertical-align: baseline; 

    :focus {
        outline: 0;

    a, a:link, a:visited, a:hover, a:active{
        text-decoration:none

    table {
        border-collapse: separate;
        border-spacing: 0;

    th, td {
        text-align: left;
        font-weight: normal;

    img, iframe {
        border: none;
        text-decoration:none;

    ol, ul {
        list-style: none;

    input, textarea, select, button {
        font-size: 100%;
        font-family: inherit;

    select {
        margin: inherit;

    hr {
        margin: 0;
        padding: 0;
        border: 0;
        color: #000;
        
        height: 1px
    }

    十.Chris Poteet’s Reset CSS

    * { 
        vertical-align: baseline; 
        font-family: inherit; 
        font-style: inherit; 
        font-size: 100%; 
        border: none; 
        padding: 0; 
        margin: 0; 

    body { 
        padding: 5px; 

    h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl { 
        margin: 20px 0; 

    li, dd, blockquote { 
        margin-left: 40px; 

    table { 
        border-collapse: collapse; 
        border-spacing: 0; 
    }

    十一.Tantek Celik Reset CSS

    :link,:visited { text-decoration:none } 
    ul,ol { list-style:none } 
    h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; } 
    ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input 
    { margin:0; padding:0 } 
    a img,:link img,:visited img { border:none } 
    address { font-style:normal }

    十二.Christian Montoya Reset CSS

    html, body, form, fieldset { 
        margin: 0; 
        padding: 0; 
        font: 100%/120% Verdana, Arial, Helvetica, sans-serif; 

    h1, h2, h3, h4, h5, h6, p, pre, 
    blockquote, ul, ol, dl, address { 
        margin: 1em 0; 
        padding: 0; 

    li, dd, blockquote { 
        margin-left: 1em; 

    form label { 
        cursor: pointer; 

    fieldset { 
        border: none; 

    input, select, textarea { 
        font-size: 100%; 
        font-family: inherit; 
    }

    十三.Rudeworks Reset CSS

    * { 
        margin: 0; 
        padding: 0; 
        border: none; 

    html { 
        font: 62.5% “Lucida Grande”, Lucida, Verdana, sans-serif; 
        text-shadow: #000 0px 0px 0px; 

    ul { 
        list-style: none; 
        list-style-type: none; 

    h1, h2, h3, h4, h5, h6, p, pre, 
    blockquote, ul, ol, dl, address { 
        font-weight: normal; 
        margin: 0 0 1em 0; 

    cite, em, dfn { 
        font-style: italic; 

    sup { 
        position: relative; 
        bottom: 0.3em; 
        vertical-align: baseline; 

    sub { 
        position: relative; 
        bottom: -0.2em; 
        vertical-align: baseline; 

    li, dd, blockquote { 
        margin-left: 1em; 

    code, kbd, samp, pre, tt, var, input[type='text'], textarea { 
        font-size: 100%; 
        font-family: monaco, “Lucida Console”, courier, mono-space; 

    del { 
        text-decoration: line-through; 

    ins, dfn { 
        border-bottom: 1px solid #ccc; 

    small, sup, sub { 
        font-size: 85%; 

    abbr, acronym { 
        text-transform: uppercase; 
        font-size: 85%; 
        letter-spacing: .1em; 
        border-bottom-style: dotted; 
        border-bottom- 1px; 

    a abbr, a acronym { 
        border: none; 

    sup { 
        vertical-align: super; 

    sub { 
        vertical-align: sub; 

    h1 { 
        font-size: 2em; 

    h2 { 
        font-size: 1.8em; 

    h3 { 
        font-size: 1.6em; 

    h4 { 
        font-size: 1.4em; 

    h5 { 
        font-size: 1.2em; 

    h6 { 
        font-size: 1em; 

    a, a:link, a:visited, a:hover, a:active { 
        outline: 0; 
        text-decoration: none; 

    a img { 
        border: none; 
        text-decoration: none; 

    img { 
        border: none; 
        text-decoration: none; 

    label, button { 
        cursor: pointer; 

    input:focus, select:focus, textarea:focus { 
         

    fieldset { 
        border: none; 

    .clear { 
        clear: both; 

    .float-left { 
        float: left; 

    .float-right { 
        float: right; 

    body { 
        text-align: center; 

    #wrapper { 
        margin: 0 auto; 
        text-align: left; 
    }

    十四. Anieto2K Reset CSS

    html, body, div, span, applet, object, iframe, 
    h1, h2, h3, h4, h5, h6, p, 
    blockquote, pre, a, abbr, acronym, address, big, 
    cite, code, del, dfn, em, font, img, 
    ins, kbd, q, s, samp, small, strike, 
    strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, 
    fieldset, form, label, legend, 
    table, caption, tbody, tfoot, thead, tr, th, td, 
    center, u, b, i { 
        margin: 0; 
        padding: 0; 
        border: 0; 
        outline: 0; 
        font-weight: normal; 
        font-style: normal; 
        font-size: 100%; 
        font-family: inherit; 
        vertical-align: baseline 

    body { 
        line-height: 1 

    :focus { 
        outline: 0 

    ol, ul { 
        list-style: none 

    table { 
        border-collapse: collapse; 
        border-spacing: 0 

    blockquote:before, blockquote:after, q:before, q:after { 
        content: “” 

    blockquote, q { 
        quotes: “” “” 

    input, textarea { 
        margin: 0; 
        padding: 0 

    hr { 
        margin: 0; 
        padding: 0; 
        border: 0; 
        color: #000; 
         
        height: 1px 
    }

    十五.CSSLab CSS Reset

    html, body, div, span, applet, object, iframe, h1, h2, h3, 
    h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, 
    big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, 
    small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, 
    fieldset, form, label, legend, table, caption, tbody, tfoot, 
    thead, tr, th, td { 
        margin: 0; 
        padding: 0; 
        border: 0; 
        outline: 0; 
        font-weight: inherit; 
        font-style: inherit; 
        font-size: 100%; 
        font-family: inherit; 
        vertical-align: baseline; 

    :focus { 
        outline: 0; 

    table { 
        border-collapse: separate; 
        border-spacing: 0; 

    caption, th, td { 
        text-align: left; 
        font-weight: normal; 

    a img, iframe { 
        border: none; 

    ol, ul { 
        list-style: none; 

    input, textarea, select, button { 
        font-size: 100%; 
        font-family: inherit; 

    select { 
        margin: inherit; 

    /* Fixes incorrect placement of numbers in ol’s in IE6/7 */ 
    ol { margin-left:2em; } 
    /* == clearfix == */ 
    .clearfix:after { 
        content: “.”; 
        display: block; 
        height: 0; 
        clear: both; 
        visibility: hidden; 

    .clearfix {display: inline-block;} 
    * html .clearfix {height: 1%;} 
    .clearfix {display: block;}

    (转自 http://www.cnblogs.com/hnyei/archive/2011/10/04/2198779.html)
  • 相关阅读:
    88、使用tensorboard进行可视化学习,查看具体使用时间,训练轮数,使用内存大小
    88、展示Tensorflow计算图上每个节点的基本信息以及运行时消耗的时间和空间
    关于实时监听输入框的值变化
    再谈javascript函数节流
    HTML5离线缓存Manifest
    javascript判断浏览器支持CSS3属性
    关于移动web开发过程中的”点透“问题
    跨域解决方案之HTML5 postMessage
    最精简的金额格式化
    Grunt usemin前端自动化打包流程
  • 原文地址:https://www.cnblogs.com/lewis-g/p/4461856.html
Copyright © 2011-2022 走看看