为什么要重置css样式，如何重置css样式？使用reset.css重置样式，还是使用normalize.css重置样式，他们的区别是什么？

妖狐艹你老母 2023-09-28 15:56 32阅读 0赞

#### 重置css样式 ####

*  为什么重置css演示
 *  如何重置css样式
 *  引入第三方的重置css样式
 *   *  reset.css
     *  normalize.css
     *  reset.css和normalize.css区别
 *  补充：腾讯百度等大厂的reset.css
 *   *  腾讯
     *  百度
     *  新浪
     *  淘宝
     *  网易
     *  搜狐
     *  优酷
     *  美团

## 为什么重置css演示 ##

如果我们不重置css样式，那么，浏览器自带的默认样式，会给我们展示什么样的页面呢？

我现在一个无样式的resetStyleCss.html页面，代码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>重置样式表</title>
    </head>
    <body>
    	<div>hello word</div>
    	<p>这是 P 元素</p>
    	<ul>
       		<li>苹果</li>
        	<li>柑橘</li>
        	<li>西瓜</li>
    	</ul>
    </body>
    </html>

在浏览器打开的页面如图所示：  
![样式图][5a30786c82454b1ab241981a04945134.png]  
我并没有设置`P`元素的外边距，但浏览器默认给其加上了外边距，即 `margin:16px`，因而，我们不得不重置样式。

## 如何重置css样式 ##

我在resetStyleCss.html源代码中加入如下样式

再次打开浏览器，发现外边距不存在了，但`ul`元素多了左内边距，即`padding-left:40px`，如图所示：  
![在这里插入图片描述][4bfc0f5b350f491ba7e6d6e84d5f98ce.png]  
因而，我们需要再补充加入以下代码：

再次打开浏览器，效果如图所示，margin和padding都为0了。  
![在这里插入图片描述][dca1e510ce7a4d4dbf0b04e02ad18a10.png]

## 引入第三方的重置css样式 ##

我们经过手动调试，将上述浏览器默认的样式重置了，但是在实际开发的过程中，我们不可能一遍一遍输入。

就算我们一遍一遍输入，也有可能会输入的不完整，造成浏览器的其他默认演示存在，因而，我们需要引入第三方的重置css样式：`reset.css和normalize.css`

### reset.css ###

