前端入门必学：CSS盒子模型与图片样式全解析前言

wxin36

305人浏览 · 2026-05-15 08:07:46

wxin36 · 2026-05-15 08:07:46 发布

在学习前端开发的过程中，掌握 CSS 的基础知识是至关重要的一步。本文将详细介绍 CSS 盒子模型、标签宽高、边框、边距以及图片与背景图片的使用方法，适合刚入门的同学系统学习和复习。

一、CSS 盒子模型——页面布局的基石

1. 什么是盒子模型？

在 CSS 中，每个 HTML 元素都被视为一个长方形的盒子。这个盒子由四部分组成，从外到内依次是：

margin — 外边距，盒子与其他元素之间的距离
border — 边框，围绕在内边距和内容外的线
padding — 内边距，内容与边框之间的空白区域
content — 内容，显示文字和图片的区域

一个元素实际占用的空间 = width/height + padding + border + margin。

图解：

text

margin-top
  ┌─────────────────────────┐
  │ border-top              │
  │  ┌───────────────────┐  │
  │  │ padding-top       │  │
  │  │  ┌─────────────┐  │  │
  │  │  │   content   │  │  │
  │  │  └─────────────┘  │  │
  │  │ padding-bottom    │  │
  │  └───────────────────┘  │
  │ border-bottom           │
  └─────────────────────────┘
margin-bottom

2. 两种盒子模型

标准盒子模型（content-box，默认）

设置的 width / height 只作用于 content 区域
实际宽度 = width + padding-left + padding-right + border-left + border-right
总宽度 = 实际宽度 + margin-left + margin-right

替代盒子模型（border-box）

css

* {
    box-sizing: border-box;
}

设置的 width / height 包含了 content + padding + border
好处：更容易控制元素整体尺寸，增加 padding 不会撑大元素外部尺寸
推荐在项目开始时全局使用，能避免很多布局计算错误

对比示例：

css

.content-box {
    box-sizing: content-box;
    width: 200px;
    padding: 20px;
    border: 5px solid black;
    /* 实际内容区宽度 200px，总占用宽度 250px */
}
.border-box {
    box-sizing: border-box;
    width: 200px;
    padding: 20px;
    border: 5px solid black;
    /* 总占用宽度就是 200px，内容区自动缩小为 150px */
}

3. margin 的合并（塌陷）问题

现象： 两个垂直相邻的块级元素，它们的上下 margin 会合并，取较大值。

html

<div style="margin-bottom:30px;">上块</div>
<div style="margin-top:20px;">下块</div>
<!-- 实际间距 30px，不是 50px -->

父元素与子元素的 margin 合并：
父元素没有 border 或 padding 隔开时，子元素的 margin-top 会传递给父元素，导致父元素一起下移。

解决方法：

给父元素添加 overflow: hidden;
给父元素添加 border 或 padding（哪怕 1px）
使用 display: flex; 或 display: flow-root;
用伪元素隔开：::before { content: ""; display: table; }

二、标签宽高详解

1. 基本属性

css

div {
    width: 900px;
    height: 50px;
    line-height: 50px;   /* 单行文字垂直居中 */
}

2. 宽度高度特性

块级元素：默认宽度 100%（父元素内容区宽度），高度由内容撑开。
行内元素：设置 width / height 无效，需先转为 display: block; 或 inline-block;。
行内块元素：可以设置宽高，但不独占一行，相邻元素之间有空白间隙（换行符导致），解决：父元素 font-size: 0;。

3. 最小/最大宽高

css

.min-box {
    min-width: 200px;   /* 最小宽度，防止内容过少时太窄 */
    max-width: 600px;   /* 最大宽度，防止内容过多时过宽 */
    min-height: 100px;
    max-height: 300px;
}

常用于响应式布局，配合百分比宽度使用。

4. 单位详解

