一天搞定CSS：标签样式初始化（CSS reset）及淘宝样式初始化代码--09

秒速五厘米 2022-06-16 07:14 247阅读 0赞

**样式初始化：是指对HTML中某些标签的默认样式进行清除**

**样式初始化目的：**

> 不同浏览器的默认样式不一样，若不清理，会导致相同的代码在浏览器中解析结果不一样，为了避免这种情况，所以需要进行样式初始化。

![这里写图片描述][SouthEast]

--------------------

**代码演示**

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
                /*一、不适用通配符初始化*/
                body,h1,h2,h3,h4,h5,h6,p,dl,dd{
                    margin: 0;
                }
                ul,ol{
                    margin: 0;
                    padding: 0;
                    list-style: none;
                }
                img{
                    border: none;
                    vertical-align: top;
                }
                a{
                    text-decoration: none;
                }
    
    
    
    
    
                /*二、通配符初始化*/
                *{
                    margin: 0;
                    padding: 0;
                }
    
                /*
                 * 通配符的使用争议：
                 * 
                 * 一般都都不建议用通配符
                 *  1、性能问题
                 *  2、浪费问题
                 * 
                 * 若非要用通配符的话：建议
                 *  1、如果网站非常大，内容非常多，就不建议用通配符
                 *  2、如果小网站，内容不多，（比如：单页面）可以用通配符
                 */
            </style>
        </head>
        <body>
            
            <a href="">123</a>
            <h1>标题</h1>
            <h2>标题</h2>
            <h3>标题</h3>
            <h4>标题</h4>
            <h5>标题</h5>
            <h6>标题</h6>
            <p>这里可以放一段话</p>
            <strong>强调</strong>
            <em>强调</em>
            <ul>
                <li>ul是无序列表</li>
                <li>li是列表项</li>
                <li>ul的子元素只能是li</li>
                
            </ul>
            <ol>
                <li>ol是一个有序列表</li>
                <li>li是列表项</li>
                <li>ol的子元素只能是li</li>
                
            </ol>
            <dl>
                <dt>dl是自定义列表，dt表示列表的标题</dt>
                <dd>dd是列表项</dd>
                <dd>dt只能出现一次，dd可以出现多次</dd>
                
            </dl>
            <mark>标记</mark>
        </body>
    </html>

**淘宝样式初始化代码：**

/*清除样式*/
    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,input,a,p,textarea{
        margin: 0;
        padding: 0;
    }
    
    ul,ol,li{
        list-style: none;
    }
    
    a{
        text-decoration: none;
        display: block; 
    }
    
    img{
        border: none;
        display: block;
    }
    
    /*清除浮动*/
    .clearfloat:after{
        display: block;
        clear: both;
        content: "";
        visibility: hidden;
        height: 0;
    }
    .clearfloat{
        zoom: 1;
    }

[SouthEast]: /images/20220616/f1f644d2a88d4dfea8ebf763dcafcee8.png