padding和box-sizing:border-box; 外边框变为内边框 – CSS – 前端 css 气泡层

注意兼容性：

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:30pxsolid#999;padding:050px;box-sizing:border-box;}.box2{width:200px;height:200px;border:30pxsolid#999;padding:050px;}.box3{width:200px;height:200px;border:1pxsolid#999;/*padding:050px;*/}</style><divclass="box1">使用了padding和box-sizing:border-box;</div><divclass="box2">使用了使用了padding，未使用box-sizing:border-box;</div><divclass="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；