制作css盒子

CSS盒子的基本结构

CSS盒子模型是网页布局的基础，由内容(content)、内边距(padding)、边框(border)和外边距(margin)组成。每个元素都被视为一个矩形盒子，通过调整这些属性可以控制元素的外观和位置。

.box {
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 5px solid #333;
    margin: 10px;
}

设置盒子尺寸

通过width和height属性定义内容区域的尺寸。可以使用像素(px)、百分比(%)或其他CSS单位。

.box {
    width: 300px;
    height: 150px;
}

添加内边距

padding属性在内容周围创建空间，可以分别设置四个方向的值。

.box {
    padding: 10px; /* 统一值 */
    padding: 10px 20px; /* 上下 左右 */
    padding: 5px 10px 15px 20px; /* 上 右 下 左 */
}

设置边框

border属性包含宽度、样式和颜色，可以单独设置各边或使用简写。

.box {
    border: 2px solid #000; /* 简写 */
    border-top: 1px dashed red; /* 单边设置 */
}

控制外边距

margin属性控制盒子与其他元素的距离，值可以是正数、负数或auto。

.box {
    margin: 15px;
    margin-left: auto; /* 水平居中 */
    margin-right: auto;
}

盒子模型的计算方式

标准盒子模型的总宽度计算公式： \(总宽度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right\)

使用box-sizing: border-box可以改变计算方式，使width包含padding和border。

.box {
    box-sizing: border-box;
}

创建圆角盒子

通过border-radius属性可以让盒子具有圆角效果。

.rounded-box {
    border-radius: 10px;
    border-radius: 50%; /* 圆形 */
}

添加盒子阴影

box-shadow属性为盒子添加阴影效果，可以控制位置、模糊和颜色。

.shadow-box {
    box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
}

响应式盒子设计

使用相对单位和媒体查询使盒子适应不同屏幕尺寸。

.responsive-box {
    width: 90%;
    max-width: 1200px;
}

@media (max-width: 768px) {
    .responsive-box {
        width: 100%;
    }
}