跳到主要内容
极客日志极客日志面向AI+效率的开发者社区
首页博客我的书AI学习GitHub 精选镜像AI 生图工具UI配色美学关于
搜索内容 / 工具 / 仓库 / 镜像...⌘K搜索
注册
博客列表
HTML / CSS大前端

CSS 样式基础与界面布局实战指南

系统介绍了 CSS 的基础概念、引入方式及常用属性。涵盖标签、类、ID 等基础选择器，以及子选择器、后代选择器等复合选择器的用法。详细讲解了文本、背景、边框、盒模型等核心属性，并深入解析了 Flexbox 弹性布局的实现原理与关键属性。适合前端初学者建立 CSS 知识框架，掌握网页样式设计与布局技巧。

PhpPioneer发布于 2026/4/5更新于 2026/9/263 浏览
CSS 样式基础与界面布局实战指南

CSS 样式基础与界面布局实战指南

前言

在网页开发领域，CSS（层叠样式表，Cascading Style Sheets） 是让网页从'单调结构'走向'美观交互'的关键技术。如果把 HTML 比作搭建网页骨架的'砖瓦'，CSS 就是定义'外观风格'与'空间布局'的'设计师'。它能为网页赋予色彩、字体、间距、动画等视觉表现，让页面从'能用'真正升级为'好看且易用'。

本文将围绕 CSS 的核心知识体系逐步展开：从 CSS 的基础概念、引入方式讲起，深入解析'基础选择器''复合选择器'等样式控制逻辑，再系统讲解文本、背景、边框、盒模型，以及布局与定位（如元素显示模式、弹性布局）等常用属性。

一、CSS 是什么

1.1 概念

CSS 是层叠样式表（Cascading Style Sheets） 的缩写，核心作用是定义和控制网页的外观与布局，让 HTML 构建的网页结构更美观。

简单来说就是让原本朴素的网页变得更加丰富、好看，相当于给网页进行'化妆'。

HTML 与 CSS 之间的关系是：HTML 负责搭建网页的'骨架'，比如创建标题、段落、图片等基础结构；CSS 则负责给这个'骨架'穿上'衣服'，决定结构的视觉呈现效果。两者分工明确，共同构成了可视化的网页。

1.2 基本语法

选择器 {
    属性名：属性值;
}
  1. 选择器：用于指定要修改的目标元素。
  2. 声明：大括号中的内容，用于修饰该元素。
  3. 键值对：声明的属性由属性名和属性值组成。

二、CSS 如何引入 HTML

在 HTML 中使用 CSS 的方法大体上可以分为 3 种：

  1. 内部样式表
  2. 行内样式表
  3. 外部引入

2.1 内部样式表

直接将 CSS 镶嵌到 HTML 页面中，通过 <style> 标签来进行嵌套。

  • 通常将 CSS 放在 <head> 标签中，对标签进行修饰。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p {
            color: red;
        }
    </style>
</>

    这是第一段的内容
head
<body>
<p>
</p>
</body>
</html>

理论上 <style> 放在 HTML 的任何位置都是可以的，但一般建议放在 <head> 标签中。

2.2 行内样式表

除了可以在 <style> 中对颜色进行设置，也是允许在一个具体标签中进行设置。

<p style="color: red">这是第一段内容</p>
  • 注意：如果行内样式表和内部样式表同时存在，行内样式表中的设置优先级更高。

2.3 外部引入

对于行内样式表来说，如果一个 HTML 文件很大，想要对一个类别的标签进行修改，就需要将所有相同标签进行重复设置，耗时耗力。

对于内部样式表来说，虽然将样式与页面结构进行了分离，但当 CSS 内容很多时，耦合度依然较高。

因此出现了外部引入式：将 CSS 内容全部放到一个单独的 CSS 文件中，该文件以 .css 后缀进行命名。

此时在进行编写 HTML 的时候，如果我们希望使用这种 CSS 样式，就需要进行链接。

<link rel="stylesheet" href="对应的 CSS 文件地址.css">

三、CSS 选择器

CSS 中的选择器大体上分为两种：（1）基础选择器；（2）复合选择器。

3.1 基础选择器

基础选择器：由单个选择器构成，其中主要包含 4 种：

  1. 标签选择器
  2. 类选择器
  3. id 选择器
  4. 通配符选择器
3.1.1 标签选择器

直接使用标签进行选择，对该标签进行设置。

h1 {
    color: antiquewhite;
}

直接对标签进行选择，HTML 中所有该类型的标签都会被进行设置。一般这种标签使用较少。

3.1.2 类选择器
.name {
    color: antiquewhite;
}

其中类名指的是，HTML 中我们对一些特定标签设置的类名称：

<p class="name">张三</p>

