In order to eliminate the default settings of each browser for css and keep the appearance of web pages consistent in each browser, it is necessary to initialize css! Many incompatible styles can be solved by css initialization code.
1. The most resource consuming and simple
* { padding: 0; margin: 0; border: 0; }
2. Selective initialization example (synthesis)
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,legend,button form,fieldset,input,textarea,p,blockquote,th,td { padding: 0; margin: 0; } /* Modify as appropriate */ body { background:#fff;color:#333; font size: 12px; margin top: 5px; font family: "Simsun", "Tahoma", "Arial Narrow"; } /* The content of the short reference can be taken as' 'or' ' */ q:before,q:after {content:";} /* No borders for abbreviations, pictures, etc */ fieldset,img,abbr,acronym {border: 0 none;} abbr,acronym {font-variant: normal;} legend {color:#000;} /* Clear fonts and sizes for special tags */ address,caption,cite,code,dfn,em,strong,th,var { font-weight: normal; font-style: normal; } /* Upper and lower subscript */ sup {vertical-align: text-top;} sub {vertical-align: text-bottom;} /* Set the border of the table to be merged into a single border, and specify that the distance between cell boundaries in the border dividing model is 0*/ table { border-collapse: collapse; border-spacing: 0; } /* Table title and content left */ caption,th {text-align: left;} input,img,select {vertical-align:middle;} /* Clear list style */ ol,ul {list-style: none;} /* Input control font */ input,button,textarea,select,optgroup,option { font-family:inherit; font-size:inherit; font-style:inherit; font-weight:inherit; } /* Header element style clear */ h1,h2,h3,h4,h5,h6 { font-weight: normal; font-size: 100%; } /* Link style, color can be modified as appropriate */ del,ins,a {text-decoration:none;} a:link {color:#009;} a:visited {color:#800080;} a:hover,a:active,a:focus {color:#c00; text-decoration:underline;} /* Mouse style */ input[type="submit"] {cursor: pointer;} button {cursor: pointer;} input::-moz-focus-inner { border: 0; padding: 0;} .clear {clear:both;} web Front end development learning Q-q-u-n: 731771211,Share learning methods and small details that need to be paid attention to, constantly update the latest tutorials and learning methods (detailed front-end project practical teaching video, PDF)
3.sina
/* Global style */ body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{ margin:0;padding:0;border:0; } body{ background:#fff;color:#333; font size: 12px; margin top: 5px; font family: "Simsun", "Tahoma", "Arial Narrow"; } ul,ol{ list-style-type:none; } select,input,img,select{ vertical-align:middle; } a{text-decoration:none;} a:link{color:#009;} a:visited{color:#800080;} a:hover,a:active,a:focus{color:#c00;text-decoration:underline;}
4.yahoo
html { background: none repeat scroll 0 0 #FFFFFF; color: #000000; } body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td { margin: 0; padding: 0; } table { border-collapse: collapse; border-spacing: 0; } fieldset, img { border: 0 none; } address, caption, cite, code, dfn, em, strong, th, var { font-style: normal; font-weight: normal; } li { list-style: none outside none; } caption, th { text-align: left; } h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; } q:before, q:after { content: ""; } abbr, acronym { border: 0 none; font-variant: normal; } sup { vertical-align: text-top; } sub { vertical-align: text-bottom; } input, textarea, select { font-family: inherit; font-size: inherit; font-weight: inherit; } input, textarea, select { } legend { color: #000000; } body { font: 13px/1.231 arial,helvetica,clean,sans-serif; } select, input, button, textarea { font: 99% arial,helvetica,clean,sans-serif; } table { font-size: inherit; } pre, code, kbd, samp, tt { font-family: monospace; line-height: 100%; } a { text-decoration: none; } a:hover, a:focus { text-decoration: underline; } strong { font-weight: bold; } input[type="submit"] { cursor: pointer; } button { cursor: pointer; }
5. Blog Garden
/*version: 2.7.0*/ html,body{color:#000;background:#FFF;} body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{ margin:0;padding:0; } table{border-collapse:collapse;border-spacing:0;} fieldset,img{border:0;} address,caption,cite,code,dfn,em,strong,th,var,optgroup{ font-style:inherit;font-weight:inherit; } del,ins{text-decoration:none;} li{list-style:none;} caption,th{text-align:left;} h1,h2,h3,h4,h5,h6{ font-size:100%;font-weight:normal;} q:before,q:after{content:'';} abbr,acronym{border:0;font-variant:normal;} sup{vertical-align:baseline;} sub{vertical-align:baseline;} legend{color:#000;} input,button,textarea,select,optgroup,option{ font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit; } input,button,textarea,select{*font-size:100%;} .clear{clear:both;} input::-moz-focus-inner{ border: 0;padding: 0;} /*added*/ input[type=button],input[type=submit] {-webkit-appearance: button;}
normalize:
The biggest feature of normalize.css: keep the useful browser default style, instead of "erasing" them all, which is very browser friendly
vue How to use in framework NPM npm install --save normalize.css mianimport 'normalize.css' If you make a mistake npm install css-loader style-loader web Front end development learning Q-q-u-n: 731771211,Share learning methods and small details that need to be paid attention to, constantly update the latest tutorials and learning methods (detailed front-end project practical teaching video, PDF)