CSS盒模型

CSS盒模型（Box Model）是CSS中用于描述和布局元素的一种概念。它将每个HTML元素看作一个矩形的盒子，这个盒子由内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。

组成部分

1. 内容（Content）：盒子中用于显示实际内容的区域，如文本、图像等。
2. 内边距（Padding）：内容区域与边框之间的空白区域，用于控制内容与边框之间的间距。
3. 边框（Border）：包围内容和内边距的线条，用于定义盒子的边界。
4. 外边距（Margin）：盒子与其他元素之间的空白区域，用于控制盒子与其他元素之间的间距。

box-sizing属性

// 属性值有两个
box-sizing: content-box / border-box

1.content-box

content-box // width = content

盒模型的默认行为是根据标准盒模型（content-box）进行计算，其中元素的宽度和高度不包括内边距和边框。

2. border-box

border-box // width = content + padding + border

但可以使用box-sizing属性将盒模型改为使用另一种盒模型（border-box），其中元素的宽度和高度包括内边距和边框。

参考资料
CSS3 box-sizing 属性