Maison  >  Article  >  interface Web  >  Analyser la différence entre width:100%; et width:auto ;

Analyser la différence entre width:100%; et width:auto ;

巴扎黑
巴扎黑original
2017-03-14 11:30:102183parcourir

<p>
    <p>1111</p>
</p>
p{
  width:980px;<br>  background-color: #ccc;<br>  height:300px;
}
p{
     width:100%;<br>  /*width:auto;*/
    padding:10px;<br>  background-color:#000;<br>
}



Si la largeur de p est : 100%, cela signifie que la largeur de p sera de 980px, ce qui remplira la zone p, et puis il y a un remplissage, donc il dépassera p.

Et lorsque width:auto c'est la largeur totale (y compris la largeur, margin, padding, border) égale à la largeur parent (largeur, hors parent niveau marge, remplissage, bordure), donc si le remplissage a occupé 10 px d'espace à gauche et à droite, alors la valeur donnée par width est de 960 px.

Mais qu'il s'agisse de width:100% ou auto, la référence de calcul est la valeur de largeur de la zone de contenu parent, pas la valeur de largeur totale.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn