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

在学习前端开发的过程中，掌握 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; } /* 点击瞬间 */

顺序不能乱：LoVeHAte。

六、CSS 选择器优先级

派生选择器权重累加：#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 请求，加快加载。

总结

本文覆盖了 CSS 盒子模型、宽高、边框、边距、文字样式、选择器优先级以及图片与背景图片的全部核心知识点。掌握这些内容，你已经可以完成大部分静态页面的样式编写。下一篇我们将继续学习网页布局、弹性布局、响应式设计和标签定位，敬请期待！