L'élément <html>, l'élément racine du document XHTML, est très familier. Cependant, j'ai essayé de faire une mise en page récemment et j'ai constaté que dans IE, ce n'est pas un rôle si simple, avec des "natures" extraordinaires. Résumons-le pour référence:
Mode standard IE6:◎ Peu importe la hauteur et la largeur pour lui, sa taille couvre toujours toute la zone d'observation.
◎ Peu importe le type de rembourrage et de bordure pour lui, la taille et la taille remplissent toujours toute la zone d'observation.
◎ La marge sera ignorée.
◎ Bloc de contenu initial est la largeur de bordure de la zone de vue rectangulaire moins <html>
En utilisant CSS3 pour l'exprimer, nous pouvons considérer <html> dans IE6 comme un élément extraordinaire de hauteur: 100%; Largeur: 100%; Dimensionnement en boîte: Border-Box; Et ces attributs sont immuables.
Mode standard IE7:Bien que IE7 ait corrigé plusieurs bogues CSS dans IE6, la compréhension de <html> est beaucoup plus compliquée que IE6. Bien que IE6 soit bizarre, il y a peu d'attributs qui peuvent être modifiés, donc c'est toujours simple. Le <html> d'IE7 peut accepter plus d'attributs, mais l'algorithme ne suit pas les spécifications et est honnête, il est donc beaucoup plus difficile de le comprendre que IE6.
Le premier est la fonction d'extension automatique.
L'élément <html> est simple dans la direction Y et est similaire à la compréhension d'IE6 de la hauteur des éléments ordinaires - si la hauteur du contenu dépasse la hauteur de <html>, ou si le <html> n'a pas de hauteur fixe (c'est-à-dire la valeur par défaut), alors <html> étendra automatiquement sa propre hauteur pour inclure le contenu.
Mais dans la direction X, le problème se concentre principalement sur la compréhension de la largeur de <body>. Voici deux situations: (N'a-t-elle pas dit <html>? Pourquoi avez-vous parlé de la largeur de <body>? Parce que si <html> veut se développer automatiquement, vous devez savoir à quel point le <body> est de se développer.)
Le premier cas: la largeur de <html> s'il s'agit d'une valeur autre qu'une valeur autre qu'une valeur qui n'est pas 0 (y compris la valeur par défaut automatique), alors la largeur de <body> est déterminée par les règles suivantes:
1. Si la largeur de <body> est une valeur fixe, il y a tellement de largeur.
2. Si la largeur de <body> est la valeur par défaut automatique, la largeur couvrira l'espace de contenu de <html>.
3. Si <body> lui-même a des caractéristiques de rétrécissement et environnantes, telles que la position de réglage: absolue ou affichage: en ligne (la chose étrange est flottante mais ne satisfait pas cet élément, il satisfait 2), alors cela dépend de la largeur du contenu.
Le deuxième cas: si la largeur de <html> est 0, alors les 1er et 3e points sont les mêmes que ci-dessus, et le 2ème point, s'il y a une largeur de valeur par défaut, la largeur s'adaptera au contenu, mais qu'il y a un phénomène étonnant, c'est-à-dire que le <body> aura une frontière ou un deuxième point qui ne sera pas le même moment, sa larget - L'espace de contenu de <html> est recouvert de <html>. Étant donné que la largeur de <html> est 0 pour le moment, la largeur de <body> s'effondre également à 0.
Deuxièmement, les réglages de largeur et de hauteur de <HTML> affecteront étonnamment la référence en pourcentage du bloc contenant <body> (ou <body>).
Dans la direction Y, si la hauteur de <html> est la valeur par défaut automatique, alors si la hauteur de <body> prend une valeur pour pourcentage, elle sera ignorée. Mais une fois que la valeur de hauteur de <html> a une hauteur spécifique, même si elle est de 0, la hauteur de pourcentage de <body> sera appliquée. Mais ce qui est étrange, c'est que la référence de calcul pour ce pourcentage de hauteur n'est pas la hauteur du <html> juste défini, mais la somme des hauteurs de rembourrage de bordure de marge de la hauteur de la zone de vue moins le <html>.
Dans la direction x, si la largeur prend la valeur par défaut auto et que la direction y est différente, la largeur du pourcentage de <body> ne sera pas ignorée, mais sa référence de calcul est toujours aussi étrange que la direction Y, soustrayant la somme de la largeur de la bordeaux de bordure de la marge de <Html> pour la largeur de la fenêtre. Si la largeur a une valeur spécifique, elle sera remplacée en pourcentage de référence de largeur pour <body>.
Encore une fois, lorsque <body> est réglé en position: Absolu, la couleur bordure de <html> sera invalide. C'est un autre bug étonnant.
Enfin, le bloc contenant initial adopte un rectangle de la fenêtre, ce qui est fondamentalement normal. Mais il est impossible de créer un bloc contenant avec des éléments absolument positionnés. Mais peut-être que le bloc contenant créé par <html> est le rectangle de la fenêtre, qui sait.
C'est tellement désordonné. Ce n'est pas seulement une grosse tête mais aussi une grosse tête après l'avoir réglé. Je ne sais pas si vous pouvez le voir clairement après avoir regardé en arrière à l'avenir. IE7 Ah IE7 ... Je veux dire que je t'aime beaucoup ...
Ie5 et modes de bizarrerie◎ <html> et <body> Tous les réglages de largeur et de hauteur sont ignorés et restent pleins de zones de visualisation.
◎ <html> Le rembourrage et la marge ne sont pas acceptés.
◎ <body> accepter le rembourrage et la marge, mais la marge négative n'a pas d'effet visuel, mais sera amené lors du calcul des autres paramètres correspondants.
La frontière, l'arrière-plan et les autres attributs de <Body> seront transférés vers le haut vers l'élément <html>.
◎ Bloc de contenu initial est le bord de rembourrage de <body>.
utilitéCe résumé est dérivé du problème de mise en page au début. Le problème de mise en page est l'une de ses utilisations. Je vais réécrire un post pour le régler plus tard. Mais cette disposition utilise uniquement quelques fonctionnalités, et il devrait y avoir plus de potentiel pour les exploiter, alors étudiez-le lentement.