一个标签可以设置多个类，中间用空格进行分割，例如：

<p class="s1 s2 s3"></p>
3.1.3 id 选择器
  • 通过 ID 来进行选择，与类不一样的是，每个标签只有一个 ID，并且每个标签的 ID 要求是唯一的。
#张三 {
    color: red;
}

对 ID 进行设置的方法与类一样：

<p id="张三">张三</p>
3.1.4 通配符选择器
  • 在 CSS 中，通配符选择器用 * 表示，它的作用是匹配页面中所有 HTML 元素。它是一种范围最广的选择器，常用于全局样式初始化或批量设置基础样式。
/* 匹配页面中所有元素，清除默认 margin 和 padding */
* {
    margin: 0;
    padding: 0;
}

在实际开发中，主要是用来针对页面中所有元素默认样式进行消除的，主要被用来消除边距。

3.2 复合选择器

复合选择器，顾名思义就是由多个基础选择器构成的，主要也是 4 种：

  1. 子选择器
  2. 后代选择器
  3. 并集选择器
  4. 伪类选择器
3.2.1 子选择器

当一个标签中含有子标签，比如：

<ul>
    <li>内容 1</li>
    <li>内容 2</li>
    <li>内容 3</li>
</ul>
<ol>
    <li>内容 1</li>
    <li>内容 2</li>
    <li>内容 3</li>
</ol>

此时我们想对 <ul> 中的 <li> 的输出样式进行设置，但是不想改变 <ol> 中的 <li> 就可以采用子选择器来实现。

ul > li {
    color: red;
}

其中不仅仅可以是标签的父子关系，也可以是类名的父子关系。

3.2.2 后代选择器

后代选择器与上面的子选择器使用起来类似，只不过后代选择器不再仅仅现在在父子之间了，也可以爷孙等后代关系。

ul li {
    color: red;
}
3.2.3 并集选择器
  • 并集选择器，顾名思义就是对多个标签、类、id 同时进行设置，其中有逗号隔开。
ul, li {
    color: red;
}
3.2.4 伪类选择器

伪类选择器是 CSS 中一类特殊的选择器，用于选择元素的特定状态、位置或关系，而不是基于元素的标签名、类名或 ID。它们以冒号 : 开头，语法为 选择器：伪类 { 样式 }。

  • 伪类不直接匹配元素本身，而是根据元素的动态状态（如鼠标悬停）、文档结构位置（如第一个子元素）或特殊关系（如被点击的链接）来筛选元素，让样式控制更灵活。

其中最常使用的有 4 种：

  1. :link: 选择未被访问的；
  2. :visited: 选择已被访问的；
  3. :hover: 鼠标悬停的；
  4. :active: 活动的，鼠标按下但是还没有弹起的。
/* 未访问的链接 */
a:link {
    color: #333;
}
/* 已访问的链接 */
a:visited {
    color: #999;
}

四、CSS 常用属性

可以设置的属性有很多，此处就选择一些最为常见的进行介绍。

4.1 文本属性

名称说明
font-family字体类型
font-size字体大小
color字体颜色
font-weight字体粗细程度
font-style字体样式
text-align文本对齐方式
text-indent文本缩进
text-decoration字体装饰
line-height行高

其中 color 有三种表示形式：

  1. 直接使用颜色对应的英文；
  2. 使用三原色进行表示：#ff0000，其中每两个十六进制表示一个颜色，从前往后：红绿蓝；
  3. 依旧是使用三原色进行表示：rgb(255, 0, 0)，从前往后还是：红绿蓝。

对于 font-weight 表示字体的粗细程度：

  1. 可以使用数字 100~900，数字越大越粗；
  2. 也可以使用 bold/normal/light 来进行表示。

字体类型 font-style 有三种形式：normal/italic/oblique，分别表示正常、斜体和倾斜。

斜体和倾斜有什么区别：

  • italic（斜体）：使用字体本身自带的'斜体版本'。这种字体是由设计师专门设计的，倾斜角度、笔画粗细等细节会根据字体特性进行优化，整体风格更自然协调。
  • oblique（倾斜）：不使用字体的斜体版本，而是将正常字体（正体，normal）通过算法强制倾斜一定角度得到的效果。它本质上是对正体文字的'变形处理'，而非字体原生设计的斜体。

文本对齐方式 text-align 有三种：left/center/right，分别表示左中右。

文本装饰 text-decoration 也有三种：underline/line-through/overline，表示下划线、删除线和上划线。

4.2 背景属性

名称说明
background-color背景颜色
background-image背景图
background-repeat背景平铺方式
background-position背景位置
background-size背景大小

