css制作盒子

使用CSS创建盒子的方法

基础盒子模型
通过width和height定义尺寸，border添加边框：

.box {
  width: 200px;
  height: 100px;
  border: 2px solid #333;
}

添加内边距与背景色
使用padding控制内容与边框的间距，background-color设置填充色：

.box {
  padding: 20px;
  background-color: #f0f0f0;
}

圆角与阴影效果
通过border-radius实现圆角，box-shadow添加投影：

.box {
  border-radius: 8px;
  box-shadow: 3px 3px 5px rgba(0,0,0,0.2);
}

灵活布局的弹性盒子
采用Flexbox布局控制内部元素排列：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

响应式盒子设计
使用百分比或视口单位实现自适应：

.responsive-box {
  width: 90%;
  max-width: 600px;
  margin: 0 auto;
}