跳到主要内容CSS 样式基础与布局实战指南 | 极客日志HTML / CSS大前端
CSS 样式基础与布局实战指南
系统讲解 CSS 基础知识与布局实战。涵盖 CSS 概念、引入方式（内部、行内、外部）、选择器（基础与复合）、常用属性（文本、背景、边框、盒模型）以及布局定位（显示模式、弹性布局）。通过代码示例与图解，帮助开发者掌握网页样式美化与结构搭建的核心技能，建立清晰的 CSS 知识框架。
BackendPro34 浏览 
前言
在网页开发领域，CSS（层叠样式表，Cascading Style Sheets） 是让网页从'单调结构'走向'美观交互'的关键技术：如果把 HTML 比作搭建网页骨架的'砖瓦'，CSS 就是定义'外观风格'与'空间布局'的'设计师'。它能为网页赋予色彩、字体、间距、动画等视觉表现，让页面从'能用'真正升级为'好看且易用'。
对于想要入门前端开发，或是希望系统提升网页样式能力的学习者而言，CSS 是必须深入掌握的核心内容。从理解 CSS 的基本概念与语法逻辑，到学习如何将 CSS 与 HTML 进行结合；从灵活运用各类'选择器'精准控制页面元素，到熟练操作文本、背景、边框等基础样式属性，再到借助'盒模型''布局定位'（包括弹性布局等现代方案）打造符合需求的页面结构……每一个环节，都直接影响着最终网页的呈现效果。
本文将围绕 CSS 的核心知识体系逐步展开：从 CSS 的基础概念、引入方式讲起，深入解析'基础选择器''复合选择器'等样式控制逻辑，再系统讲解文本、背景、边框、盒模型，以及布局与定位（如元素显示模式、弹性布局）等常用属性。无论你是刚接触前端的新手，还是需要梳理 CSS 知识的开发者，都能通过本文建立清晰的 CSS 知识框架，为后续打造精美、专业的网页奠定基础。
一、CSS 是什么
1.1 概念
CSS 是层叠样式表（Cascading Style Sheets） 的缩写，核心作用是定义和控制网页的外观与布局，让 HTML 构建的网页结构更美观。
简单来说就是让原本朴素的网页，变得更加丰富、好看。相当于给网页进行'化妆'。
HTML 与 CSS 之间的关系就是：HTML 负责搭建网页的'骨架'，比如创建标题、段落、图片等基础结构；CSS 则负责给这个'骨架'穿上'衣服'，决定结构的视觉呈现效果。两者分工明确，共同构成了可视化的网页。
1.2 基本语法
<style>选择器 {
}</style>
- 选择器指定要修改的元素板块；
- 大括号中的声明用于修饰该板块中的元素；
- 声明的属性是键值对。
二、CSS 如何引入 HTML
在 HTML 中使用 CSS 的方法大体上可以分为 3 种：
- 内部样式表；
- 行内样式表；
- 外部引入。
2.1 内部样式表
直接将 CSS 镶嵌到 HTML 页面中，通过<style>标签来进行嵌套。
理论上<style>放在 HTML 的任何位置都是可以的，一般都会放在head标签中。
此处我们可以写一个简单的内部样式表的 CSS：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=>
Document
这是第一段的内容
"UTF-8"
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
</title>
<style>
p { color: red; }
</style>
</head>
<body>
<p>
</p>
</body>
</html>
2.2 行内样式表
我们除了可以在<style>中对颜色进行设置，也是允许在一个具体标签中进行设置，例如：
<body>
<p style="color: red">这是第一段内容</p>
</body>
注意：如果行内样式表和内部样式表同时存在，行内样式表中的设置优先级更高。
2.3 外部引入
对于行内样式表来说，如果一个 HTML 文件很大时，如果想要对一个类别的标签进行修改，就需要将所有相同标签进行重复设置，耗时耗力。
对于内部样式表来说，将 CSS 嵌套到 HTML 中，确实将样式与页面结构进行了分离，但是分离得不够彻底。当 CSS 内容很多的时候，尤其明显。
因此就出现了外部引入式：将 CSS 内容全部都放到一个单独的 CSS 文件中，该文件以.css后缀进行命名。
此时在进行编写 HTML 的时候，如果我们希望使用这种 CSS 样式，就需要进行链接。
<link rel="stylesheet" href="对应的 CSS 文件地址">
三、CSS 选择器
CSS 中的选择器大体上分为两种：（1）基础选择器；（2）复合选择器。
3.1 基础选择器
基础选择器由单个选择器构成，其中主要包含 4 种：
- 标签选择器；
- 类选择器；
- id 选择器；
- 通配符选择器。
3.1.1 标签选择器
h1 { color: antiquewhite; }
直接对标签进行选择，HTML 中所有该类型的标签都会被进行设置。一般这种标签使用较少。
3.1.2 类选择器
.name { color: antiquewhite; }
其中类名指的是，HTML 中我们对一些特定标签设置的类名称：
一个标签可以设置多个类，中间用空格进行分割，例如：
3.1.3 id 选择器
通过 ID 来进行选择，与类不一样的是，每个标签只有一个 ID，并且每个标签的 ID 要求是唯一的。
3.1.4 通配符选择器
在 CSS 中，通配符选择器用 * 表示，它的作用是匹配页面中所有 HTML 元素。它是一种范围最广的选择器，常用于全局样式初始化或批量设置基础样式。
* {
margin: 0;
padding: 0;
}
在实际开发中，主要是用来针对页面中所有元素默认样式进行消除的，主要被用来消除边距。
3.2 复合选择器
复合选择器，顾名思义就是由多个基础选择器构成的，主要也是 4 种：
- 子选择器；
- 后代选择器；
- 并集选择器；
- 伪类选择器。
3.2.1 子选择器
<ul>
<li>内容 1</li>
<li>内容 2</li>
</ul>
此时我们想对<ul>中的<li>的输出样式进行设置，但是不想改变其他标签中的<li>就可以采用子选择器来实现：
其中不仅仅可以是标签的父子关系，也可以是类名的父子关系。
3.2.2 后代选择器
后代选择器与上面的子选择器使用起来类似，只不过后代选择器不再仅仅存在于父子之间了，也可以爷孙等后代关系。
3.2.3 并集选择器
并集选择器，顾名思义就是对多个标签、类、id 同时进行设置，其中有逗号隔开。
3.2.4 伪类选择器
伪类选择器是 CSS 中一类特殊的选择器，用于选择元素的特定状态、位置或关系，而不是基于元素的标签名、类名或 ID。它们以冒号 : 开头，语法为 选择器：伪类 { 样式 }。
:link: 选择未被访问的；:visited: 选择已被访问的；:hover: 鼠标悬停的；: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 | 行高 |
- 直接使用颜色对应的英文；
- 使用三原色进行表示：
#ff0000，其中每两个十六进制表示一个颜色，从前往后：红绿蓝；
- 依旧是使用三原色进行表示：
rgb(255, 0, 0)，从前往后还是：红绿蓝。
- 可以使用数字
100~900，数字越大越粗；
- 也可以使用
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 | 背景大小 |
关于背景颜色和背景图就不再赘述了，此处详细介绍一下背景的平铺方式：
repeat（默认值）：背景图像在水平方向（x 轴）和垂直方向（y 轴）同时重复平铺，直到完全填满元素的背景区域。repeat-x：背景图像仅在水平方向（x 轴）重复平铺，垂直方向不重复（只显示一次）。repeat-y：背景图像仅在垂直方向（y 轴）重复平铺，水平方向不重复（只显示一次）。no-repeat：背景图像不重复平铺，仅在背景区域内显示一次。
对于背景的位置background-position可以直接设置 x 坐标和 y 坐标，也可以使用top/bottom/left/right来进行替代。
对于背景的大小background-size可以直接使用宽度和高度来进行设置，也可以使用提供的一些方式：
auto默认值：保持背景图像的原始尺寸（宽高比例不变），不进行缩放。cover：背景图像会被等比例缩放，确保完全覆盖整个背景区域（可能会裁剪图像的边缘）。contain：背景图像会被等比例缩放，确保图像完全显示在背景区域内（可能会在区域内留下空白）。
4.3 边框属性
border-radius: 内切圆半径/百分比;
- 对于内切圆半径，值越大，弧度越大。
- 百分比对应的：
- 圆角的水平半径（控制左右方向的曲率） = 元素宽度 × 百分比；
- 圆角的垂直半径（控制上下方向的曲率） = 元素高度 × 百分比；
4.4 盒模型属性
-
边框 border；
-
内容 content；
-
内边距 padding；
-
外边距 margin；
-
内边距就是内容相对于边框的距离；
-
外边距就是每一个边框之间的距离。
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 决定（默认水平向右）。
- 交叉轴：垂直于主轴的轴线，方向随主轴变化（默认垂直向下）。
容器属性用于定义项目的排列方向、换行规则、对齐方式等，常用属性如下：
flex-direction：决定主轴方向（项目排列方向）
row（默认）：主轴水平，项目从左到右排列。row-reverse：主轴水平，项目从右到左排列。column：主轴垂直，项目从上到下排列。column-reverse：主轴垂直，项目从下到上排列。
.flex-container {
flex-direction: row;
}
默认情况下，项目会在主轴上'挤压'不换行，通过 flex-wrap 可设置换行规则：
nowrap（默认）：不换行，项目可能被压缩。wrap：换行，超出容器的项目移至下一行（沿交叉轴方向）。wrap-reverse：换行，但新行在上方（交叉轴反向）。
.flex-container {
flex-wrap: wrap;
}
flex-flow：flex-direction + flex-wrap 的简写
语法：flex-flow: <flex-direction> <flex-wrap>，简化代码：
.flex-container {
flex-flow: row wrap;
}
justify-content：控制项目在主轴上的对齐方式
根据主轴方向（水平 / 垂直），控制项目的水平 / 垂直对齐：
flex-start（默认）：靠主轴起点对齐。flex-end：靠主轴终点对齐。center：沿主轴居中对齐（常用：水平居中）。space-between：项目两端对齐，中间间距相等（常用：两端分布）。space-around：项目两侧间距相等（总间距 = 中间间距 ×2）。space-evenly：项目之间及与容器边缘的间距完全相等。
.flex-container {
justify-content: center;
}
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>
相关免费在线工具
- 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
