Explication détaillée sur l'utilisation de l'attribut auto en CSS

—Qu'est-ce que auto ?

+auto signifie adaptatif. Auto est la valeur par défaut pour de nombreuses valeurs de taille, qui est automatiquement calculée par le navigateur.

+La somme de la marge, de la bordure, du remplissage et de la largeur du contenu dans l'élément de niveau bloc constitue l' élément parent largeur.

Après avoir utilisé l'attribut auto, si la largeur de l'élément parent change, la largeur de l'élément changera également en conséquence.

Dans l'image ci-dessous, la valeur de auto est la somme de la marge, de la bordure, du remplissage et de la largeur du contenu

+ Mais quand le element est Lorsqu'il est défini sur float , la largeur de l'élément devient la largeur du contenu , qui est étirée par le contenu, ce qu'on appelle le habillage .

overflow | position:absolute | float:left/right peut produire un emballage, et les éléments de remplacement ont également un emballage.

*|position:relavtive|le positionnement relatif occupe la position d'origine et ne peut pas réaliser de conversion de mode, c'est-à-dire qu'il n'a pas de propriétés d'emballage.

Par conséquent, width: auto; ne peut pas être utilisé sur des éléments enveloppés pour adapter la largeur de l'élément à la largeur du navigateur. Comme le montre la figure ci-dessous

— Parfois, la configuration de margin:0 auto ne fonctionne pas ?

+maigin: 0 auto; signifie que les marges supérieure et inférieure de l'élément sont 0, et que les marges gauche et droite sont adaptatives en fonction de la largeur de l'élément parent (corps), c'est-à-dire la gauche et à droite sont centrés horizontalement. Si ce paramètre ne fonctionne pas, il y a essentiellement deux raisons.

+ (1) La largeur n'est pas définie pour p. Si p a une largeur, il ne peut pas faire référence à la largeur de l'élément parent pour effectuer sa propre auto.

+ (2) p est enveloppé, c'est-à-dire qu'il est hors du flux standard Tout comme le flux standard où se trouve l'objet parent est assimilé à la surface de la terre, l'élément enveloppé a déjà. monté vers le ciel. Il n'y a pas de largeur d'élément parent pour référence pour effectuer une opération automatique.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!