css盒制作

CSS盒模型基础

CSS盒模型是网页布局的核心概念，由以下四部分组成：

• 内容区（Content）：显示文本、图像等实际内容。
• 内边距（Padding）：内容与边框之间的透明区域。
• 边框（Border）：围绕内容和内边距的边界线。
• 外边距（Margin）：边框外的透明区域，控制与其他元素的距离。

盒模型示意图：

margin  
  border  
    padding  
      content  

标准盒模型与IE盒模型

• 标准盒模型（box-sizing: content-box）
  元素总宽度 = width + padding + border + margin。
  高度计算方式同理。

• IE盒模型（box-sizing: border-box）
  元素总宽度 = width（包含 padding 和 border） + margin。
  高度计算方式同理。

示例代码：

.box {
  box-sizing: border-box; /* 切换为IE盒模型 */
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  margin: 10px;
}

盒模型常见属性

1. 尺寸控制

   width: 100px;       /* 宽度 */
   height: 50px;       /* 高度 */
   max-width: 500px;   /* 最大宽度 */
   min-height: 200px;  /* 最小高度 */

2. 边距与填充

   margin: 10px;           /* 统一外边距 */
   margin-top: 5px;        /* 单独设置 */
   padding: 15px 10px;     /* 上下15px，左右10px */

3. 边框样式

   border: 2px solid #000; /* 宽度+样式+颜色 */
   border-radius: 10px;    /* 圆角 */

实际应用示例

水平居中元素

.container {
  width: 80%;
  margin: 0 auto; /* 左右外边距自动 */
}

阴影效果

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

注意事项

• 使用 box-sizing: border-box 可避免布局计算混乱。
• 外边距重叠（Margin Collapse）现象常见于垂直方向相邻元素。
• Flexbox 或 Grid 布局中，盒模型的行为可能因上下文变化。