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

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

样式初始化目的：

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

---

代码演示

<!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>
        <!--
            标签样式初始化（css reset）
                原则：但凡页面中要用到的标签，有默认样式，会影响到其它的代码，这个时候就要把清掉。用不到的标签就不用清除

                哪些样式需要重置
                    与盒模型相关的样式
                        margin
                        padding
                        border
                    标签特有的样式
                        ul  li
                        ol  li
        -->
        <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>
            <!--<div>这是一个div</div>-->
        </ul>
        <ol>
            <li>ol是一个有序列表</li>
            <li>li是列表项</li>
            <li>ol的子元素只能是li</li>
            <!--<div>这是一个div</div>-->
        </ol>
        <dl>
            <dt>dl是自定义列表，dt表示列表的标题</dt>
            <dd>dd是列表项</dd>
            <dd>dt只能出现一次，dd可以出现多次</dd>
            <!--<div>这是一个div</div>-->
        </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;
}