px — 像素，绝对单位，最常用
% — 相对于父元素内容区的百分比（注意父元素需有明确高度）
em — 相对于自身字体大小（font-size），1em = 当前字体大小
rem — 相对于根元素（html） 的字体大小，适合整体缩放
vw — 视口宽度的 1%，100vw = 整个窗口宽度
vh — 视口高度的 1%，100vh = 整个窗口高度

百分比高度的坑：

css

html, body { height: 100%; } /* 必须设置祖先高度 */
.child { height: 50%; }       /* 才有效 */

三、标签边框与圆角

1. 基本边框

css

border: 5px solid red;  /* 粗细 样式 颜色 */

样式可选值：solid（实线）、dashed（虚线）、dotted（点线）、double（双线）、groove（3D凹槽）、ridge（3D凸起）、inset（凹陷）、outset（凸出）。

2. 单边设置

css

border-top: 3px dashed blue;
border-right: none;
border-bottom: 1px solid #ccc;
border-left: 5px solid green;

可分别控制宽度、样式、颜色。

3. 圆角 border-radius

css

/* 统一圆角 */
border-radius: 10px;

/* 四个角分别设置（左上、右上、右下、左下） */
border-radius: 10px 20px 30px 40px;

/* 椭圆圆角（水平半径 / 垂直半径） */
border-radius: 20px / 10px;

/* 圆形：宽高相等，border-radius: 50% */
.circle {
    width: 100px; height: 100px;
    border-radius: 50%;
}

4. 边框图片（进阶）

css

border-image: url(border.png) 30 round;

较少使用，但可制作花式边框。

5. 轮廓 outline

位于边框外，不占空间
常用于表单聚焦样式：outline: 2px solid blue;
outline-offset 可设置与边框的距离

四、内外边距

1. 外边距 margin

css

margin: 10px;                  /* 四边相同 */
margin: 10px 20px;             /* 上下10px，左右20px */
margin: 10px 20px 30px;        /* 上10，左右20，下30 */
margin: 10px 20px 30px 40px;   /* 上右下左（顺时针） */

/* 水平居中 */
margin: 0 auto;  /* 必须设置宽度，且不能是行内元素 */

负值 margin：

css

margin-top: -20px;   /* 向上移动 20px */
margin-left: -10px;  /* 向左移动 10px */

常用于微调位置、重叠效果、突破父容器限制。

2. 内边距 padding

css

padding: 20px;
padding: 10px 20px;
padding-left: 30px;

padding 区域会显示背景色或背景图
使用 box-sizing: border-box; 后，padding 不会撑大元素外部尺寸

五、其他核心样式

1. 文字样式

css

color: #333;
font-size: 16px;
font-weight: bold;        /* 或 700 */
font-style: italic;
text-decoration: underline;  /* 下划线 */
text-decoration: line-through; /* 删除线 */
text-decoration: none;         /* 去掉下划线（常用于a标签） */
font-family: "Microsoft YaHei", Arial, sans-serif;
text-indent: 2em;          /* 首行缩进两个字符 */
text-align: center;        /* 水平居中 */
letter-spacing: 2px;       /* 字母间距 */
word-spacing: 4px;         /* 单词间距 */
line-height: 1.5;          /* 行高倍数，推荐无单位 */
text-shadow: 1px 1px 2px rgba(0,0,0,0.3);

2. 垂直对齐 vertical-align

用于行内元素或表格单元格
常用值：baseline（默认）、top、middle、bottom
图片底部空白问题：图片默认基线对齐，底部会有 3-4px 空隙

css
```
img { vertical-align: top; }  /* 解决 */
/* 或者 */
img { display: block; }
```

3. 背景与颜色

css

background-color: #f0f0f0;
background-color: rgba(255, 0, 0, 0.5);  /* 半透明背景，不影响子元素 */
opacity: 0.5;  /* 整个元素半透明（含子元素） */

4. 溢出处理

css

