盒子模型是什么？

CSS盒子模型主要由**内容(content)、内边距(padding)、边框(border)和外边距(margin)**四个部分组成。

1. 内容(content)：这是盒子的核心部分，用于显示实际的内容，如文字、图片等。其大小可以通过width和height属性进行设置。
2. 内边距(padding)：内容区域与边框之间的空间是内边距。它的大小可以通过padding属性进行设置。
3. 边框(border)：紧接内边距并包裹内容的线条是边框。边框的样式、宽度和颜色可以通过border-style、border-width和border-color属性进行设置。
4. 外边距(margin)：边框外部的空间是外边距。它用于分隔相邻的元素，大小可以通过margin属性进行设置。

        

盒子的大小计算方式

1. 实际的计算大小： 内容 + 边框 * 2 + 内边距 * 2 (centent+box)
2. 如果设置 box-sizing: border-box; 这个会改变盒子模型的实际计算方式，盒子大小固定，而内边距和边框会挤占内容区。（盒子大小 = 内容）