css盒制作

CSS盒模型基础

CSS盒模型由内容（content）、内边距（padding）、边框（border）、外边距（margin）组成，每个元素均遵循此模型布局。

标准盒模型与IE盒模型区别

• 标准盒模型（默认）：width/height仅指内容区域，总宽度需加上padding、border、margin。
• IE盒模型：width/height包含内容、padding和border，通过box-sizing: border-box启用。

盒模型属性示例

.box {
  width: 200px;
  height: 100px;
  padding: 20px;      /* 内边距 */
  border: 5px solid #000; /* 边框 */
  margin: 30px;        /* 外边距 */
  box-sizing: border-box; /* 切换为IE盒模型 */
}

布局技巧

水平居中

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

Flexbox布局

.flex-container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
}

阴影与圆角

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

响应式盒模型

使用百分比或视口单位（vw/vh）适应不同屏幕：

.responsive-box {
  width: 90%;
  max-width: 1200px; /* 限制最大宽度 */
  min-height: 50vh;  /* 最小高度为视口50% */
}

调试工具

浏览器开发者工具（如Chrome DevTools）可直观查看盒模型各层尺寸，便于调整布局。