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没有暴走，就不会影响尺寸

css3图片，css日历控件，纯css按钮特效，css文章中隔行插入，css继承父级颜色，css 右上角标识 素材，css 气泡层

看图：

<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；