css盒制作

CSS盒模型基础

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

content -> padding -> border -> margin

标准盒模型与IE盒模型

标准盒模型（box-sizing: content-box）的宽度仅包含内容宽度，而IE盒模型（box-sizing: border-box）的宽度包含内容、内边距和边框。

.box {
  box-sizing: border-box; /* IE模型 */
  width: 300px;
  padding: 20px;
  border: 5px solid black;
  /* 实际内容宽度为250px (300-20*2-5*2) */
}

创建基础盒子

.box {
  width: 200px;
  height: 150px;
  background-color: #f0f0f0;
  padding: 20px;
  border: 2px solid #333;
  margin: 15px;
}

阴影效果

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

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

圆角盒子

border-radius属性可以创建圆角效果：

.rounded-box {
  border-radius: 10px;
  /* 单个值表示四个角相同 */
}

浮动盒子

float属性可以使盒子脱离正常文档流：

.float-box {
  float: left;
  width: 150px;
  margin-right: 20px;
}

弹性盒子布局

Flexbox提供更灵活的布局方式：

.flex-container {
  display: flex;
  justify-content: space-between;
}
.flex-item {
  flex: 1;
  margin: 0 10px;
}

响应式盒子

使用百分比或视口单位创建响应式盒子：

.responsive-box {
  width: 90%;
  max-width: 1200px;
  min-width: 300px;
  margin: 0 auto;
}

3D变换盒子

transform属性可以创建3D效果：

.three-d-box {
  transform: rotateX(10deg) rotateY(20deg);
  perspective: 1000px;
}

边框样式

border属性可以设置多种样式：

.border-box {
  border: 3px dashed #666;
  border-top: 5px solid red;
  border-radius: 15px 0 15px 0;
}