問題：這段CSS為什么會(huì)溢出？

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%是設(shè)置了哪一段的width？

box-sizing: content-box

設(shè)置content box width（這時(shí)margin / border / padding都會(huì)溢出）

box-sizing: border-box

設(shè)置border box width（這時(shí)只有加了margin-left / margin-right會(huì)溢出，padding和border不會(huì)溢出）

3.width 100% 和 width auto的區(qū)別

width 100%

會(huì)強(qiáng)制設(shè)置content box width 或 border box width。

width auto

滿足marginLeft + borderLeft + paddingLeft + contentWidth + paddingRight + borderRight + marginRight = containingBlock，這時(shí)content box width 和 border box width 沒有固定邏輯，隨margin / border / padding的變化而變化。

4.meta標(biāo)簽

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

溢出都是在有這段常見的meta viewport標(biāo)簽時(shí)才會(huì)出現(xiàn)，因?yàn)闆]有這段代碼的情況layout viewport和visual viewport沒有固定，頁面可以縮放，也無所謂溢出與不溢出了。

5.如何避免溢出？

（1）不要設(shè)置width 100%。一般情況下，width auto能解決問題。

（2）設(shè)置box-sizing: border-box。這時(shí)候只有加margin會(huì)溢出。