css盒子制作

CSS盒子模型基础

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

• 内容区域（content）：显示文本、图像等实际内容。
• 内边距（padding）：内容与边框之间的透明区域。
• 边框（border）：围绕内容和内边距的线条。
• 外边距（margin）：盒子与其他元素之间的透明间距。

设置盒子尺寸

通过width和height属性定义内容区域的尺寸。使用box-sizing属性可以控制尺寸计算方式：

.box {
  width: 300px;
  height: 200px;
  box-sizing: border-box; /* 包含padding和border */
}

控制内外边距

内边距使用padding属性设置，外边距使用margin属性。可以分别指定四个方向的值：

.box {
  padding: 10px 20px; /* 上下10px，左右20px */
  margin: 0 auto; /* 上下0，左右自动(居中) */
}

添加边框样式

边框通过border属性设置，包括宽度、样式和颜色：

.box {
  border: 2px solid #333; /* 2像素实线边框 */
  border-radius: 8px; /* 圆角边框 */
}

盒子阴影效果

使用box-shadow属性为盒子添加阴影效果：

.box {
  box-shadow: 3px 3px 5px rgba(0,0,0,0.3);
  /* 水平偏移 垂直偏移 模糊半径 颜色 */
}

响应式盒子设计

结合媒体查询实现不同屏幕尺寸下的盒子布局：

.box {
  width: 100%;
}

@media (min-width: 768px) {
  .box {
    width: 50%;
    float: left;
  }
}