链接地址：[http://meyerweb.com/eric/tools/css/reset/][http_meyerweb.com_eric_tools_css_reset]

/* http://meyerweb.com/eric/tools/css/reset/
       v2.0 | 20110126
       License: none (public domain)
    */
    
    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, 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,
    article, aside, canvas, details, embed,
    figure, figcaption, footer, header, hgroup,
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
        
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure,
    footer, header, hgroup, menu, nav, section {
        
        display: block;
    }
    body {
        
        line-height: 1;
    }
    ol, ul {
        
        list-style: none;
    }
    blockquote, q {
        
        quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
        
        content: '';
        content: none;
    }
    table {
        
        border-collapse: collapse;
        border-spacing: 0;
    }

### normalize.css ###

链接地址：[http://necolas.github.io/normalize.css/][http_necolas.github.io_normalize.css]

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
    
    /* Document
       ========================================================================== */
    
    /**
     * 1. Correct the line height in all browsers.
     * 2. Prevent adjustments of font size after orientation changes in iOS.
     */
    
    html {
        
        line-height: 1.15; /* 1 */
        -webkit-text-size-adjust: 100%; /* 2 */
    }
    
    /* Sections
       ========================================================================== */
    
    /**
     * Remove the margin in all browsers.
     */
    
    body {
        
        margin: 0;
    }
    
    /**
     * Render the `main` element consistently in IE.
     */
    
    main {
        
        display: block;
    }
    
    /**
     * Correct the font size and margin on `h1` elements within `section` and
     * `article` contexts in Chrome, Firefox, and Safari.
     */
    
    h1 {
        
        font-size: 2em;
        margin: 0.67em 0;
    }
    
    /* Grouping content
       ========================================================================== */
    
    /**
     * 1. Add the correct box sizing in Firefox.
     * 2. Show the overflow in Edge and IE.
     */
    
    hr {
        
        box-sizing: content-box; /* 1 */
        height: 0; /* 1 */
        overflow: visible; /* 2 */
    }
    
    /**
     * 1. Correct the inheritance and scaling of font size in all browsers.
     * 2. Correct the odd `em` font sizing in all browsers.
     */
    
    pre {
        
        font-family: monospace, monospace; /* 1 */
        font-size: 1em; /* 2 */
    }
    
    /* Text-level semantics
       ========================================================================== */
    
    /**
     * Remove the gray background on active links in IE 10.
     */
    
    a {
        
        background-color: transparent;
    }
    
    /**
     * 1. Remove the bottom border in Chrome 57-
     * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
     */
    
    abbr[title] {
        
        border-bottom: none; /* 1 */
        text-decoration: underline; /* 2 */
        text-decoration: underline dotted; /* 2 */
    }
    
    /**
     * Add the correct font weight in Chrome, Edge, and Safari.
     */
    
    b,
    strong {
        
        font-weight: bolder;
    }
    
    /**
     * 1. Correct the inheritance and scaling of font size in all browsers.
     * 2. Correct the odd `em` font sizing in all browsers.
     */
    
    code,
    kbd,
    samp {
        
        font-family: monospace, monospace; /* 1 */
        font-size: 1em; /* 2 */
    }
    
    /**
     * Add the correct font size in all browsers.
     */
    
    small {
        
        font-size: 80%;
    }
    
    /**
     * Prevent `sub` and `sup` elements from affecting the line height in
     * all browsers.
     */
    
    sub,
    sup {
        
        font-size: 75%;
        line-height: 0;
        position: relative;
        vertical-align: baseline;
    }
    
    sub {
        
        bottom: -0.25em;
    }
    
    sup {
        
        top: -0.5em;
    }
    
    /* Embedded content
       ========================================================================== */
    
    /**
     * Remove the border on images inside links in IE 10.
     */
    
    img {
        
        border-style: none;
    }
    
    /* Forms
       ========================================================================== */
    
    /**
     * 1. Change the font styles in all browsers.
     * 2. Remove the margin in Firefox and Safari.
     */
    
    button,
    input,
    optgroup,
    select,
    textarea {
        
        font-family: inherit; /* 1 */
        font-size: 100%; /* 1 */
        line-height: 1.15; /* 1 */
        margin: 0; /* 2 */
    }
    
    /**
     * Show the overflow in IE.
     * 1. Show the overflow in Edge.
     */
    
    button,
    input {
         /* 1 */
        overflow: visible;
    }
    
    /**
     * Remove the inheritance of text transform in Edge, Firefox, and IE.
     * 1. Remove the inheritance of text transform in Firefox.
     */
    
    button,
    select {
         /* 1 */
        text-transform: none;
    }
    
    /**
     * Correct the inability to style clickable types in iOS and Safari.
     */
    
    button,
    [type="button"],
    [type="reset"],
    [type="submit"] {
        
        -webkit-appearance: button;
    }
    
    /**
     * Remove the inner border and padding in Firefox.
     */
    
    button::-moz-focus-inner,
    [type="button"]::-moz-focus-inner,
    [type="reset"]::-moz-focus-inner,
    [type="submit"]::-moz-focus-inner {
        
        border-style: none;
        padding: 0;
    }
    
    /**
     * Restore the focus styles unset by the previous rule.
     */
    
    button:-moz-focusring,
    [type="button"]:-moz-focusring,
    [type="reset"]:-moz-focusring,
    [type="submit"]:-moz-focusring {
        
        outline: 1px dotted ButtonText;
    }
    
    /**
     * Correct the padding in Firefox.
     */
    
    fieldset {
        
        padding: 0.35em 0.75em 0.625em;
    }
    
    /**
     * 1. Correct the text wrapping in Edge and IE.
     * 2. Correct the color inheritance from `fieldset` elements in IE.
     * 3. Remove the padding so developers are not caught out when they zero out
     *    `fieldset` elements in all browsers.
     */
    
    legend {
        
        box-sizing: border-box; /* 1 */
        color: inherit; /* 2 */
        display: table; /* 1 */
        max-width: 100%; /* 1 */
        padding: 0; /* 3 */
        white-space: normal; /* 1 */
    }
    
    /**
     * Add the correct vertical alignment in Chrome, Firefox, and Opera.
     */
    
    progress {
        
        vertical-align: baseline;
    }
    
    /**
     * Remove the default vertical scrollbar in IE 10+.
     */
    
    textarea {
        
        overflow: auto;
    }
    
    /**
     * 1. Add the correct box sizing in IE 10.
     * 2. Remove the padding in IE 10.
     */
    
    [type="checkbox"],
    [type="radio"] {
        
        box-sizing: border-box; /* 1 */
        padding: 0; /* 2 */
    }
    
    /**
     * Correct the cursor style of increment and decrement buttons in Chrome.
     */
    
    [type="number"]::-webkit-inner-spin-button,
    [type="number"]::-webkit-outer-spin-button {
        
        height: auto;
    }
    
    /**
     * 1. Correct the odd appearance in Chrome and Safari.
     * 2. Correct the outline style in Safari.
     */
    
    [type="search"] {
        
        -webkit-appearance: textfield; /* 1 */
        outline-offset: -2px; /* 2 */
    }
    
    /**
     * Remove the inner padding in Chrome and Safari on macOS.
     */
    
    [type="search"]::-webkit-search-decoration {
        
        -webkit-appearance: none;
    }
    
    /**
     * 1. Correct the inability to style clickable types in iOS and Safari.
     * 2. Change font properties to `inherit` in Safari.
     */
    
    ::-webkit-file-upload-button {
        
        -webkit-appearance: button; /* 1 */
        font: inherit; /* 2 */
    }
    
    /* Interactive
       ========================================================================== */
    
    /*
     * Add the correct display in Edge, IE 10+, and Firefox.
     */
    
    details {
        
        display: block;
    }
    
    /*
     * Add the correct display in all browsers.
     */
    
    summary {
        
        display: list-item;
    }
    
    /* Misc
       ========================================================================== */
    
    /**
     * Add the correct display in IE 10+.
     */
    
    template {
        
        display: none;
    }
    
    /**
     * Add the correct display in IE 10.
     */
    
    [hidden] {
        
        display: none;
    }

### reset.css和normalize.css区别 ###

我们在开发的过程中，reset.css和normalize.css引入一个就行，不用两个都引入，它们的区别是：

*  reset.css：直接去除了浏览器的默认样式
 *  normalize.css：对默认样式进行了统一

## 补充：腾讯百度等大厂的reset.css ##

### 腾讯 ###

body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{
        margin:0;padding:0}
    
    body{
        font:12px "宋体","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%}
    
    a{
        color:#172c45;text-decoration:none}
    
    a:hover{
        color:#cd0200;text-decoration:underline}
    
    em{
        font-style:normal}
    
    li{
        list-style:none}
    
    img{
        border:0;vertical-align:middle}
    
    table{
        border-collapse:collapse;border-spacing:0}
    
    p{
        word-wrap:break-word}

### 百度 ###

body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{
        margin:0;padding:0}
    
    html{
        color:#000;overflow-y:scroll;overflow:-moz-scrollbars-vertical}
    
    body,button,input,select,textarea{
        font-size:12px;font-family:arial,'Hiragino Sans GB','Microsoft Yahei','微软雅黑','宋体',\5b8b\4f53,Tahoma,Arial,Helvetica,STHeiti}
    
    h1,h2,h3,h4,h5,h6{
        font-size:100%}
    
    em{
        font-style:normal}
    
    small{
        font-size:12px}
    
    ul,ol{
        list-style:none}
    
    a{
        text-decoration:none}
    
    a:hover{
        text-decoration:underline}
    
    legend{
        color:#000}
    
    fieldset,img{
        border:0}
    
    button,input,select,textarea{
        font-size:100%}
    
    table{
        border-collapse:collapse;border-spacing:0}
    
    img{
        -ms-interpolation-mode:bicubic}
    
    textarea{
        resize:vertical}
    
    .left{
        float:left}
    
    .right{
        float:right}
    
    .overflow{
        overflow:hidden}
    
    .hide{
        display:none}
    
    .block{
        display:block}
    
    .inline{
        display:inline}
    
    .error{
        color:#F00;font-size:12px}
    
    label,button{
        cursor:pointer}
    
    .clearfix:after{
        content:'\20';display:block;height:0;clear:both}
    
    .clearfix{
        zoom:1}.clear{
        clear:both;height:0;line-height:0;font-size:0;visibility:hidden;overflow:hidden}
    
    .wordwrap{
        word-break:break-all;word-wrap:break-word}
    
    pre.wordwrap{
        white-space:pre-wrap}
    
    body{
        text-align:center}
    
    body,form{
        position:relative}
    
    td{
        text-align:left}
    
    img{
        border:0}

### 新浪 ###

/* 初始化CSS */
    
    html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img {
         margin:0; padding:0; }
    
    fieldset, img {
         border:none; }
    
    img{
        display: block;}
    
    address, caption, cite, code, dfn, th, var {
         font-style:normal; font-weight:normal; }
    
    ul, ol {
         list-style:none; }
    
    input {
         padding-top:0; padding-bottom:0; font-family: "SimSun","宋体";}
    
    input::-moz-focus-inner {
         border:none; padding:0; }
    
    select, input {
         vertical-align:middle; }
    
    select, input, textarea {
         font-size:12px; margin:0; }
    
    input[type="text"], input[type="password"], textarea {
         outline-style:none; -webkit-appearance:none; }
    
    textarea {
         resize:none; }
    
    table {
         border-collapse:collapse; }
    
    body {
         color:#333; padding:5px 0; font:12px/20px "SimSun","宋体","Arial Narrow",HELVETICA; background:#fff;/* overflow-y:scroll;*/ }
    
    .clearfix:after {
         content:"."; display:block; height:0; visibility:hidden; clear:both; }
    
    .clearfix {
         zoom:1; }
    
    .clearit {
         clear:both; height:0; font-size:0; overflow:hidden; }
    
    a {
         color:#666; text-decoration:none; }
    
    a:visited {
         color:#666; }
    
    a:hover, a:active, a:focus {
         color:#ff8400; text-decoration:underline; }

### 淘宝 ###

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td {
         margin:0; padding:0; }
    
    body, button, input, select, textarea {
         font:12px/1.5tahoma, arial, \5b8b\4f53; }
    
    h1, h2, h3, h4, h5, h6{
         font-size:100%; }
    
    address, cite, dfn, em, var {
         font-style:normal; }
    
    code, kbd, pre, samp {
         font-family:couriernew, courier, monospace; }
    
    small{
         font-size:12px; }
    
    ul, ol {
         list-style:none; }
    
    a {
         text-decoration:none; }
    
    a:hover {
         text-decoration:underline; }
    
    sup {
         vertical-align:text-top; }
    
    sub{
         vertical-align:text-bottom; }
    
    legend {
         color:#000; }
    
    fieldset, img {
         border:0; }
    
    button, input, select, textarea {
         font-size:100%; }
    
    table {
         border-collapse:collapse; border-spacing:0; }

### 网易 ###

html {
        overflow-y:scroll;}
    
    body {
        margin:0; padding:0; font:12px/1.5 \5b8b\4f53,Arial,sans-serif;/*background:#ffffff;*/}
    
    div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p{
        padding:0; margin:0;}
    
    table,td,tr,th{
        font-size:12px;}
    
    ol,ul {
        list-style:none;}
    
    li{
        list-style-type:none;}
    
    img{
        vertical-align:top;border:0;}
    
    h1,h2,h3,h4,h5,h6{
        font-size:inherit; font-weight:normal;}
    
    address,cite,code,em,th,i{
        font-weight:normal; font-style:normal;}
    
    .hx a,.hx em,.fB{
        font-weight:bold;}
    
    .clearfix{
        *zoom:1;}
    
    .clearfix:after{
        display:block; overflow:hidden; clear:both; height:0; visibility:hidden; content:".";}
    
    a {
        color:#252525; text-decoration:none;}
    
    a:visited {
        text-decoration:none;}
    
    a:hover {
        color:#ba2636;text-decoration:underline;}
    
    a:active {
        color:#ba2636;}

### 搜狐 ###

/* 全局CSS定义 */
    
    body{
        font-family:"\5B8B\4F53","Arial Narrow",HELVETICA;text-align:center;margin:0 auto;padding:0;background:#FFF;font-size:12px;color:#333;}
    
    body > div{
        text-align:center;margin-right:auto;margin-left:auto;} 
    
    div,form,ul,ol,li,span,p{
        margin:0;padding:0;border:0;}
    
    img,a img{
        border:0;margin:0;padding:0;}
    
    h1,h2,h3,h4,h5,h6{
        margin:0;padding:0;font-size:12px;font-weight:normal;}
    
    ul,ol,li{
        list-style:none}
    
    table,td,input{
        font-size:12px;padding:0}
    
    /* 默认链接颜色 */
    
    a{
        outline-style:none;color:#333;text-decoration:none}
    
    a:hover{
        color:#c00;text-decoration:underline;}
    
     
    
    /*清除链接虚框*/
    
    /*a,area {blr:expression(this.onFocus=this.blur()) }  for IE 
    
    :focus {-moz-outline-style: none; }  for Firefox   
    
    */

### 优酷 ###

@charset "utf-8";
    
    article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{
        display:block}
    
    audio,canvas,video{
        display:inline-block;*display:inline;*zoom:1}
    
    audio:not([controls]){
        display:none}
    
    html{
        -webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
    
    a:focus{
        outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}
    
    a:hover,a:active{
        outline:0}
    
    figure{
        padding:0;margin:0}
    
    sub,sup{
        position:relative;font-size:75%;line-height:0;vertical-align:baseline}
    
    sup{
        top:-0.5em}
    
    sub{
        bottom:-0.25em}
    
    img{
        vertical-align:middle;border:0;-ms-interpolation-mode:bicubic}
    
    button,input,select,textarea{
        margin:0;font-size:100%;vertical-align:middle}
    
    button,input{
        *overflow:visible;line-height:normal}
    
    button::-moz-focus-inner,input::-moz-focus-inner{
        padding:0;border:0}
    
    button,input[type="button"],input[type="reset"],input[type="submit"]{
        -webkit-appearance:button;cursor:pointer}
    
    input[type="search"]{
        -webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;-webkit-appearance:textfield}
    
    input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-cancel-button{
        -webkit-appearance:none}
    
    textarea{
        overflow:auto;vertical-align:top}
    
    ol,ul,dl{
        list-style:none}
    
    body,p,ol,ul,dl{
        padding:0;margin:0}
    
    a:link,a:visited{
        text-decoration:none;color:#555}
    
    a:hover{
        color:#c31}
    
    a.white{
        color:#fff}
    
    a.blue{
        color:#3399e0}

### 美团 ###

blockquote,body,code,dd,div,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,input,legend,li,ol,p,pre,td,textarea,th,ul{
        margin:0;padding:0}
    
    table{
        border-collapse:collapse;border-spacing:0}
    
    fieldset,img{
        border:0}
    
    address,caption,cite,code,dfn,em,var{
        font-style:normal;font-weight:400}
    
    li{
        list-style:none}
    
    caption,th{
        text-align:left}
    
    h1,h2,h3,h4,h5,h6{
        font-size:100%}
    
    q:after,q:before{
        content:''}
    
    abbr,acronym{
        border:0;font-variant:normal}
    
    sup{
        vertical-align:text-top}
    
    sub{
        vertical-align:text-bottom}
    
    input,select,textarea{
        font-family:inherit;font-size:inherit;*font-size:100%;font-weight:inherit}
    
    legend{
        color:#333}html{
        background-color:#eee}
    
    body{
        font:400 14px/1.5 "Hiragino Sans GB","WenQuanYi Micro Hei",tahoma,sans-serif;color:#666;background-color:#fff}
    
    a{
        color:#2bb8aa;text-decoration:none}a:hover{
        text-decoration:underline}
    
    h1,h2,h3,h4,h5,h6{
        font-family:"Hiragino Sans GB"," Microsoft YaHei","WenQuanYi Micro Hei",arial,sans-serif;color:#333;-webkit-font-smoothing:antialiased}
    
    input[type=password]{
        font-family:arial,sans-serif}

[5a30786c82454b1ab241981a04945134.png]: https://img-blog.csdnimg.cn/5a30786c82454b1ab241981a04945134.png
[4bfc0f5b350f491ba7e6d6e84d5f98ce.png]: https://img-blog.csdnimg.cn/4bfc0f5b350f491ba7e6d6e84d5f98ce.png
[dca1e510ce7a4d4dbf0b04e02ad18a10.png]: https://img-blog.csdnimg.cn/dca1e510ce7a4d4dbf0b04e02ad18a10.png
[http_meyerweb.com_eric_tools_css_reset]: http://meyerweb.com/eric/tools/css/reset/
[http_necolas.github.io_normalize.css]: http://necolas.github.io/normalize.css/