制作CSS盒子教程

CSS盒子模型基础

CSS盒子模型是网页布局的核心概念，每个HTML元素都被视为一个矩形盒子，包含内容（content）、内边距（padding）、边框（border）和外边距（margin）。

• 内容区域：显示文本、图像等实际内容，通过width和height控制尺寸。
• 内边距：内容与边框之间的透明区域，通过padding设置。
• 边框：围绕内容和内边距的线条，通过border设置样式、宽度和颜色。
• 外边距：盒子与其他元素之间的透明区域，通过margin设置。

设置盒子尺寸

使用width和height属性定义内容区域的大小，默认单位为像素（px）。

.box {
  width: 300px;
  height: 200px;
}

百分比单位可创建响应式布局：

.box {
  width: 50%;
  height: 50%;
}

控制内边距

padding属性定义内容与边框之间的距离，可分别设置四个方向的值。

统一设置所有方向：

.box {
  padding: 20px;
}

分别设置上下左右：

.box {
  padding-top: 10px;
  padding-right: 15px;
  padding-bottom: 10px;
  padding-left: 15px;
}

简写形式（上右下左）：

.box {
  padding: 10px 15px 10px 15px;
}

添加边框

border属性需指定样式（solid、dotted等）、宽度和颜色。

完整边框：

.box {
  border: 2px solid #333;
}

单独设置各边：

.box {
  border-top: 1px dashed red;
  border-right: 3px dotted blue;
  border-bottom: 1px dashed green;
  border-left: 3px dotted purple;
}

圆角边框：

.box {
  border-radius: 10px;
}

调整外边距

margin控制盒子与其他元素的距离，用法与padding类似。

统一外边距：

.box {
  margin: 15px;
}

垂直和水平方向：

.box {
  margin: 20px 10px;
}

自动水平居中：

.box {
  margin: 0 auto;
}

盒子模型计算方式

标准盒子模型的总宽度计算公式：

[ 总宽度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right ]

使用box-sizing可改变计算方式：

.box {
  box-sizing: border-box; /* 宽度包含padding和border */
}

实际应用示例

创建一个带阴影的卡片式盒子：

.card {
  width: 250px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  margin: 15px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

实现等高列布局：

.column {
  width: 30%;
  float: left;
  margin: 1.5%;
  padding: 15px;
  background: #f5f5f5;
  box-sizing: border-box;
}