Was ist CSS-Reset? Manche Kollegen nennen es „CSS-Reset“, andere nennen es vielleicht „Standard-CSS“...
Ich glaube, Sie werden ein neues Verständnis von CSS-Reset haben, nachdem Sie es vollständig gelesen haben Text
PS:
* {
padding: 0;
margin: 0;
}Dies ist der am häufigsten verwendete CSS-Reset, aber hier gibt es viele Probleme.
Der erste Teil des Originalartikels spricht viel über CSS und die Unterschiede in den CSS-Regeln der einzelnen Browser. Der „CSS-Reset“ ist auch auf Kompatibilität und Vereinheitlichung ausgerichtet. Kann die Leistung bis zu einem gewissen Grad verbessern.
Vielen Dank an Perishable für die Organisation und Zusammenfassung.
Das Folgende ist eine kurze Einführung in verschiedene Arten von CSS-Resets ist begrenzt. Bitte lesen Sie es.
Minimalistischer Reset [Version 1]
Und das haben wir auch oft verwendet
* {
padding: 0;
margin: 0;
}Minimalistischer Reset [Version 2]
Das Design von border:0 ist etwas unzuverlässig
* {
padding: 0;
margin: 0;
border: 0;
}Minimalistischer Reset [Version 3]
Natürlich ist das so nicht empfohlen. Es kommt zu Konflikten mit einigen Standardstilen
* {
outline: 0;
padding: 0;
margin: 0;
border: 0;
}Condensed Universal Reset
Dies ist eine Schreibmethode, die der Autor derzeit bevorzugt. Sie gewährleistet die Einheitlichkeit relativ häufiger Browserstile 🎜>
* {
vertical-align: baselinebaseline;
font-weight: inherit;
font-family: inherit;
font-style: inherit;
font-size: 100%;
border: 0 none;
outline: 0;
padding: 0;
margin: 0;
}Es wird auch oft auf einigen Websites gesehen
html, body {
padding: 0;
margin: 0;
}
html {
font-size: 1em;
}
body {
font-size: 100%;
}
a img, :link img, :visited img {
border: 0;
}Und diese Art von Regeln zielt auf einige wichtige Ziele ab Verwendete Browser.
Zum Beispiel IE, Firefox usw.
Yahoo CSS Reset
Der von den Yahoo-Leuten geschriebene Reset wird persönlich empfohlen
body, p, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre,
form, fieldset, input, p, blockquote, table, th, td, embed, object {
padding: 0;
margin: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset, img, abbr {
border: 0;
}
address, caption, cite, code, dfn, em,
h1, h2, h3, h4, h5, h6, strong, th, var {
font-weight: normal;
font-style: normal;
}
ul {
list-style: none;
}
caption, th {
text-align: left;
}
h1, h2, h3, h4, h5, h6 {
font-size: 1.0em;
}
q:before, q:after {
content: '';
}
a, ins {
text-decoration: none;
}Erik Meyers CSS-Reset
Der Autor hat den Code von Erik Meyer neu angeordnet, aber die Funktion ist immer noch dieselbe
body,p,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,
fieldset,input,textarea,p,blockquote,th,td {
padding: 0;
margin: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset,img {
border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-weight: normal;
font-style: normal;
}
ol,ul {
list-style: none;
}
caption,th {
text-align: left;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
font-size: 100%;
}
q:before,q:after {
content:'';
}
abbr,acronym { border: 0;
}
Condensed Meyer Zurücksetzen
Im Allgemeinen handelt es sich hierbei um eine Modifikation und Verbesserung von Erik Meyers CSS-Reset
html, body, p, span, applet, object, iframe, table, caption, tbody, tfoot, thead, tr, th, td,
del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend {
vertical-align: baselinebaseline;
font-family: inherit;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
outline: 0;
padding: 0;
margin: 0;
border: 0;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
background: white;
line-height: 1;
color: black;
}
ol, ul {
list-style: none;
}
/* tables still need cellspacing="0" in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
font-weight: normal;
text-align: left;
}
/* remove possible quote marks (") from <q> & <blockquote> */
blockquote:before, blockquote:after, q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