overflow: visible;   /* 默认，溢出可见 */
overflow: hidden;    /* 隐藏溢出内容 */
overflow: scroll;    /* 始终显示滚动条 */
overflow: auto;      /* 内容溢出时才显示滚动条 */
overflow-x: hidden;  /* 单独控制水平方向 */

5. 鼠标样式

css

cursor: pointer;    /* 手型，可点击 */
cursor: default;    /* 箭头 */
cursor: move;       /* 移动 */
cursor: text;       /* 文本输入 */
cursor: not-allowed; /* 禁止 */
cursor: wait;       /* 等待 */

6. 列表样式

css

ul {
    list-style-type: none;      /* 去除默认圆点 */
    list-style-type: square;    /* 实心方块 */
    list-style-type: decimal;   /* 数字 */
    list-style-image: url(dot.png);  /* 自定义图片符号 */
}

7. 超链接伪类（LVHA 顺序）

css

a:link { color: blue; }       /* 未访问 */
a:visited { color: purple; }  /* 已访问 */
a:hover { color: red; }       /* 鼠标悬停 */
a:active { color: orange; }   /* 点击瞬间 */

顺序不能乱：LoVe HAte。

六、CSS 选择器优先级

选择器	示例	权重
内联样式	`style="color:red"`	1000
ID 选择器	`#header`	0100
类/伪类/属性	`.box`, `:hover`, `[type]`	0010
标签/伪元素	`div`, `::before`	0001
通配符	`*`	0000
重要声明	`!important`	最高

派生选择器权重累加：#nav li.active = 100 + 1 + 10 = 111。

七、img 标签与图片优化

1. 基本用法

html

<img src="photo.jpg" alt="照片描述" title="悬停提示" width="600">

alt 是必须的，图片加载失败时显示，利于 SEO 和无障碍访问
只设宽度或高度，另一个自动等比缩放
图片居中：父元素 text-align: center;

2. 图片格式选择

JPEG：照片、复杂颜色，有损压缩，文件小
PNG：图标、透明背景，无损压缩
GIF：简单动图，颜色少
SVG：矢量图，无限缩放，可编辑
WebP：谷歌格式，同等质量体积更小

3. object-fit 控制图片填充方式

css

img {
    width: 300px; height: 200px;
    object-fit: cover;    /* 裁剪并铺满，类似 background-size: cover */
    object-fit: contain;  /* 完整显示，留白 */
    object-fit: fill;     /* 拉伸填充（默认） */
    object-position: center; /* 焦点位置 */
}

八、背景图片完全指南

1. 基本属性

css

background-image: url("bg.png");
background-repeat: no-repeat;      /* 不平铺 */
background-repeat: repeat-x;        /* 仅水平平铺 */
background-size: cover;             /* 铺满容器，可能裁剪 */
background-size: contain;           /* 完整显示，可能留白 */
background-size: 100px 200px;       /* 固定尺寸 */
background-position: center;        /* 居中 */
background-position: 20px 50%;      /* 具体坐标 */
background-attachment: fixed;       /* 背景固定，视差效果 */

2. 多重背景

css

background:
    url(overlay.png) center/cover no-repeat,
    url(bg.jpg) center/cover no-repeat;
/* 先写的在上层 */

可用于叠加纹理、图案、渐变。

3. CSS 渐变

css

/* 线性渐变 */
background: linear-gradient(to right, red, blue);
background: linear-gradient(45deg, #ff0, #f0f);

/* 径向渐变 */
background: radial-gradient(circle, red, yellow, green);

4. 精灵图（CSS Sprites）

将多个小图标合并为一张大图，通过 background-position 显示局部。

css

.icon {
    width: 30px; height: 30px;
    background: url(sprite.png) no-repeat;
}
.icon-home  { background-position: 0 0; }
.icon-user  { background-position: -30px 0; }
.icon-cart  { background-position: -60px 0; }

优点：减少 HTTP 请求，加快加载。