CSS 盒子模型是一种在网页设计中常用的布局模式，可以帮助定义一个元素（比如说一个段落、一个标题、一个图片或者一个列表等等）在页面上的外观和位置。这个模型视元素为一个矩形的盒子，并在这个盒子周围定义了一系列的属性。
一个CSS盒子由以下四部分组成：
- 内容（Content）：这是元素的实际内容，例如文本、图片等。这个部分的大小可以通过width和height属性来设置。
- 内边距（Padding）：内边距是内容周围的空间，位于内容与边界之间。内边距不包括元素的背景颜色或图片。这个区域的大小可以通过padding属性来设置。
- 边框（Border）：边框是围绕在内边距和内容外的线条。你可以设置边框的宽度、样式和颜色，使用的属性是border。
- 外边距（Margin）：外边距是元素与相邻元素之间的空白区域。这个区域的大小可以通过margin属性来设置。
一个元素的实际宽度和高度是由上述这些值加在一起来计算的。
CSS 盒子模型有两种计算方式：标准模型（默认使用的模型）和IE模型（又称怪异模型）。在标准模型中，元素的width和height指的是内容区的宽和高，而在IE模型中，元素的width和height包含了内容、内边距和边框。
在CSS3中，我们可以通过box-sizing属性来选择这两种模型中的一种。如果我们希望使用标准模型，可以设置box-sizing: content-box，如果希望使用IE模型，可以设置box-sizing: border-box。
举例
就以知识星球的页面来说，它横向有3个盒子，然后每个盒子里面又有很多竖向排列的盒子，一个页面，就是由很多个盒子排列组成的。
