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;
}
