width:auto 和 width:100%有什么区别

width:auto 和 width:100%有什么区别

宽度计算不同

<div class="parent">
	<span class="child">content</span>
</div>

.parent {
    width: 800px;
}

• 当子元素 width: auto; 时

  width: auto = 'width' + 'padding-left/right' + 'border-left/right' + 'margin-left/right' < 父元素宽度

  即无论子元素有没有内外边距或者边框，宽度始终不会超过父元素

• 当子元素 width: 100%; 时

  width: 100% = '父元素width' + 'padding-left/right' + 'border-left/right' + (margin-left/right)

  即当子元素有了内外边距或者边框之后，宽度会溢出父元素