zoukankan      html  css  js  c++  java
  • CSS reset重置样式有那么重要吗?

    在以前写html代码的时候,一般都会在head里添加重置样式reset.css,其内容如下:

    @charset "utf-8";
    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,
    b, u, i, center,
    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-size: 100%;
        /*background: transparent;*/
    }
    table {
        border-collapse:collapse;
        border-spacing:0;
    }
    fieldset, img {    border:0;}
    address, caption, cite, code, dfn, em, strong, th, var {
        font-style:normal;
        font-weight:normal;
    }
    ol, ul { list-style:none; }
    caption, th { text-align:left; }
    h1, h2, h3, h4, h5, h6 {
        font-size:200%;
        font-weight:normal;
    }
    :focus { outline: 0;}
    a{ text-decoration:none;}
    a:hover img{ border:none;}
    
    a:active{noOutline:expression(this.onFocus=this.blur());}
    /*清除浮动*/
    .clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    .clearfix {display: inline-block;}
    /* Hides from IE-mac */
    * html .clearfix { height: 1%;}
    .clearfix {display: block;}
    /* End hide from IE-mac */
    
    /*png css hack for ie6*/
    *html img.png{
        _background-image: expression(this.runtimeStyle.backgroundImage = "none",this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",this.src = "http://i0.itc.cn/20101019/848_0a785a7b_1118_4825_85dc_e8696988c94b_0.gif");
    }

    但是最近在网上看了看网络文章,也感觉有些重置是没有用的。为什么呢?

    重置的作用究竟是什么?

    CSS reset的作用是让各个浏览器的CSS样式有一个统一的基准,而这个基准更多的就是“清零”!

    有时候看到别人网站站的一些重置是这样的:

    *{ margin:0; padding:0; }

    这样的写法是极不推荐的。

    现在来看重置表发现:

    1. div标签默认有margin值吗?有padding值吗?怎么会想到应用div{margin:0; padding:0;}属性呢?答案肯定没有。
    2. dt标签有默认的margin与padding值就是0,什么还要使用呢?
    3. li标签默认有margin值吗?有padding值吗?没有!
    4. code标签是个属于inline水平的元素,居然也扯到margin与padding的重置,没有必要。
    5. fieldset, legend这两个90年代的标签你的网站上使用了吗?使用概率不足1%的标签也拿来重置,也没必要。

    css真的重置也就那么几个常用的标签而已,你的页面一般都用到什么标签?

    body, dl, dd, h1, h2, h3, h4, h5, h6, p, form{margin:0;} 
    
     ol,ul{margin:0; padding:0;}

    这样的CSS reset才是高效的,简洁的,其他一些标签都可以去掉的,没有必要。

    当然css重置的优点,缺点都不说了,估计心里都非常有数的,还是要根据实际项目来。

    后来主管给我推荐了一款替代reset.css重置的替代方案,那就是用Normalize.css。在后面文章里把它的用法等再列出来。

  • 相关阅读:
    Sublime text追踪函数插件:ctags
    上传项目后服务器的一些设置
    svg可缩放矢量图形
    定时备份mysql
    phpstudy配置ssl
    thinkphp数据表操作恐怖事件。
    把一个数组和另一个数组放进同一个数组
    mysql数据库备份与还原命令
    mysql一些有用的链接
    MySQL各版本的区别
  • 原文地址:https://www.cnblogs.com/moqiutao/p/4804033.html
Copyright © 2011-2022 走看看