今天著重說明下padding和box-sizing: border-box;的作用，今天聽慕課網，學習了前端大神張鑫旭講解的padding，其中介紹了pading和box-sizing:border-box的作用！

注意兼容性：

box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
-o-box-sizing:border-box; /* Op */

 padding重點：

1、padding值暴走，一定會影響尺寸

2、width值非auto，padding影響尺寸

3、width值為auto或者box-sizing:border-box，同時padding沒有暴走，就不會影響尺寸

看圖：

<style>
 div{float: left; margin-right: 20px;}
 .box1{width: 200px;height: 200px;border: 30px solid #999; 
  padding: 0 50px;box-sizing: border-box;
 }
 .box2{width: 200px;height: 200px;border: 30px solid #999; 
  padding: 0 50px;
 }
 .box3{width: 200px;height: 200px;border: 1px solid #999;
/*  padding: 0 50px;*/
 }
</style>
<div class="box1">
 使用了padding和box-sizing: border-box;
</div>
<div class="box2">
 使用了使用了padding，未使用box-sizing: border-box;
</div>
<div class="box3">
 未使用padding和box-sizing
</div>

在box1中同時使用了padding和box-sizing: border-box;導致內容區一再縮減，原本高寬100px不變，所有內容都向內凹，包括border，這就是box-sizing:border-box的作用了！ 也就是說，加入了box-sizing: border-box后，border外邊框變成了內邊框。

看box2的時候，由于沒有box-sizing:border-box，所以padding是正常的內邊距，撐開了box2寬度，border也是正常的外邊框！

box3就是最基本的只加了border為1的外邊框，寬度和高度都變為了100+1+1，高寬都為102px；