La différence entre CSS width:100% et width:auto

La différence entre CSS width:100% et width:auto

Questions

Lorsque j'ajustais la structure de l'arborescence il y a quelque temps, j'ai constaté que si le nom du nœud de l'arborescence est relativement long, les éléments externes ne seront pas ouverts sous IE6, ce qui entraînera l'affichage de seulement la moitié du nom du nœud. être affiché, ainsi que l'icône et le nom à envelopper. Il est affiché, mais il s'affiche normalement sous IE8 et IE9. Après avoir localisé le problème, nous avons finalement découvert qu'il était dû aux attributs suivants, comme indiqué en rouge dans l'image ci-dessous. Définir la valeur de largeur sur auto peut résoudre le problème :

<. table border=" 1">

 

.TreeView,.TreeView ul{ 

    padding:0px 0px 0px  19px; 

    list-style:none; 

    margin:0px 0px; 

    width:100%;/*这里修改为auto*/ 

    background:url(./trstree-default-line.gif)  repeat-y 0px  center ;

}

 

.TreeView,.TreeView ul{

rembourrage :0px 0px 0px 19px;

style de liste : aucun ; marge:0px 0px;

largeur :100% ;/*Changez ici en auto*/

background:url(./trstree-default-line.gif) répéter-y 0px center ;

} 2. Conclusion [1] width:100% n'inclut pas la valeur d'attribut de margin-left et margin-right Il prend directement la largeur de son conteneur parent. plus margin-left /margin -La valeur de droite. Si margin est défini, la nouvelle valeur de largeur est la largeur du conteneur plus la valeur de marge. (Observez attentivement) Vous constaterez que si une marge est ajoutée, le côté correspondant aura plus d'espace vide. Et il y aura davantage de barres de défilement horizontales car la largeur a dépassé la portée de l'écran. (Il s'agit du corps relatif au conteneur parent). [2] width:auto contient la valeur d'attribut margin-left/margin-right. Sa valeur contient les valeurs de margin-left / margin-right. width:auto occupe toujours toute la ligne  ! ! ! La valeur de marge est déjà incluse (c'est-à-dire une ligne entière). Si vous souhaitez définir la valeur de marge, utilisez une ligne entière, puis soustrayez la valeur de marge pour obtenir la largeur actuelle. La valeur soustraite est le blanc du côté correspondant. La particularité notable est qu'aucune barre de défilement horizontale n'apparaît, c'est-à-dire que la largeur n'augmente pas. [3] L'affichage n'est pas normal sous IE6, mais il s'affiche normalement sous IE8 et IE9. Cela peut être dû au fait que IE8 et IE9 ont une analyse de largeur : 100 % différente de celle d'IE6. , mais les deux analyses width:auto sont cohérentes.

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!