css制作盒子
CSS 盒子模型基础
CSS 盒子模型是网页布局的核心概念，每个元素都被视为一个矩形盒子，包含内容（content）、内边距（padding）、边框（border）和外边距（margin）。
- 内容（content）：显示文本、图像等实际内容。
- 内边距（padding）：内容与边框之间的透明区域。
- 边框（border）：围绕内容和内边距的线。
- 外边距（margin）：盒子与其他元素之间的透明区域。
创建基本盒子
通过设置 width 和 height 属性定义盒子的内容区域大小。
.box {
width: 200px;
height: 100px;
background-color: lightblue;
}添加内边距
使用 padding 属性在内容周围添加空间，可以分别设置各边或统一设置。
.box {
padding: 20px; /* 统一设置 */
padding-top: 10px; /* 单独设置上边 */
}设置边框
border 属性控制边框样式、宽度和颜色。
.box {
border: 2px solid black; /* 简写：宽度 样式 颜色 */
border-radius: 10px; /* 圆角边框 */
}调整外边距
margin 属性控制盒子与其他元素的间距。
.box {
margin: 15px; /* 统一设置 */
margin-left: 30px; /* 单独设置左边 */
}盒子模型计算方式
默认情况下，元素的 width 和 height 仅指内容区域。使用 box-sizing 属性可以改变计算方式：
.box {
box-sizing: border-box; /* 包含边框和内边距在内的总宽度 */
}盒子阴影效果
通过 box-shadow 属性为盒子添加阴影，增强立体感。
.box {
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); /* 水平偏移 垂直偏移 模糊半径 颜色 */
}响应式盒子设计
结合百分比或视口单位（如 vw/vh）创建适应不同屏幕的盒子。
.box {
width: 80%;
max-width: 600px; /* 限制最大宽度 */
min-height: 50vh; /* 至少占据视口高度的一半 */
}
