The <html> element, the root element in the XHTML document, is very familiar. However, I have been trying to make a layout recently and found that in IE, it is not such a simple role, with some extraordinary "natures". Let's summarize it for reference:
IE6 standard mode:◎ No matter what height and width are set for it, its size always covers the entire viewing area.
◎No matter what kind of padding and border are set for him, the size and size always fill the entire viewing area.
◎ Margin will be ignored.
◎Initial containing block is the border width of the view area rectangle minus <html>
Using CSS3 to express it, we can regard <html> in IE6 as an extraordinary element of height:100%; width:100%; box-sizing:border-box; and these attributes are immutable.
IE7 Standard Mode:Although IE7 has fixed several CSS bugs in IE6, the understanding of <html> is much more complicated than IE6. Although IE6 is weird, there are few attributes that can be changed, so it is still simple. IE7's <html> can accept more attributes, but the algorithm does not follow the specifications and is honest, so it is much more troublesome to figure it out than IE6.
The first is the automatic expansion feature.
The <html> element is simple in the y direction, and is similar to IE6's understanding of ordinary element height - if the content height exceeds the height of <html>, or if the <html> does not have a fixed height (i.e. the default value auto), then <html> will automatically expand its own height to include the content.
But in the x direction, the problem mainly focuses on the understanding of the width of <body>. Here are two situations: (Didn't it say <html>? Why did you talk about the width of <body>? Because if <html> wants to automatically expand, you must know how wide the <body> is to expand.)
The first case: width of <html> If it is any value other than a value other than a value that is not 0 (including the default value auto), then the width of <body> is determined by the following rules:
1. If the width of <body> is a fixed value, then there is so much width.
2. If the width of <body> is the default value auto, the width will cover the content space of <html>.
3. If <body> itself has shrinking and surrounding characteristics, such as setting position:absolute or display:inline (the strange thing is float but does not satisfy this item, it satisfies 2), then it depends on the width of the content.
The second case: If the width of <html> is 0, then the 1st and 3rd points are the same as above, and the 2nd point, if the width of <body> is the default value auto, the width will adapt to the content, but there is an amazing phenomenon, that is, if <body> has a border or padding that is not 0 at the same time, its width will not adapt to the content and will become the second point in the first case - the content space of <html> is covered with <html>. Since the width of <html> is 0 at this time, the width of <body> also collapses to 0.
Secondly, the width and height settings of <html> will surprisingly affect the percentage reference of <body> (or <body>'s containing block).
In the y direction, if the height of <html> is the default value auto, then if the height of <body> takes a percentage value, it will be ignored. But once the height value of <html> has a specific height, even if it is 0, the percentage height of <body> will be applied. But what is strange is that the calculation reference for this percentage height is not the height of the <html> just set, but the sum of the margin border padding heights of the view area height minus the <html>.
In the x direction, if width takes the default value auto, and the y direction is different, the percentage width of <body> will not be ignored, but its calculation reference is still as strange as the y direction, subtracting the sum of the margin border padding width of <html> for the viewport width. If width has a specific value, it will be replaced as a percentage width reference for <body>.
Again, when <body> is set to position:absolute, the border-color of <html> will be invalid. This is another amazing bug.
Finally, the initial containing block adopts a viewport rectangle, which is basically normal. But it is impossible to create a containing block with absolutely positioned elements. But maybe the containing block created by <html> is the viewport rectangle, who knows.
It's so messy. It's not only a big head but also a big head after sorting it out. I don't know if you can see it clearly after looking back in the future. IE7 Ah IE7...I want to say I love you very much...
IE5 and Quirks modes◎<html> and <body> All width and height settings are ignored and remain full of viewing areas.
◎<html> padding and margin are not accepted.
◎<body> Accept padding and margin, but negative margin has no visual effect, but will be brought in when calculating other corresponding parameters.
◎<body>'s border, background and other attributes will be transferred upward to the <html> element.
◎Initial containing block is the padding edge of <body>.
usefulnessThis summary is derived from the layout problem at the beginning. The layout problem is one of its uses. I will rewrite a post to sort it out later. But that layout only uses a few features, and there should be more potential to tap, so study it slowly.