How CSS handles the browser's default style

This time for everyone to bring CSS how to deal with the default browser style, CSS processing browser default style note what, here is the actual case, take a look.

Found

Recently in the formatting of the page to adjust the discovery page always has a space of about 10 pixels.

By using the Chrome Rover review element found a margin-botton:1em called User Agent stylesheet to set the entire form;

Find this user Agent stylesheet is the default style for the rover by checking the data on the Internet. If the default style is not satisfied with the simplest solution is to reset the properties of the style, because the user agent stylesheet priority is very low, will be overwritten, so it will not affect our style, such as here I say the form of the margin-bottom set to 0px.

User Agent Stylesheet Introduction

Different browsers are not consistent with the default styles for the same elements, which is why we have to write * {padding:0;marging:0} at the beginning of the CSS.

But it's more than that. Basically, there are differences in the performance of some elements in two browsers of different kernels, such as size of indentation, font selection, character style, and so on. Perhaps a very beautiful CSS stylesheet in a good performance on a browser, even if there is no CSS bug in another browser will become chaotic, I am the browser default style in mischief.

Therefore, when we create CSS style rules, a necessary step is to reset the browser's default style, that is, to override the browser's default style. Unlike using * {padding:0;margin:0}, not all elements have differences in padding and margin (element list, ordered list in internet The difference between Xplorer and Firefox is that they are indented with margin indentation and padding indentation.

For example, the following paragraph:

The font used in Internet Explorer for this code is times New Roman, and the system default font is used in Firefox and opera. So we're going to

set a uniform style for the CSS.

However, if we use the wildcard character "*" as a simple way to set the global style, as with * {padding:0;margin:0}, then a very obvious problem will arise, such as a form element, INPUT element, TextArea and so on some browsers will ignore the re-setting them, more importantly this will seriously destroy the appearance of these elements, so you have to go manually to one by one for them to reset a padding value and margin value. So instead of simply using "*", we reset the first element with inconsistent performance, such as Body,p,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre and so on.

Also, the default style of the element may break the appearance of the page. For example, the element will be bold text,

will be large paragraph indentation, will make the text italic, if you want to request the page text appearance is consistent, you should also in the CSS to the appearance of these elements should be reset. At the same time, we sometimes require that these elements look like the parent element, and can be inherited directly from the parent element using inherit.

Processing methods

As to which elements should be reset? Yahoo! has made a comparison of our summary. Based on Yahoo's advice, you need to put these rules in a separate reference to a file named Reset.css (recommend this practice):

Html{color: #000; background: #FFF;} body,p,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form, Fieldset,input,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 {font-style:normal; font-weight:normal;} ol,ul {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;}

All you have to do is simply save these rules to reset.css and then use them on the page. When you need to add a new style to these elements, it's no different from the other elements ' settings.

Note: the above reset.css in input,textarea,select{*font-size:100%;} Only Internet Explorer is aware of this setting to make the Internet The size of the form control font can be scaled in the explorer.

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

Implementing a drop-down menu with HTML+CSS

Making a progress bar with CSS3