css制作网页盒子

CSS 盒子模型基础

CSS 盒子模型由内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。通过调整这些属性可以控制元素的布局和样式。

示例代码：

.box {
    width: 200px;          /* 内容宽度 */
    height: 150px;         /* 内容高度 */
    padding: 20px;        /* 内边距 */
    border: 2px solid #333; /* 边框 */
    margin: 10px;         /* 外边距 */
    background-color: #f0f0f0;
}

控制盒子尺寸

默认情况下，width 和 height 仅定义内容区域大小。若希望包含边框和内边距在内，需设置 box-sizing 属性：

.box {
    box-sizing: border-box; /* 总宽度 = width（含padding和border） */
}

边框样式定制

边框支持多种样式（实线、虚线等）和圆角效果：

.box {
    border: 3px dashed #ff0000; /* 红色虚线边框 */
    border-radius: 10px;       /* 圆角 */
}

阴影与浮动效果

通过 box-shadow 添加阴影，float 实现布局浮动：

.box {
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); /* 水平偏移 垂直偏移 模糊度 颜色 */
    float: left; /* 左浮动 */
}

响应式盒子

使用百分比或视口单位（vw/vh）实现自适应：

.box {
    width: 50%;   /* 占父元素宽度50% */
    max-width: 600px; /* 最大宽度限制 */
    min-height: 100vh; /* 最小高度为视口高度 */
}

Flexbox 布局

通过 Flexbox 灵活控制盒子排列方式：

.container {
    display: flex;
    justify-content: space-between; /* 水平分布 */
    align-items: center;           /* 垂直居中 */
}

注意事项

• 外边距合并（margin collapse）在垂直方向上相邻元素间可能发生。
• 使用 overflow: hidden 可处理内容溢出问题。
• 调试时可通过浏览器开发者工具查看盒子模型的具体计算值。