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, and has some very special properties. Let’s summarize it for reference:
IE6 standard mode:◎ No matter what height and width are set for it, its size always fills 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 a special 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 simpler in the y direction, similar to IE6's understanding of normal 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: If the width of <html> is all values other than non-0 values (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 fill the content space of <html>.
3. If <body> itself has shrinking and surrounding characteristics, such as setting position:absolute or display:inline (strangely, float 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 the 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 a strange 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 2nd point in the first case - a content space full of <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 strangely affect the percentage reference of <body> (or the containing block of <body>).
In the y direction, if the height of <html> is the default value auto, then the height of <body> will be ignored if it takes a percentage value. 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 margin+border+padding heights of the viewing area height minus <html>.
In the x direction, if width takes the default value auto, and 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 margin+border+padding widths 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 strange 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... It's not easy to say that loving you...
IE5 and Quirks modes◎<html> and <body> All width and height settings are ignored and remain full of viewports.
◎<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.