How do Web front ends make Web page layouts stable and standard?

Just beginning to learn css+div layout of the students, are more confused and difficult to write is the problem of compatibility, especially the IE6 and other low version of the browser, casual domestic gradually disappear to replace, but at this stage will be a little consideration of the factors inside. What is the layout of the Web page we write is reasonable, complete, compatibility good?
So here, Xiao Qiang to everyone list layout standards, rationality and compatibility of some of the methods, I hope to start learning CSS students have some help.

First, <! The importance of the doctype> tag.

At the very front of the document, which is used to explain to the browser which HTML or XHTML standard specification is used by the current document, we must use the <! at the beginning The doctype> tag specifies the XHTML version and type for all XHTML documents, so that the browser can use the page as a valid XHTML document and resolve it by the specified document type.
<! doctype> tag and browser compatibility related, delete <! Doctype>, is the right to display HTML page to the browser, at this time, ie6,ie7,ie8,firefox2,firefox3,chrome, how many kinds of browsers, the page may have how many display effect, this is not allowed.

second, the appropriate place to use the appropriate label

Maximize your talent. The right place to use a reasonable label, the layout and optimization of the page has a lot of benefits, such as logo, generally we use H1 tags included. There is also an understanding of the difference between inline and block-level elements.

A page should not only use Div, too much is too flood. Table Although the use of less, but, to do some data processing time, is still more useful. For example, the following, must use the list of UL.

Thirdly, the stability of padding and maring and width are viewed from the angle of standard flow.

We know the layout of the page, the control box location distance, etc., there is the box itself size, padding and margin to do.
Look first, then the Firebug of Firefox to see the display of their three.


So here we will look at the order of the three in terms of stability:
The best stability is the height and width of the box itself, we give priority to this. Therefore, in many cases, we will consider using the high residual method, the width remainder method, rather than padding and margin.
Like what:

This comment has a small distance from the text field box below, at which point we give this comment a H2 tag, which is exactly the height from the top of the comment, to the height of the text field, as shown in the yellow section.


H2 inside the text content by default is by the left upper alignment, the height cannot use, left, this is the high residual method.

Second, we consider padding, because padding can also be seen as a special box height and width, and finally we use margin to do it. Because margin is a problem with margin merging.

iv. stability of standard flow, floating flow and positioning

Standard flow is the most stable inside, that is, block-level elements are displayed, the row within the line display, are the most stable.
Floating and positioning are "off the mark", stability is not so stable, so we should follow the following principles:
Page layout, can use the standard flow to do without floating to do, if you want to do with the floating, you do not have to locate to do.

Five, the enemy victorious

There will always be special browsers, such as IE6, these wonderful browser always have their own unique place, then we do? The Art of War, the enemy victorious, therefore, we need to understand the browser's own unique features, or master their IE6 often appear bug, and the understanding of CSS, then we based on their different analysis, write a reasonable layout.

Six, do not let the clearance inside the outer margin cause trouble

HTML, Body, UL, Li, ol, DL, DD, DT, p, H1, H2, H3, H4, H5, H6, form, fieldset, Legend, img {margin:0; padding:0;}

This sentence, as we all know, clears the browser style. But if you do not add, different browsers will definitely show the difference. So, the first sentence of CSS is it. There is also the need to use most of the browsing supported CSS properties without causing unnecessary hassle.

The above points, is Xiao Qiang teacher, to sum up a few points, I hope that the new students to learn some help.

cockroach 00   Share with everyone