css制作网页盒子
CSS 盒子模型基础
CSS 盒子模型是网页布局的核心概念，由内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。
.box {
width: 300px;
height: 200px;
padding: 20px;
border: 5px solid #000;
margin: 30px;
}标准盒子与怪异盒子
标准盒子模型（box-sizing: content-box）的宽度仅包含内容区域。怪异盒子模型（box-sizing: border-box）的宽度包含内容、内边距和边框。
.content-box {
box-sizing: content-box;
}
.border-box {
box-sizing: border-box;
}盒子阴影效果
使用 box-shadow 属性可以为盒子添加阴影效果，参数依次为水平偏移、垂直偏移、模糊半径、扩散半径和颜色。
.shadow-box {
box-shadow: 5px 5px 10px 0 rgba(0,0,0,0.3);
}圆角边框
通过 border-radius 属性可以实现圆角效果，可以设置统一的圆角或分别设置四个角的半径。
.rounded-box {
border-radius: 10px;
}
.circle-box {
border-radius: 50%;
}响应式盒子
使用百分比或视口单位可以创建响应式盒子，适应不同屏幕尺寸。
.responsive-box {
width: 80%;
max-width: 1200px;
min-width: 300px;
height: 50vh;
}弹性盒子布局
Flexbox 提供了更灵活的盒子排列方式，适合创建一维布局。
.flex-container {
display: flex;
justify-content: space-between;
align-items: center;
}网格布局
CSS Grid 适合创建二维布局，可以精确控制行和列的分布。
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}
