CSS-Reset-Methode (Zurücksetzen) Arrangement_Erfahrungsaustausch

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 🎜>

Poor Man's Reset

* { 
vertical-align: baselinebaseline; 
font-weight: inherit; 
font-family: inherit; 
font-style: inherit; 
font-size: 100%; 
border: 0 none; 
outline: 0; 
padding: 0; 
margin: 0; 
}

Tatsächlich ist dies auch eine Art von CSS-Reset, die wir häufig verwenden. Es setzt die Schriftgröße zurück und verwaltet den Rand von Bildlinks.

Es wird auch oft auf einigen Websites gesehen

Shaun Inmans Global Reset

html, body { 
padding: 0; 
margin: 0; 
} 
html { 
font-size: 1em; 
} 
body { 
font-size: 100%; 
} 
a img, :link img, :visited img { 
border: 0; 
}

Der Autor glaubt, dass Shaun mit dem Schreiben dieser Art von CSS-Reset einen bestimmten Zweck verfolgt

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

Dieser Satz von CSS-Reset ist der am häufigsten verwendete in der Branche

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: "" ""; 
}