[分享]css制作长方形框架

CSS是前端开发中重要的一部分，今天我们来谈一谈如何使用CSS制作长方形框架。

.box {
  width: 200px; /* 设置宽度 */
  height: 100px; /* 设置高度 */
  border: 1px solid black; /* 设置边框 */
} 

以上代码可以创建一个宽度为200像素，高度为100像素，边框为1像素实线黑色的长方形框架。但是，如果需要在框架内添加背景色或者调整内边距等布局，还需更多CSS代码。

.box {
  width: 200px;
  height: 100px;
  border: 1px solid black;
  background-color: lightblue; /* 设置背景颜色 */
  padding: 10px; /* 设置内边距 */
  box-sizing: border-box; /* 盒模型 */
  /* 对齐方式 */
  display: flex;
  justify-content: center;
  align-items: center;
} 

通过以上代码，我们创建了一个具有背景颜色、内边距、盒模型、对齐方式等属性的长方形框架。

纵向长方形框架：

.box {
  width: 100px;
  height: 200px;
  border: 1px solid black;
  background-color: lightblue;
  padding: 10px;
  box-sizing: border-box;
  /* 对齐方式 */
  display: flex;
  flex-direction: column; /* 横向排列 */
  justify-content: center;
  align-items: center;
} 

以上代码创建了一个纵向长方形框架，主要区别在于将flex-direction属性设置为列方向。

最后，我们可以根据需求添加更多CSS属性，制作出更加美观、实用的长方形框架。