1. 什么是盒子模型
在学习CSS之前，我们首先需要了解什么是盒子模型。盒子模型是Web页面布局的基础，它定义了一个 HTML 元素在页面中所占据的空间大小以及与其他元素之间的关系。每个 HTML 元素都被看做一个矩形的盒子，这个盒子包括了元素的内容、内边距、边框和外边距。
以下是一个盒子模型的示意图：
┌───────────────┐
│ │
│ content │
│ │
│───────────────│
│ padding │
│---------------│
│ border │
│---------------│
│ margin │
└───────────────┘
1.1 内容(content)
表示盒子所包含的内容，通常由文本、图像等组成。
1.2 内边距(padding)
表示盒子的内容与边框之间的距离。可以设置上、右、下、左四个方向的内边距。
padding-top: 10px; /* 上内边距 */
padding-right: 20px; /* 右内边距 */
padding-bottom: 30px; /* 下内边距 */
padding-left: 40px; /* 左内边距 */
1.3 边框(border)
表示盒子的边框，可以设置边框的宽度、样式和颜色。
border-width: 1px; /* 边框宽度 */
border-style: solid; /* 边框样式 */
border-color: #000; /* 边框颜色 */
1.4 外边距(margin)
表示盒子与周围元素之间的距离，可以设置上、右、下、左四个方向的外边距。
margin-top: 10px; /* 上外边距 */
margin-right: 20px; /* 右外边距 */
margin-bottom: 30px; /* 下外边距 */
margin-left: 40px; /* 左外边距 */
2. CSS怎么设置盒子两像素黑色边框
要设置一个盒子的边框，我们需要使用CSS的border属性。下面介绍几种设置盒子边框的方法。
2.1 设置所有边框
可以通过设置border属性的值来设置所有边框的宽度、样式和颜色。下面的例子将盒子的边框宽度设置为2像素，样式设置为实线，颜色设置为黑色。
.box {
border: 2px solid #000;
}
这个示例使用solid样式设置盒子边框的样式，也可以使用其他样式，如dotted、dashed、double等。
2.2 分别设置四个边框
可以通过分别设置border-top、border-right、border-bottom和border-left属性的值来分别设置四个边框的宽度、样式和颜色。下面的例子将盒子的上边框宽度设置为2像素，样式设置为实线，颜色设置为黑色。
.box {
border-top: 2px solid #000;
}
同样，上面这个示例也可以使用其他样式。
2.3 设置指定边框
可以通过设置border-{direction}属性的值来指定设置哪一条边框的宽度、样式和颜色。
下面的{direction}可以是top、right、bottom或left。
.box {
border-right: 2px solid #000;
}
3. 总结
本文介绍了Web页面布局的基础概念“盒子模型”，以及如何使用CSS设置盒子的边框。盒子边框包括边框的宽度、样式和颜色，可以使用border属性设置所有边框，也可以使用border-{direction}属性分别设置指定边框。