CSS盒模型由content、padding、border和margin四部分组成，决定元素在页面中的空间与位置。1. Content是显示内容的区域，width和height默认仅作用于内容区；2. Padding为内容与边框间的内边距，背景会延伸至该区域，不可为负；3. Border是围绕padding的边框，含宽、样式、颜色三个属性；4. Margin是盒子间的外边距，透明且不显示背景，可设负值以实现重叠。默认box-sizing: content-box，设置box-sizing: border-box时width包含padding和border，更利于布局控制。
CSS盒模型是网页布局的基础概念，每个HTML元素都可以看作是一个矩形盒子，这个盒子由四个部分组成：content（内容）、padding（内边距）、border（边框） 和 margin（外边距）。这四部分共同决定了元素在页面中所占的空间大小和位置。
1. Content（内容区）
这是盒子最核心的部分，用于显示元素的实际内容，比如文字、图片或其他媒体。内容区的尺寸可以通过 width 和 height 属性来设置。默认情况下，这两个值只包括内容本身，不包含 padding、border 和 margin（这是标准盒模型的行为）。
2. Padding（内边距）
内边距是内容区与边框之间的空间，它属于盒子内部，背景颜色或背景图像会延伸到 padding 区域。padding 分为上、右、下、左四个方向，可以统一设置，也可以分别设置：
- padding: 10px; —— 四个方向都为10px
- padding: 5px 10px; —— 上下5px，左右10px
- padding: 10px 5px 8px 15px; —— 按顺时针：上、右、下、左
padding 的值不能为负数。
立即学习“前端免费学习笔记（深入）”；
3. Border（边框）
边框位于 padding 的外围，是围绕元素的一条线，用于将该元素与其他元素分隔开。border 有三个属性：宽度（width）、样式（style）和颜色（color）。例如：
border: 2px solid #000;表示一个2像素宽、实线、黑色的边框。border 也支持分别设置四个方向：
- border-top
- border-right
- border-bottom
- border-left
4. Margin（外边距）
外边距是盒子与其他元素之间的透明区域，用于控制元素之间的距离。margin 不包含在元素的背景内，不会显示背景色或图像。和 padding 类似，margin 也可以分方向设置：
margin: 20px 10px 15px 5px;margin 可以为负值，这在某些布局技巧中非常有用，比如实现元素重叠或调整位置。
在CSS中，默认使用的是标准盒模型（box-sizing: content-box），即 width 和 height 只包括 content。如果想让 width 包含 content + padding + border，可以设置：
box-sizing: border-box;这样更便于精确控制布局，尤其在响应式设计中被广泛使用。
基本上就这些。理解这四个部分如何影响元素的尺寸和间距，是掌握CSS布局的关键。
