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

时间：2024-12-13 11:05:44

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

样式初始化目的：

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

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

代码演示

<!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;

}

相关文章