zoukankan      html  css  js  c++  java
  • 一天搞定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;
    }
  • 相关阅读:
    215. Kth Largest Element in an Array
    214. Shortest Palindrome
    213. House Robber II
    212. Word Search II
    210 Course ScheduleII
    209. Minimum Size Subarray Sum
    208. Implement Trie (Prefix Tree)
    207. Course Schedule
    206. Reverse Linked List
    sql 开发经验
  • 原文地址:https://www.cnblogs.com/TCB-Java/p/6853975.html
Copyright © 2011-2022 走看看