Some research and understanding of HTML and body

by Zhangxinxu from http://www.zhangxinxu.com
This address: http://www.zhangxinxu.com/wordpress/?p=259

One, written in the front of the
Recently has been thinking of writing an article about HTML tags, although the previous processing of HTML tags, but also solved a lot of difficult problems, but the understanding is not very thorough, many of the principles are their own speculation.
Check the relevant information on the Internet to integrate the relevant information, found in-depth discussion of HTML, and the body of the article is very few, only in the blue ideal to see a "a leaf thousand birds" of this "correct understanding of HTML and body" a little value, the rest is nothing relevant good article.
Here, I would like to tell the intersection of not much, as long as it is about the HTML and body of the various manifestations, as well as my own reasonable interpretation of these performance and provide some experience in the past to deal with similar problems, I hope to be helpful to everyone.

Ii. some manifestations of HTML and body
1. Background color
In general, the highest node of our CSS control is the body, for example, set: Body{background: #069;} The browser interface is the full #068 background color. It looks like the background color under the body tag works, I don't think so, here is not the body of the background function, but the body as a root node function, the HTML tag is not activated, body but when similar to the root node node, Its background background color is captured by the browser, the browser interface background color is background background color, the above is my inference, this inference is not I imagined, but there is a certain basis. Look at the following CSS code:

Body{background: #069; margin:100px; border:30px solid #093;}

The meaning is concise: the margin is 100 pixels, the border is 30 pixels, the background color is #069, according to the general label understanding, 100 pixels of the margin should not contain the background color, but the result is shown (Firefox behaves like this):

IE6 under Body sets background color border and margins

There is one more proof that my inference above is that once the background background color of the HTML node is set, the background color of the body will be invalidated. For example, the following short code:

Html{background: #999;} Body{background: #069; margin:100px; border:30px solid #093;}

Compared to the above, it is added HTML background color, the result (truncated from the Ie6,firefox browser performance consistent):

HTML tags set the background color after the style representation

What was the result? The full screen background color of the body tag disappears and "fails". In fact, in my opinion, not "failure", is effective. When the HTML tag has no background style, the body background color is not actually the background color of the body tag, but the browser. Once the HTML tag contains the background color, the body background color becomes the normal body tag (a real, ordinary label) background color, while the HTML tag at the top, the background color by the browser to become the browser's background color.

2.margin Support
As can be seen from the above example, whether it is the IE6 browser, or the Firefox browser, the body's margin property is supported, padding is the same, then for the HTML tag. Test code as follows:

Html{background: #999; margin:100px; border:30px solid #093;} Body{background: #069; margin:100px; border:30px solid #093;}

The HTML tag also adds margin spacing and a 30-pixel border, resulting in the following:
IE6 under:

IE6 Browser HTML is not sensitive to margin is not supported

Under Firefox browser:

The HTML tag in Firefox browser supports margin margins

This is scaled to 500 pixels wide picture, look closely or will find that IE6 margin does not work, the top edge is a 30-pixel border, Firefox under the margin function, you can see the 30-pixel border outside there is a space. The full-screen display of the background color of the HTML tag of this figure also further proves my inference about the principle of background color display.

3. About scroll bars
Open a blank page and look at the right side of the browser, and you'll find that IE will have a scroll bar slot, which is not available in the Firefox browser.

Blank page under IE and Firefox Firefox browser to the left of the scroll bar or not

Firefox does not have scroll bar, and sometimes create some experience problems, such as: Suppose a page height is limited, no scroll bar, when the mouse moved to an element, to display a floating layer, but this floating layer has a certain height, plus the mouse position is low, once the floating layer appears, Perhaps the height of the page is high and scroll bar, which is under the Firefox browser will cause the page shaking, because the appearance of the scroll bar to reduce the width of the page, layout has some offset, and this cheap experience is not good. How to avoid it? Many people will think of setting body{overflow-y:scroll;} There is a scroll slot under Firefox, but there are two scroll bars under IE, as follows:

Maybe someone will think of hack,no,no,no, in fact, think carefully, the problem is very simple. Why IE will produce double fixed bar, inside that one must be body, then the outside of that one? Ah, perhaps you think of, HTML tag, that is, by default, IE6 under the HTML has a overflow:scroll; properties, proving very simple, you set the HTML tag Overflow:hidden; see if the scroll bar is gone (I have no proof here). So, just write it in CSS:

Html{overflow-y:scroll;}

You can let IE and Firefox (including Chrome) browser default to the scroll bar scroll slot.

4. Fixed positioning for background
Firefox is to support background:fixed; positioning, IE6 can only be said to be half-support, OK, so to speak, may not be too strict, that is, the background image fixed effect seems to only work at the root node. For a very simple example:
First look at this CSS code:

Body{background:url (.. /image/404.png) no-repeat Fixed Center Center;} div{height:2000px;}

The HTML section is:

<body><div></div></body>

The result is that both the IE6 and the Firefox browser, the background image is fixed and dead, good. However, once the HTML tag comes in with the background attribute participating, things are going to change. Problem code:

Html{background:white;} Body{background:url (.. /image/404.png) no-repeat Fixed Center Center;} div{height:2000px;}

Results IE6, the background is not fixed, only see the background picture with the scroll bar move up and down. Demo page

To solve this problem, there is also a way, is to transfer the fixed attribute to the HTML tag on it. That

Html{background:white URL (.. /image/404.png) no-repeat Fixed Center Center;} div{height:2000px;}

You can do it.

5. About height:100%;
To work with a height percentage, in general, two conditions are met: First, the parent tag is highly available, that is, walking up the parent tag to find a fixed height (body,html also discussed), if there is a height in the middle of auto or not set the Height property, The height percentage does not work; the properties of the label itself, if the label of the inline attribute, if no float, zoom, or absolute positioning is not supported, the block or Inline-block attribute can be said to be one of the prerequisites for the height percentage to work.
And this is about the height percentage of the body and the HTML shown.
By default, the body is not a height 100% display, do not look at the body definition Background property as if the body is full screen display, as inferred above, this background is not the body of the background. With this body{background: #039; border:50px solid #C00;} A test is known. See if the border range is 100% high, the answer is no. See (Cut from Ie6,firefox browser performance consistent):

The body default height is not 100% displayed

So does the body support height:100%? After my test, IE6 support, Firefox browser does not support.

Before the time to see the Baidu interview, said what transparent layer regardless of whether scrolling or not full screen display, in fact, the HTML and body tags do some hands and feet, both height 100% display, Overflow hidden at the same time (Overflow:hidden), then with a div height 100%-series display, overflow scrolling. And this transparent layer uses absolute positioning and with this div level, aspect 100% display, it can make no matter how to scroll this transparent overlay is full screen display. In fact, it solves the classical method of fixed positioning of floating layer under IE6.

6. css hack about Html,body
Unconsciously said a lot, this is even the last bar.
I've seen a couple of hack about HTML and body tags, one for HTML body, one for *+html, and one for HTML > body, and Body:nth-of-type (1). The former is the classic IE6 css hack, in the current mainstream browser, IE6 support, its meaning is that there is a hidden ghost tag outside the HTML tag, I do not know what, anyway IE6 recognize it on the line. *+html It is said that only IE7 recognize it. HTML > body is also said to IE7 know it, and Body:nth-of-type (1) is for the Chrome browser hack, meaning that the first element of a tag, because a page is only a body tag, so this will certainly be set up, So Body:nth-of-type (1) div{height:1px;} This hack is going to work.

Third, the final conclusion
Technology is endless, CSS this thing is very profound, even if I hit the keyboard do not know how many hours, or some words did not say finish. If you combine Javascript,demo, you may have to say it all night. Here's the first, donuts. About the HTML and body of the two tags contained in the knowledge is a lot of, I am here to make a point, more content still need you to study to explore.

Original article, reprint please indicate from Zhang Xin Xu-Xin space-Xin Life [http://www.zhangxinxu.com]
This address: http://www.zhangxinxu.com/wordpress/?p=259

Some research and understanding of HTML and body