The difference between width: 100% and width: auto
width: auto is smarter. If the margin has taken up 10px of space on the left and right, then the value given by width is 580px.
<style>div{width:600px;overflow:auto;background:#ccc;}p{ width:auto; margin:10px; background:red;}</style></head><body><div> <p>123</p></div></body></html>
If width:100%, it means p The width will be 600px, which will fill the div area, and then it will have margin, so a scroll bar will appear.
div{width:600px;overflow:auto;background:#ccc;}p{ width:100%; margin:10px; background:red;}</style></head><body><div> <p>123</p></div>
are all based on the width of the parent element.