The introduction and best processing method of the browser's default style

Recently, I have adjusted the format of the webpage to find that there is always a space of about 10 pixels at the bottom of the webpage.

It is found that there is a Margin-Botton: 1EM;

I found that this User Agent Stylesheet is some of the default styles of the stray. The easiest solution to be dissatisfied with this default style is to redesign the attributes of this style, because the User Agent Stylesheet priority is very low and will be covered. This will not affect our style. For example, I will talk about FORM here. Margin-Bottom is set to 0px.

Different browsers are inconsistent with the default style of the same element, which is why we have to write in the beginning of CSS* {padding: 0; marging: 0};

But now it's not just these. Basically, there will be differences in the performance of two browsers of different kernels in certain elements, such as the size, font selection, and character style of indentation. Perhaps a very beautiful CSS style table is well performed on one browser. On another browser, even if there is no CSS BUG, ​​the structure will become chaotic. I am the browser's default style.

Therefore, when we generate the CSS style rules, a must -do step is to redesign the default style of the browser, that is, the default style of the browser. Different from the use of* {padding: 0; margin: 0}, not all elements exist in padding and margin. Margin's indentation and padding indentation).

For example, the following paragraph:

The font used in this code in the Internet Explorer is Times New Roman, and the system default font is used in Firefox and Opera. Therefore, we must set a unified style for <H1> in CSS.

However, if we use the through -the -best style if we use* {padding: 0; margin: 0}* to simply set the global style, then a very obvious problem will appear, such as Form elements, input elements, Textarea, etc. Some browsers will ignore the redesign of them, and more importantly, this will seriously damage the appearance of these elements, so you have to manually set a padding value and margin value for them one by one. So we should give up simply use*, but replay the first element with inconsistencies in existence, such as Body, DIV, DL, DT, DD, UL, OL, LI, H2, H3, H4, H5, H5, h5 , H6, Pre, etc.

At the same time, the default style of the element may destroy the appearance of the page. For example, <b> elements will thicken the text, <blockquote> will indentation in a large section, <em> will tilt text, etc. If you want to ask for the appearance of the page text Re -set. At the same time, sometimes we require the appearance of these elements as the parent element, and we can directly use Inherit to inherit from the parent element.

As for which elements should be re -set? Yahoo! has made a summary for us. According to Yahoo's suggestion, you need to put these rules in a file called Reset.css alone (recommend this method):

 html {color:#000; background: #fff;} body, div, dl, dd, dd, ul, li, h2, h3, h5, h6, premet, fieldSet, input, textArea, textarea , P, Blockquote, Th, TD {margin: 0; padding: 0;} Table {border-color: color-spacing: 0;} fieldSet, img {border: 0;} Address, CAPTION, CAPTION CITE, Code, DFN, EM, Strong, TH, VAR {FONT-Style: Normal; FONT-weight: Normal;} OL, UL {list-style: none;} Caption, th {text-alft: left;} h1, h2, h3 , H4, H5, H6 {font-siZe: 100%; font-weight: normal;} q: before, q: after {content: '';} abbr, acronmm {border: 0;}

What you have to do is to simply save these rules into the reset.css and use it in the page. When you need to add new styles to these elements, it is no different from the setting of other elements.

The above is all the contents of this article. I hope that the content of this article will help everyone's learning or work. If you have any questions, you can leave a message to communicate. Thank you for your support for VEVB Wulin.com.