En un mot: 1) auto, la largeur / hauteur du div parent sera la somme de ses enfants. 2) 100 pour cent, sa largeur / hauteur sera celle de ses parents. Voir l'article ici
Alan Dong
Réponses:
142
Largeur auto
La largeur initiale d'un élément de niveau bloc comme div ou p est auto. Cela le fait se développer pour occuper tout l'espace horizontal disponible dans son bloc conteneur. S'il y a un remplissage horizontal ou une bordure, la largeur de ceux-ci ne s'ajoute pas à la largeur totale de l'élément.
Largeur 100%
D'autre part, si vous spécifiez width: 100%, la largeur totale de l'élément sera de 100% de son bloc contenant plus toute marge horizontale, remplissage et bordure (sauf si vous avez utilisé box-sizing: border-box, auquel cas seules les marges sont ajoutées aux 100% pour changer la façon dont sa largeur totale est calculée). C'est peut-être ce que vous voulez, mais ce n'est probablement pas le cas.
Donc, fondamentalement, cela n'a rien à voir avec la taille du contenu des éléments, mais se réfère totalement à la largeur du parent?
haemse
82
width: auto; essaiera aussi fort que possible de garder un élément de la même largeur que son conteneur parent lorsqu'un espace supplémentaire est ajouté à partir des marges, du remplissage ou des bordures.
width: 100%;rendra l'élément aussi large que le conteneur parent. Un espacement supplémentaire sera ajouté à la taille de l'élément sans égard au parent. Cela pose généralement des problèmes.
la même chose que @ C-link fourni mais une interface plus graphique supplémentaire. so +1
Navin Rauniyar
8
Il s'agit de marges et de frontières. Si vous utilisez width: auto, puis ajoutez une bordure, votre div ne deviendra pas plus grand que son conteneur. Par contre, si vous utilisez width: 100%une bordure et, la largeur de l'élément sera de 100% + bordure ou marge. Pour plus d'informations, consultez ceci .
Tant que la valeur de width est auto, l'élément peut avoir une marge horizontale, un padding et une bordure sans devenir plus large que son conteneur (sauf bien sûr la somme de margin-left + border-left-width + padding-left + padding-right + border-right-width + margin-right est plus grand que le conteneur). La largeur de sa zone de contenu sera celle qui restera lorsque la marge, le remplissage et la bordure auront été soustraits de la largeur du conteneur.
D'autre part, si vous spécifiez width: 100%, la largeur totale de l'élément sera de 100% de son bloc contenant plus toute marge horizontale, remplissage et bordure (sauf si vous avez utilisé box-sizing: border-box, auquel cas seules les marges sont ajoutées aux 100% pour changer la façon dont sa largeur totale est calculée). C'est peut-être ce que vous voulez, mais ce n'est probablement pas le cas.
La largeur initiale d'un élément de niveau bloc comme div ou p est auto.
Utilisez width: auto pour annuler les largeurs explicitement spécifiées.
si vous spécifiez width: 100%, la largeur totale de l'élément sera de 100% de son bloc conteneur plus toute marge horizontale, remplissage et bordure.
Ainsi, la prochaine fois que vous définissez la largeur d'un élément de niveau de bloc à 100% pour qu'il occupe toute la largeur disponible, déterminez si ce que vous voulez vraiment est de le définir sur auto.
Largeur 100%:
il fera du contenu avec 100%. La marge, la bordure, le remplissage seront ajoutés à cette largeur et l'élément débordera si l'un de ces éléments est ajouté.
Largeur auto:
il s'adaptera à l'élément dans l'espace disponible, y compris la marge, la bordure et le remplissage. l'espace restant après le réglage de la marge + du rembourrage + de la bordure sera disponible en largeur / hauteur.
Largeur 100% + dimensionnement de la boîte: boîte de bordure:
Elle adaptera également l'élément dans l'espace disponible, y compris la bordure, le rembourrage (la marge le fera déborder du conteneur).
Cela ne répond pas à la question de la différence entre 100 & et auto.
JoeTidee
1
Oui, je sais mais j'essaye de montrer ici à propos de width: auto et display: inline-block . Lorsque nous voulons augmenter automatiquement la largeur d'un élément de niveau de bloc, nous pouvons l'utiliser. Et différence entre 100% et auto
Mohammed Javed
0
Quand on dit
width:auto;
width ne dépassera jamais la largeur totale de l'élément parent. La largeur maximale correspond à la largeur du parent. Même si nous ajoutons une bordure, un remplissage et une marge, le contenu de l'élément lui-même deviendra plus petit afin de laisser de l'espace pour la bordure, le remplissage et la marge. Si l'espace requis pour la bordure + le remplissage + la marge est supérieur à la largeur totale de l'élément parent, la largeur du contenu deviendra zéro.
Quand on dit
width:100%;
la largeur du contenu de l'élément deviendra 100% de l'élément parent et à partir de maintenant, si nous ajoutons une bordure, un remplissage ou une marge, l'élément enfant dépassera la largeur de l'élément parent et commencera à déborder de l'élément parent.
Réponses:
Largeur auto
Largeur 100%
Pour visualiser la différence, voyez cette image:
La source
la source
width: autose comporte de cette façon: stackoverflow.com/questions/28353625/…autofait la même chose quefill-availablewidth: auto;essaiera aussi fort que possible de garder un élément de la même largeur que son conteneur parent lorsqu'un espace supplémentaire est ajouté à partir des marges, du remplissage ou des bordures.width: 100%;rendra l'élément aussi large que le conteneur parent. Un espacement supplémentaire sera ajouté à la taille de l'élément sans égard au parent. Cela pose généralement des problèmes.la source
Il s'agit de marges et de frontières. Si vous utilisez
width: auto, puis ajoutez une bordure, votre div ne deviendra pas plus grand que son conteneur. Par contre, si vous utilisezwidth: 100%une bordure et, la largeur de l'élément sera de 100% + bordure ou marge. Pour plus d'informations, consultez ceci .la source
Tant que la valeur de width est auto, l'élément peut avoir une marge horizontale, un padding et une bordure sans devenir plus large que son conteneur (sauf bien sûr la somme de margin-left + border-left-width + padding-left + padding-right + border-right-width + margin-right est plus grand que le conteneur). La largeur de sa zone de contenu sera celle qui restera lorsque la marge, le remplissage et la bordure auront été soustraits de la largeur du conteneur.
D'autre part, si vous spécifiez width: 100%, la largeur totale de l'élément sera de 100% de son bloc contenant plus toute marge horizontale, remplissage et bordure (sauf si vous avez utilisé box-sizing: border-box, auquel cas seules les marges sont ajoutées aux 100% pour changer la façon dont sa largeur totale est calculée). C'est peut-être ce que vous voulez, mais ce n'est probablement pas le cas.
La source:
http://www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100/
la source
La largeur initiale d'un élément de niveau bloc comme div ou p est auto.
Utilisez width: auto pour annuler les largeurs explicitement spécifiées.
si vous spécifiez width: 100%, la largeur totale de l'élément sera de 100% de son bloc conteneur plus toute marge horizontale, remplissage et bordure.
Ainsi, la prochaine fois que vous définissez la largeur d'un élément de niveau de bloc à 100% pour qu'il occupe toute la largeur disponible, déterminez si ce que vous voulez vraiment est de le définir sur auto.
la source
Largeur 100%: il fera du contenu avec 100%. La marge, la bordure, le remplissage seront ajoutés à cette largeur et l'élément débordera si l'un de ces éléments est ajouté.
Largeur auto: il s'adaptera à l'élément dans l'espace disponible, y compris la marge, la bordure et le remplissage. l'espace restant après le réglage de la marge + du rembourrage + de la bordure sera disponible en largeur / hauteur.
Largeur 100% + dimensionnement de la boîte: boîte de bordure: Elle adaptera également l'élément dans l'espace disponible, y compris la bordure, le rembourrage (la marge le fera déborder du conteneur).
la source
Utilisation de la largeur: auto; + affichage: bloc en ligne; en css donnant un effet impressionnant.
la source
Quand on dit
width ne dépassera jamais la largeur totale de l'élément parent. La largeur maximale correspond à la largeur du parent. Même si nous ajoutons une bordure, un remplissage et une marge, le contenu de l'élément lui-même deviendra plus petit afin de laisser de l'espace pour la bordure, le remplissage et la marge. Si l'espace requis pour la bordure + le remplissage + la marge est supérieur à la largeur totale de l'élément parent, la largeur du contenu deviendra zéro.
Quand on dit
la largeur du contenu de l'élément deviendra 100% de l'élément parent et à partir de maintenant, si nous ajoutons une bordure, un remplissage ou une marge, l'élément enfant dépassera la largeur de l'élément parent et commencera à déborder de l'élément parent.
la source