关于背景颜色和背景图就不再赘述了，此处详细介绍一下背景的平铺方式：

  1. repeat（默认值）：背景图像在水平方向（x 轴）和垂直方向（y 轴）同时重复平铺，直到完全填满元素的背景区域。
  2. repeat-x：背景图像仅在水平方向（x 轴）重复平铺，垂直方向不重复（只显示一次）。
  3. repeat-y：背景图像仅在垂直方向（y 轴）重复平铺，水平方向不重复（只显示一次）。
  4. no-repeat：背景图像不重复平铺，仅在背景区域内显示一次。

对于背景的位置 background-position 可以直接设置 x 坐标和 y 坐标，也可以使用 top/bottom/left/right 来进行替代。

对于背景的大小 background-size 可以直接使用宽度和高度来进行设置，也可以使用提供的一些方式：

  1. auto 默认值：保持背景图像的原始尺寸（宽高比例不变），不进行缩放。
  2. cover：背景图像会被等比例缩放，确保完全覆盖整个背景区域（可能会裁剪图像的边缘）。
  3. contain：背景图像会被等比例缩放，确保图像完全显示在背景区域内（可能会在区域内留下空白）。

4.3 边框属性

对于边框属性，最常用的就一个：设置边框的圆角。

border-radius: 内切圆半径 / 百分比;
  1. 对于内切圆半径，值越大，弧度越大。
  2. 百分比对应的：
    1. 圆角的水平半径（控制左右方向的曲率） = 元素宽度 × 百分比；
    2. 圆角的垂直半径（控制上下方向的曲率） = 元素高度 × 百分比；

4.4 盒模型属性

HTML 的每一个元素，都相当于一个矩形的盒子。

盒模型主要由四部分组成：

  1. 边框 border

  2. 内容 content

  3. 内边距 padding

  4. 外边距 margin

  5. 内边距就是内容相对于边框的距离；

  6. 外边距就是每一个边框之间的距离。

比如下面，我对一个段落的边框进行设置：

p {
    width: 100px;
    height: 50px;
    color: red;
    border: black solid;
    padding: 10px;
    margin: 100px;
}

可以看到上述就是我们设置好的盒模型了。

但是：我们的盒模型的宽和高明明是 100 和 50 的，为什么这里变成了 124*74 的？这也不难理解，因为我们设置了边框和内边距，因此盒子被撑大了。

如果不希望盒模型被撑大，可以设置 box-sizing: border-box。

在上述进行设置的时候，我们是直接对上下左右的内边距、外边距进行设置的，CSS 也允许我们对单个进行设置：

padding-left/right/top/bottom: ...;
margin-left/right/top/bottom: ...;

4.5 布局与定位属性

4.5.1 元素显示模式

HTML 中的元素可以分为两种：块级元素，独占一行；行内元素。 对于行内元素来说，也可以通过 CSS 中的设置转变为块级元素：display: block。

4.5.2 弹性布局
  • 弹性布局是一种手段，专门用于解决元素在容器中的对齐、分布和动态尺寸调整问题。

弹性容器：通过 display: flex 或 display: inline-flex 声明的父元素，它会'包裹'内部的子元素。

弹性布局通过'轴线'控制项目的排列方向，这是理解布局规则的核心：

  • 主轴：默认沿主轴排列，方向由 flex-direction 决定（默认水平向右）。
  • 交叉轴：垂直于主轴的轴线，方向随主轴变化（默认垂直向下）。

容器属性用于定义项目的排列方向、换行规则、对齐方式等，常用属性如下：

  1. flex-direction：决定主轴方向（项目排列方向）
  • row（默认）：主轴水平，项目从左到右排列。
  • row-reverse：主轴水平，项目从右到左排列。
  • column：主轴垂直，项目从上到下排列。
  • column-reverse：主轴垂直，项目从下到上排列。
.flex-container {
    flex-direction: row; /* 默认值 */
    /* flex-direction: row-reverse; */
    /* flex-direction: column; */
    /* flex-direction: column-reverse; */
}
  1. flex-wrap：控制项目是否换行

默认情况下，项目会在主轴上'挤压'不换行，通过 flex-wrap 可设置换行规则：

  • nowrap（默认）：不换行，项目可能被压缩。
  • wrap：换行，超出容器的项目移至下一行（沿交叉轴方向）。
  • wrap-reverse：换行，但新行在上方（交叉轴反向）。
.flex-container {
    flex-wrap: wrap; /* 超出容器时换行 */
}
  1. flex-flow：flex-direction + flex-wrap 的简写

语法：flex-flow: <flex-direction> <flex-wrap>，简化代码：

.flex-container {
    flex-flow: row wrap; /* 等价于 flex-direction: row; flex-wrap: wrap; */
}
  1. justify-content：控制项目在主轴上的对齐方式

