• 网站首页
• 网站建设
• 短视频
• 网站推广
• 网站模板
• 客户案例
• 资讯动态
• 关于我们

padding和box-sizing:border-box; 外边框变为内边框_CSS学习

当前位置：网站建设 > 技术支持

 今天着重说明下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；

版权说明：
本网站凡注明“广州京杭 原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。