css盒子制作
CSS盒子模型基础
CSS盒子模型由内容（content）、内边距（padding）、边框（border）、外边距（margin）组成。通过调整这些属性可以控制元素的布局和样式。
示例代码：
.box {
width: 200px; /* 内容宽度 */
height: 100px; /* 内容高度 */
padding: 20px; /* 内边距 */
border: 5px solid #000; /* 边框 */
margin: 30px; /* 外边距 */
background-color: #f0f0f0;
}盒子模型类型
CSS提供两种盒子模型：
-
标准盒子模型（content-box）
width和height仅定义内容区域大小，内边距和边框会额外增加总宽度。.box { box-sizing: content-box; /* 默认值 */ }
-
IE盒子模型（border-box）
width和height包含内容、内边距和边框的总和。.box { box-sizing: border-box; }
常用盒子样式技巧
圆角盒子
使用border-radius属性实现圆角效果：
.rounded-box {
border-radius: 10px; /* 统一圆角 */
/* 或分别设置四个角 */
border-radius: 10px 5px 15px 20px;
}阴影效果
通过box-shadow添加阴影：
.shadow-box {
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
/* 参数：水平偏移、垂直偏移、模糊半径、颜色 */
}弹性盒子布局
使用Flexbox实现灵活布局：
.flex-container {
display: flex;
justify-content: center; /* 水平对齐 */
align-items: center; /* 垂直对齐 */
}响应式盒子设计
通过媒体查询适配不同屏幕尺寸：
.responsive-box {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
@media (max-width: 768px) {
.responsive-box {
padding: 10px;
}
}注意事项
- 外边距合并（margin collapsing）可能导致布局异常，需通过
padding或border避免。 - 使用
box-sizing: border-box能更直观地控制元素总尺寸。 - 浮动（float）或定位（position）可能影响盒子模型的正常流，需谨慎使用。
