CSS盒子模型 - 技术栈

一、盒子模型的核心组成

每个 HTML 元素都可以看作一个矩形盒子，由四部分组成（由内向外）：

二、盒子模型各部分的详细设置

边框（border）
复合写法：border: 1px solid red;

单一方向：border-top、border-right、border-bottom、border-left

单个属性：border-width、border-style、border-color

圆角边框（border-radius）
为盒子添加圆角，原理：用一个圆（或椭圆）与盒子的角相切。

常用值：像素（如 10px）或百分比（50% 得到圆形或椭圆）。

可分别设置四个角：border-radius: 左上右上右下左下;

内边距（padding）
内边距会增大盒子总体尺寸（除非 box-sizing: border-box）。

单边设置：padding-top、padding-right、padding-bottom、padding-left

简写：padding: 上右下左;（顺时针）

外边距（margin）
用于调整盒子位置，实现块级元素水平居中：margin: 0 auto;

常见问题：

垂直外边距合并（相邻块元素上下 margin 取较大值）

外边距塌陷（父元素与第一个子元素 margin-top 重叠）------ 可通过触发 BFC 解决

尺寸计算（box-sizing）
box-sizing: content-box（默认）：width 只指内容宽度，实际占宽 = width + padding + border

box-sizing: border-box：width 包含内容 + padding + border，盒子总宽固定不变，避免撑大布局

三、背景（background）相关

常见背景属性

background-color：背景颜色

background-image：背景图片（url(...)）

background-repeat：平铺方式（no-repeat / repeat-x / repeat-y）

background-position：背景位置（如 center center、10px 20px）

background-size：背景尺寸（cover / contain / 具体数值）

background-attachment：背景是否随滚动（fixed / scroll）

背景复合写法

css 复制代码

background: color image repeat position/size attachment;

示例：background: #f00 url(bg.png) no-repeat center/cover fixed;

背景渐变（渐变属于 background-image）

线性渐变：background-image: linear-gradient(to right, red, blue);

径向渐变：background-image: radial-gradient(circle, red, blue);

文字渐变：配合 background-clip: text 和 -webkit-background-clip: text，再设置文字颜色透明，实现渐变文字效果。

四、盒子阴影与过渡

盒子阴影（box-shadow）
语法：box-shadow: 水平偏移垂直偏移模糊半径扩散半径颜色内外阴影;

示例：box-shadow: 10px 10px 5px rgba(0,0,0,0.3);

内阴影：inset

过渡（transition）
配合盒子阴影或其它属性实现平滑动画效果，如鼠标移上阴影渐变：

css 复制代码

transition: box-shadow 0.3s;

五、综合案例（来自课程）

小米卡片：运用盒子模型、圆角边框、阴影、过渡实现产品卡片效果。

淘宝侧边栏：结合字体图标、背景、内外边距、列表布局构建导航栏。

六、扩展知识（与盒子模型配合使用）

虽然不属于盒子模型核心，但在实际页面布局中常常结合：

字体图标（iconfont）：通过 font-family 将图标当作文字，可像文字一样设置大小、颜色、阴影，常放在盒子内部。

CSS精灵技术（CSS Sprites）：将多个小图标拼为一张大图，通过背景 background-position 移动到盒子内显示，减少 HTTP 请求。

总结思维导图

c 复制代码

CSS 盒子模型
├── 核心组成
│   ├── content（内容）
│   ├── padding（内边距）
│   ├── border（边框）
│   │   └── border-radius（圆角）
│   └── margin（外边距）
│       └── margin:0 auto（居中）
├── 盒尺寸
│   └── box-sizing（border-box 避免撑大）
├── 背景装饰
│   ├── 常见属性（颜色/图片/位置/平铺/大小/固定）
│   ├── 复合写法
│   ├── 渐变（线性/径向）
│   └── 文字渐变（background-clip:text）
├── 阴影与动画
│   ├── box-shadow（盒子阴影）
│   └── transition（过渡效果）
└── 综合应用
    ├── 小米卡片
    ├── 淘宝侧边栏
    ├── 字体图标（iconfont）
    └── CSS 精灵（Sprites）