CSS：盒子模型，布局

CSS盒子模型由四个部分组成：margin（外边距）、border（边框）、padding（内边距）和content（内容）。CSS布局通常涉及使用这些属性来安排盒子在页面上的位置。

以下是一些基本的CSS代码示例，演示如何设置这些属性以及如何使用它们进行布局：

/* 设置盒子的margin、border、padding和content */
.box {
  margin: 20px; /* 上下左右外边距都是20px */
  border: 1px solid black; /* 1px宽的黑色实线边框 */
  padding: 10px; /* 上下左右内边距都是10px */
  content: 100px; /* 内容宽度为100px */
  height: 100px; /* 内容高度为100px */
}
 
/* 使用flexbox进行布局 */
.container {
  display: flex; /* 指定为flex布局 */
}
 
.item {
  margin: 10px; /* 每个项的外边距 */
  flex: 1; /* 每个项将等分空间 */
}

HTML代码示例：

<div class="container">
  <div class="item">Box 1</div>
  <div class="item">Box 2</div>
  <div class="item">Box 3</div>
</div>

在这个例子中，.box类定义了一个具有特定外边距、边框和内边距的盒子。.container类使用flex布局来排列其子元素，而.item类定义了这些子元素的外边距和等分空间。