box-sizing: border-box；box-sizing:content-box；讲解

• 作者简介：一名后端开发人员，每天分享后端开发以及人工智能相关技术，行业前沿信息，面试宝典。
• 座右铭：未来是不可确定的，慢慢来是最快的。
• 个人主页：极客李华-CSDN博客
• 合作方式：私聊+
• 这个专栏内容：BAT等大厂常见后端java开发面试题详细讲解，更新数目100道常见大厂java后端开发面试题。
• 我的CSDN社区：https://bbs.csdn.net/forums/99eb3042821a4432868bb5bfc4d513a8
• 微信公众号，抖音，b站等平台统一叫做：极客李华，加入微信公众号领取各种编程资料，加入抖音，b站学习面试技巧，职业规划

box-sizing: border-box;box-sizing:content-box;讲解

简介：本文讲解box-sizing: border-box;box-sizing:content-box;两个语法的计算公式，与应用场景。

CSS中的 box-sizing属性定义了 user agent应该如何计算一个元素的总宽度和总高度。

这两个语法通常用于设置盒子的全局样式。

border-box

计算公式

• width = border + padding + 内容的宽度
• height = border + padding + 内容的高度

讲解：
对于border-box的属性，其中的width与height属性在内容的基础之上，海包括，边框（border）,内边距（padding）两个属性.

content-box

计算公式：

• width = 内容的宽度
• height = 内容的高度

讲解：
对于context-box的属性，其中的width与height只包括，所含有的内容的宽和高，不包括边框（border），外边距（margin），内边距（padding）.

如果大家觉得有用的话，可以关注我下面的微信公众号，极客李华，我会在里面更新更多行业资讯，企业面试内容，编程资源，如何写出可以让大厂面试官眼前一亮的简历等内容，让大家更好学习编程，我的抖音，B站也叫极客李华。大家喜欢也可以关注一下