The related concepts and examples of CSS reset

Original

The original Book of Jane: https://www.jianshu.com/p/fdb79010895c

Outline

1. What is CSS reset?
2. Example of CSS Reset

1. What is CSS reset?

Personal understanding: is to make different browser initialization CSS style Unified

1.1. In today's web design/development practice, it is important to use CSS to add style styles to semantic (X) HTML tags. There is a perfect world in the designers ' dreams: All browsers are able to understand and apply CSS rules and have the same visual effect (no compatibility issues). However, we do not live in this perfect world, the reality of the theft is always the opposite, many CSS styles in different browsers have different interpretations and rendering.

1.2. In today's popular browsers (such as Firefox, Opera, Internet Explorer, Chrome, Safari, etc.), some are in their own way to understand the CSS specification, This leads to the browser's interpretation of CSS and the designer's CSS definition of conflict, so that the appearance of the Web page in some browsers can be correctly displayed according to the designer's ideas, but some browsers do not follow the way the designer wants to display, which leads to browser compatibility issues. To make things worse, some browsers completely ignore some of the CSS's declarations and properties.

1.3, because the above conflicts and problems still exist in this "imperfect world", so some designers think of a way to avoid browser compatibility problems, that is, CSS Reset, what is the CSS reset? We can call it CSS Reset, others called CSS Reset, default CSS, CSS reset and so on. CSS reset is because the various browsers interpret the initial value of CSS style is different, causing the designer to not define a CSS property, different browsers will follow their own default values to the undefined style assignment, so we have to define some CSS style, To let all browsers interpret the CSS in the same way, so that this problem can be avoided.

2. Example of CSS Reset

The following CSS reset instances are I collected from the Internet, usually also according to the circumstances of the selection of one to use, readers can choose one according to their preferences to use, hoping to help readers.

2.1. The most simplified CSS reset (reset)

    /* This is the most common and simplest CSS reset, setting the padding and margin values of all elements to 0, which avoids the "divergence" of some browsers in understanding the default values of the two properties. (This method is not recommended, too rough */* {      padding:0;      margin:0;}

2.2. Csslab CSS Reset

/* Reference URL: http://blog.bingo929.com/css-reset-collection.html*/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, Font, IMG, ins, KBD, Q, S, Samp, Small, strike, strong, sub, SUP, TT, VAR, DL, DT, DD, OL, UL, Li, FieldSet, form, label, legend, table, caption, Tbody, t     Foot, THEAD, tr, TH, TD {Margin:0;     padding:0;     border:0;     outline:0;     Font-weight:inherit;     Font-style:inherit;     font-size:100%;     Font-family:inherit; Vertical-align:baseline;     }: Focus {outline:0;} table {border-collapse:separate; border-spacing:0;     } caption, Th, TD {Text-align:left; Font-weight:normal; } a img, iframe {border:none;} OL, ul {list-style:none;} input, textarea, select, button {font-size:10     0%; Font-family:inherit; } select {Margin:inherit;}/* Fixes incorrect placement of numbers in Ol ' s in IE6/7 */OL {Margin-leFt:2em;     }/* = = Clearfix = = */. Clearfix:after {content: ".";     Display:block;     height:0;     Clear:both; Visibility:hidden; }. clearfix {display:inline-block;} * html. clearfix {height:1%;}. clearfix {display:block;}

2.3, Zhang Xin Xu's css-reset

HTML, body, Div, span, object, IFRAME,H1, H2, H3, H4, H5, H6, p, blockquote, PRE,ABBR, address, cite, Code,del, DFN, EM, I MG, ins, kbd, Q, Samp,small, strong, Sub, SUP, var,b, I,DL, DT, DD, OL, UL, Li,fieldset, form, label, Legend,table, Captio  N, Tbody, TFOOT, THEAD, tr, TH, td,article, aside, canvas, details, figcaption, figure, Footer, Header, Hgroup, menu, NAV,    section, Summary,time, mark, audio, video {margin:0;    padding:0;    border:0;    outline:0;    font-size:100%;    Vertical-align:baseline; Background:transparent;} Body {line-height:1;}:focus {outline:1;} article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary {display:block;} Nav ul {list-style:none;} BLOCKQUOTE, q {quotes:none;}    Blockquote:before, Blockquote:after,q:before, q:after {content: '; Content:none;}    a {margin:0;    padding:0;    border:0;    font-size:100%;    Vertical-align:baseline; Background:transparent;} INS {background-color: #ff9;    Color: #000; Text-decoration:none;}    Mark {background-color: #ff9;     Color: #000;    Font-style:italic; Font-weight:bold;} del {Text-decoration:line-through;}    Abbr[title], Dfn[title] {border-bottom:1px dotted #000; Cursor:help;}    Table {border-collapse:collapse; border-spacing:0;}    HR {display:block;    height:1px;       border:0;    border-top:1px solid #cccccc;    Margin:1em 0; padding:0;} Input, select {Vertical-align:middle;}

　　

The related concepts and examples of CSS reset