Parse the difference between width:100%; and width:auto;

<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>
}

If the width of p is: 100%, it means that the width of p will be 980px, which will fill the p area, and then there is padding, so it will exceed p.

And when width:auto, it is the overall width (including width, margin, padding, border) equal to the parent width (width, excluding parent margin, padding, border), so if padding has taken up 10px of space on the left and right, then the value given by width is 960px.

But whether it is width:100% or auto, the calculation reference is the parent content area width value, not the total width value.

The above is the detailed content of Parse the difference between width:100%; and width:auto;. For more information, please follow other related articles on the PHP Chinese website!