提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

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

CSS 如何 什么 区别 为什么 还是 样式 重置
2023-09-27 14:25:59 时间

重置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>

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

如何重置css样式

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

<style type="text/css">
    * {
         margin: 0;
     }
</style>

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

<style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }
</style>

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

引入第三方的重置css样式

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

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

reset.css

链接地址：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/

/*! 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}

相关文章