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）可直观查看盒模型各层尺寸，便于调整布局。
