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

Cette fois, je vais vous présenter la différence entre width:100%; et width:auto. Quelles sont les précautions lors de l'utilisation de width:100%; Voici des cas pratiques. Un Levez-vous et jetez un œil.

<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 elle dépassera p.

Et lorsque width:auto, c'est la largeur totale (y compris la largeur, marge, padding, border) égale à la largeur du parent (largeur, hors marge, padding, border du parent), donc si le remplissage occupe déjà 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.

Je crois que vous l'avez maîtrisé après avoir lu le cas dans cet article Méthode, pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web php chinois !

Lecture recommandée :

Disposition du flux en cascade et effet d'album photo à chargement infini

CSS pour obtenir un effet de bouton 3D

Utilisez du transparent pour créer des triangles

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!