根据主轴方向（水平 / 垂直），控制项目的水平 / 垂直对齐：

  • flex-start（默认）：靠主轴起点对齐。
  • flex-end：靠主轴终点对齐。
  • center：沿主轴居中对齐（常用：水平居中）。
  • space-between：项目两端对齐，中间间距相等（常用：两端分布）。
  • space-around：项目两侧间距相等（总间距 = 中间间距 × 2）。
  • space-evenly：项目之间及与容器边缘的间距完全相等。
.flex-container {
    justify-content: center; /* 主轴居中对齐 */
    /* justify-content: space-between; */
}
  1. align-items：控制项目在交叉轴上的对齐方式

根据交叉轴方向（垂直 / 水平），控制项目的垂直 / 水平对齐：

  • stretch（默认）：项目拉伸至填满交叉轴方向（需项目无固定高度 / 宽度）。
  • flex-start：靠交叉轴起点对齐。
  • flex-end：靠交叉轴终点对齐。
  • center：沿交叉轴居中对齐（常用：垂直居中）。
  • baseline：项目沿基线（文字基线）对齐。
.flex-container {
    height: 300px; /* 给容器固定高度，才能看到垂直对齐效果 */
    align-items: center; /* 交叉轴居中对齐（垂直居中） */
}

我们可以通过类似于这种弹性布局来实现侧栏中的链接排列：

div {
    margin-left: 20px;
    display: flex;
    height: 50px;
    width: 500px;
    justify-content: space-between;
    align-items: center;
}

<div>
    <span>新文</span>
    <span>地图</span>
    <span>贴吧</span>
    <span>视频</span>
    <span>图片</span>
    <span>网盘</span>
</div>

目录

  1. CSS 样式基础与界面布局实战指南
  2. 前言
  3. 一、CSS 是什么
  4. 1.1 概念
  5. 1.2 基本语法
  6. 二、CSS 如何引入 HTML
  7. 2.1 内部样式表
  8. 2.2 行内样式表
  9. 2.3 外部引入
  10. 三、CSS 选择器
  11. 3.1 基础选择器
  12. 3.1.1 标签选择器
  13. 3.1.2 类选择器
  14. 3.1.3 id 选择器
  15. 3.1.4 通配符选择器
  16. 3.2 复合选择器
  17. 3.2.1 子选择器
  18. 3.2.2 后代选择器
  19. 3.2.3 并集选择器
  20. 3.2.4 伪类选择器
  21. 四、CSS 常用属性
  22. 4.1 文本属性
  23. 4.2 背景属性
  24. 4.3 边框属性
  25. 4.4 盒模型属性
  26. 4.5 布局与定位属性
  27. 4.5.1 元素显示模式
  28. 4.5.2 弹性布局

更多推荐文章

查看全部
  • 基于 Docker 部署节点小宝实现 SD-WAN 远程开发
  • JDK21 集成 IntelliJ IDEA 开发环境详解
  • 宇树 G1 机器人开发：有线与无线连接配置指南
  • JDK21 虚拟线程：从平台线程到轻量级并发
  • C# 与 Python 在 AI 模型路由中的性能对比与选型指南
  • Python 缠论分析：自动化买卖点识别与策略优化
  • JDK 1.8 (8u202) 下载与安装配置指南
  • JDK 17 安装与环境配置详解
  • Java Map 与 Set 数据结构及实现原理
  • JDK 17 官方下载与跨平台安装指南
  • Tesseract.js 纯 JavaScript OCR 技术指南
  • OpenClaw Session 机制详解：重置、压缩、剪枝与记忆管理
  • 基于 React 与 AI 的数字塔罗占卜系统技术实现
  • Spring Boot 实战：从入门到项目部署
  • MCP 插件配置指南：以 browser-tools-mcp 为例
  • 渐进式 AIGC 系统：支持 Nano-Banana 绘画、VEO3/Sora-2 视频及 Agent 智能体
  • Java Lambda 与 Stream 详解
  • Pixel Fashion Atelier 部署教程：Stable Diffusion 像素时装生成
  • Java 中对象的几种比较方式
  • Java 对象比较详解：基本类型、String 与自定义类

相关免费在线工具

  • Base64 字符串编码/解码

    将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online

  • Base64 文件转换器

    将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online

  • Markdown转HTML

    将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML转Markdown 互为补充。 在线工具，Markdown转HTML在线工具，online

  • HTML转Markdown

    将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML转Markdown在线工具，online

  • JSON 压缩

    通过删除不必要的空白来缩小和压缩JSON。 在线工具，JSON 压缩在线工具，online

  • JSON美化和格式化

    将JSON字符串修饰为友好的可读格式。 在线工具，JSON美化和格式化在线工具，online