问题：这段CSS为什么会溢出？

width: 100%;
padding: 20px;

demo: https://codepen.io/freedomcly/pen/LeoNbL/

1.width 100%中的100%是基于什么？

http://acgtofe.com/posts/2014/06/percentage-in-css
demo: https://codepen.io/freedomcly/pen/opRzob

2.width 100%是设置了哪一段的width？

box-sizing: content-box

设置content box width（这时margin / border / padding都会溢出）

box-sizing: border-box

设置border box width（这时只有加了margin-left / margin-right会溢出，padding和border不会溢出）

3.width 100% 和 width auto的区别

width 100%

会强制设置content box width 或 border box width。

width auto

满足marginLeft + borderLeft + paddingLeft + contentWidth + paddingRight + borderRight + marginRight = containingBlock，这时content box width 和 border box width 没有固定逻辑，随margin / border / padding的变化而变化。

4.meta标签

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

溢出都是在有这段常见的meta viewport标签时才会出现，因为没有这段代码的情况layout viewport和visual viewport没有固定，页面可以缩放，也无所谓溢出与不溢出了。

5.如何避免溢出？

（1）不要设置width 100%。一般情况下，width auto能解决问题。

（2）设置box-sizing: border-box。这时候只有加margin会溢出。