今天学习下css的盒子模型，这是一种布局模式，所谓盒子模型，就是将所有元素表示为一个个矩形的盒子（box）。CSS 决定这些盒子的大小、位置以及属性（例如颜色、背景、边框尺寸）。
一个CSS盒子模型主要由以下几个部分组成：
- 内容（Content）：这是盒子模型的中心，包含了元素的“真实”内容，比如文本、图片、视频等。内容区域的大小可以通过width和height属性来直接设置。
- 内边距（Padding）：内边距位于内容区域与边框之间的空间。它可以是正值或零，但不能是负值。内边距是透明的，会占用布局空间。你可以使用padding-top、padding-right、padding-bottom、padding-left或简写属性padding来设置内边距。
- 边框（Border）：边框环绕在内边距和内容之外。边框可以是实线、虚线等，并可以拥有自己的样式、宽度和颜色。边框是盒子模型的可见部分之一，可以通过border-style、border-width、border-color或简写属性border来设置边框的样式、宽度和颜色。
- 外边距（Margin）：外边距是边框之外的透明区域，用于分隔相邻的盒子。外边距可以是正值或负值，负值的外边距会导致盒子相互重叠。外边距是透明的，不会占用背景色或背景图片的空间，但会占用布局空间。你可以使用margin-top、margin-right、margin-bottom、margin-left或简写属性margin来设置外边距。
这些组成部分共同定义了CSS盒子的总尺寸和布局方式。了解盒子模型对于掌握CSS布局至关重要，因为几乎所有的页面布局都是基于盒子模型的。