css盒制作

CSS盒模型基础

CSS盒模型是网页布局的核心概念，由内容区（content）、内边距（padding）、边框（border）、外边距（margin）组成。标准盒模型的计算公式为：

元素总宽度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right

设置盒模型属性

通过CSS属性定义盒模型的各个部分：

.box {
  width: 200px;
  height: 150px;
  padding: 20px;
  border: 5px solid #333;
  margin: 10px;
}

盒模型类型切换

CSS3引入box-sizing属性控制盒模型计算方式：

/* 标准盒模型（默认） */
box-sizing: content-box;

/* 怪异盒模型（宽度包含padding和border） */
box-sizing: border-box;

盒阴影效果

使用box-shadow为元素添加阴影：

.box {
  box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
}

参数依次为：水平偏移、垂直偏移、模糊半径、颜色。

圆角边框

通过border-radius创建圆角：

.box {
  border-radius: 10px;
  /* 椭圆角 */
  border-radius: 50%;
}

弹性盒子布局

Flexbox是现代CSS布局方式：

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

网格布局

CSS Grid提供二维布局能力：

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 10px;
}

响应式盒子

使用媒体查询适配不同屏幕：

@media (max-width: 768px) {
  .box {
    width: 100%;
    margin: 5px;
  }
}