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

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）.