HTML / CSS大前端
CSS 样式基础与布局实战指南
系统介绍了 CSS 的核心知识体系，涵盖概念、引入方式、选择器（基础与复合）、常用属性（文本、背景、边框、盒模型）以及布局定位（显示模式、弹性布局）。通过讲解 HTML 结构与 CSS 样式的配合，帮助开发者掌握网页外观设计与空间布局技巧，建立清晰的 CSS 知识框架，为打造美观专业的网页奠定基础。
系统介绍了 CSS 的核心知识体系，涵盖概念、引入方式、选择器（基础与复合）、常用属性（文本、背景、边框、盒模型）以及布局定位（显示模式、弹性布局）。通过讲解 HTML 结构与 CSS 样式的配合，帮助开发者掌握网页外观设计与空间布局技巧，建立清晰的 CSS 知识框架，为打造美观专业的网页奠定基础。
在网页开发领域，CSS（层叠样式表，Cascading Style Sheets） 是让网页从'单调结构'走向'美观交互'的关键技术：如果把 HTML 比作搭建网页骨架的'砖瓦'，CSS 就是定义'外观风格'与'空间布局'的'设计师'。它能为网页赋予色彩、字体、间距、动画等视觉表现，让页面从'能用'真正升级为'好看且易用'。
对于想要入门前端开发，或是希望系统提升网页样式能力的学习者而言，CSS 是必须深入掌握的核心内容。从理解 CSS 的基本概念与语法逻辑，到学习如何将 CSS 与 HTML 进行结合；从灵活运用各类'选择器'精准控制页面元素，到熟练操作文本、背景、边框等基础样式属性，再到借助'盒模型''布局定位'（包括弹性布局等现代方案）打造符合需求的页面结构……每一个环节，都直接影响着最终网页的呈现效果。
本文将围绕 CSS 的核心知识体系逐步展开：从 CSS 的基础概念、引入方式讲起，深入解析'基础选择器''复合选择器'等样式控制逻辑，再系统讲解文本、背景、边框、盒模型，以及布局与定位（如元素显示模式、弹性布局）等常用属性。无论你是刚接触前端的新手，还是需要梳理 CSS 知识的开发者，都能通过本文建立清晰的 CSS 知识框架，为后续打造精美、专业的网页奠定基础。
现在，就让我们一同走进 CSS 的世界，探索网页样式与布局的无限可能。
CSS 是层叠样式表（Cascading Style Sheets） 的缩写，核心作用是定义和控制网页的外观与布局，让 HTML 构建的网页结构更美观。
简单来说就是让原本朴素的网页变得更加丰富好看，相当于给网页进行'化妆'。
HTML 与 CSS 之间的关系是：HTML 负责搭建网页的'骨架'，比如创建标题、段落、图片等基础结构；CSS 则负责给这个'骨架'穿上'衣服'，决定结构的视觉呈现效果。两者分工明确，共同构成了可视化的网页。
<style>
/* 选择器 { 声明 } */
</style>
在 HTML 中使用 CSS 的方法大体上可以分为 3 种：
直接将 CSS 镶嵌到 HTML 页面中，通过<style>标签来进行嵌套。
head 中，对标签进行修饰。比如像百度网页中就有这种内部样式表的 CSS：
<style>放在 html 的任何位置都是可以的，一般都会放在head标签中。此处我们也可以写一个简单的内部样式表的 CSS：
比如以下，我们对<p>标签的颜色进行修饰：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>这是第一段的内容</p>
</body>
</html>
我们除了可以在<style>中对颜色进行设置，也是允许在一个具体标签中进行设置，比如：
<body>
<p style="color: red">这是第一段内容</p>
</body>
对于行内样式表来说，如果一个html文件很大的时候，如果我们想要对一个类别的标签进行修改，就需要将所有相同标签进行重复设置，耗时耗力，不方便。
对于内部样式表来说，将 CSS 嵌套到 HTML 中，并没有将样式完全分离到每一个具体标签中，确实将样式与页面结构进行了很好的分离，但是分离的还是不够彻底，当 CSS 内容很多的时候，尤其明显。
.css后缀进行命名。此时在进行编写 HTML 的时候，如果我们希望使用这种 CSS 样式，就需要进行链接。
<link rel="stylesheet" href="对应的 CSS 文件地址">
基础选择器：由单个选择器构成，其中主要包含 4 种：
直接使用标签进行选择，对该标签进行设置。
语法：
<style>
/* 标签名称 { 声明要设置的属性 } */
h1 {
color: antiquewhite;
}
</style>
直接对标签进行选择，HTML 中所有该类型的标签都会被进行设置。一般这种标签使用较少。
语法：
<style>
/* .类名 { 声明要设置的属性 } */
.name {
color: antiquewhite;
}
</style>
其中类名指的是，HTML 中我们对一些特定标签设置的类名称：
<body>
<p class="name">张三</p>
<p>12 岁</p>
</body>
一个标签可以设置多个类，中间用空格进行分割，比如：
<p class="s1 s2 s3"></p>
语法：
<style>
/* #id { 声明要设置的属性 } */
#zhangsan {
color: red;
}
</style>
对 ID 进行设置的方法与类一样：
<body>
<p id="zhangsan">张三</p>
<p>12 岁</p>
</body>
* 表示，它的作用是匹配页面中所有 HTML 元素（包括 <html>、<body>、<p>、<div> 等所有标签）。它是一种范围最广的选择器，常用于全局样式初始化或批量设置基础样式。语法：
/* 匹配页面中所有元素，清除默认 margin 和 padding */
* {
margin: 0;
padding: 0;
}
使用起来简单，在实际开发中，主要是用来针对页面中所有元素默认样式进行消除的，主要被用来消除边距。
复合选择器，顾名思义就是由多个基础选择器构成的，主要也是 4 种：
当一个标签中含有子标签，比如：
<body>
<ul>
<li>内容 1</li>
<li>内容 2</li>
<li>内容 3</li>
</ul>
<ol>
<li>内容 1</li>
<li>内容 2</li>
<li>内容 3</li>
</ol>
</body>
此时我们想对<ul>中的<li>的输出样式进行设置，但是不想改变<ol>中的<li>就可以采用子选择器来实现：
语法：
<style>
/* 父标签 > 子标签 { 属性声明 } */
ul > li {
color: red;
}
</style>
其中不仅仅可以是标签的父子关系，也可以是类名的父子关系。
后代选择器与上面的子选择器使用起来类似，只不过后代选择器不再仅仅存在于父子之间了，也可以爷孙等后代关系。
语法：
<style>
/* 长辈标签 后代标签 { 属性声明 } */
ul li {
color: red;
}
</style>
语法：
<style>
/* 多个标签/类/id { 属性声明 } */
ul, li {
color: red;
}
</style>
伪类选择器是 CSS 中一类特殊的选择器，用于选择元素的特定状态、位置或关系，而不是基于元素的标签名、类名或 ID。它们以冒号
:开头，语法为选择器：伪类 { 样式 }。
比如百度页面中，对于被选中的标签设置为蓝色，没有被选中的标签设置为黑色。
其中最常使用的有 4 种：
:link:选择未被访问的；:visited:选择已被访问的；:hover:鼠标悬停的；:active：活动的，鼠标按下但是还没有弹起的。/* 未访问的链接 */
a:link {
color: #333;
}
/* 已访问的链接 */
a:visited {
color: #999;
}
可以设置的属性有很多，此处就选择一些最为常见的进行介绍。
| 名称 | 说明 |
|---|---|
| font-family | 字体类型 |
| font-size | 字体大小 |
| color | 字体颜色 |
| font-weight | 字体粗细程度 |
| font-style | 字体样式 |
| text-align | 文本对齐方式 |
| text-indent | 文本缩进 |
| text-decoration | 字体装饰 |
| line-height | 行高 |
其中color有三种表示形式：
#ff0000其中每两个十六进制表示一个颜色，从前往后：红绿蓝；rgb(255, 0, 0)从前往后还是：红绿蓝。对于font-weight表示字体的粗细程度：
100~900数字越大越粗；bold/normal/lighter来进行表示。字体类型font-style有三种形式：normal/italic/oblique分别表示正常，斜体和倾斜。
斜体和倾斜有什么区别：
italic（斜体）：使用字体本身自带的'斜体版本'。这种字体是由设计师专门设计的，倾斜角度、笔画粗细等细节会根据字体特性进行优化，整体风格更自然协调（例如衬线字体的斜体可能会有更明显的笔画变化）。oblique（倾斜）：不使用字体的斜体版本，而是将正常字体（正体，normal）通过算法强制倾斜一定角度得到的效果。它本质上是对正体文字的'变形处理'，而非字体原生设计的斜体。文本对齐方式text-align有三种：left/center/right分别表示左中右。
文本装饰text-decoration也有三种：underline/line-through/overline表示下划线，删除线和上划线。
| 名称 | 说明 |
|---|---|
| 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：背景图像会被等比例缩放，确保图像完全显示在背景区域内（可能会在区域内留下空白）。对于边框属性，最常用的就一个：设置边框的圆角。
border-radius: 内切圆半径/百分比
HTML 的每一个元素，都相当于一个矩形的盒子。
在浏览器中进行调试的时候，我们也可以看到：
盒模型主要由四部分组成：
比如下面，我对一个段落的边框进行设置：
<style>
p {
width: 100px;
height: 50px;
color: red;
border: black solid;
padding: 10px;
margin: 100px;
}
</style>
<body>
<p>段落 1</p>
</body>
可以看到上述就是我们设置好的盒模型了。
但是：我们的盒模型的宽和高明明是：100 50 的，为什么这里变成了 12474 的，这也不难理解，因为我们设置了边框和内边距，因此盒子被撑大了。
如果不希望盒模型被撑大，可以设置box-sizing:border-box。
在上述进行设置的时候，我们是直接对上下左右的内边距，外边距进行设置的，CSS 也允许我们对单个进行设置：
padding-left/right/top/bottom: ...; margin-left/right/top/bottom: ...;
HTML 中的元素可以分为两种：块级元素，独占一行；行内元素。对于行内元素来说，也可以通过 CSS 中的设置转变为块级元素：display:block。
弹性容器：通过 display: flex 或 display: inline-flex 声明的父元素，它会'包裹'内部的子元素。
弹性布局通过'轴线'控制项目的排列方向，这是理解布局规则的核心：
flex-direction 决定（默认水平向右）。容器属性用于定义项目的排列方向、换行规则、对齐方式等，常用属性如下：
flex-direction：决定主轴方向（项目排列方向）row（默认）：主轴水平，项目从左到右排列。row-reverse：主轴水平，项目从右到左排列。column：主轴垂直，项目从上到下排列。column-reverse：主轴垂直，项目从下到上排列。.flex-container {
flex-direction: row; /* 默认值 */
/* flex-direction: row-reverse; */
/* flex-direction: column; */
/* flex-direction: column-reverse; */
}
flex-wrap：控制项目是否换行默认情况下，项目会在主轴上'挤压'不换行，通过 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; /* 等价于 flex-direction: row; flex-wrap: wrap; */
}
justify-content：控制项目在主轴上的对齐方式根据主轴方向（水平 / 垂直），控制项目的水平 / 垂直对齐：
flex-start（默认）：靠主轴起点对齐。flex-end：靠主轴终点对齐。center：沿主轴居中对齐（常用：水平居中）。space-between：项目两端对齐，中间间距相等（常用：两端分布）。space-around：项目两侧间距相等（总间距 = 中间间距 ×2）。space-evenly：项目之间及与容器边缘的间距完全相等。.flex-container {
justify-content: center; /* 主轴居中对齐 */
/* justify-content: space-between; */
}
align-items：控制项目在交叉轴上的对齐方式：根据交叉轴方向（垂直 / 水平），控制项目的垂直 / 水平对齐：stretch（默认）：项目拉伸至填满交叉轴方向（需项目无固定高度 / 宽度）。flex-start：靠交叉轴起点对齐。flex-end：靠交叉轴终点对齐。center：沿交叉轴居中对齐（常用：垂直居中）。baseline：项目沿基线（文字基线）对齐。.flex-container {
height: 300px; /* 给容器固定高度，才能看到垂直对齐效果 */
align-items: center; /* 交叉轴居中对齐（垂直居中） */
}
我们可以通过类似于这种弹性布局来实现，百度首页侧栏中的链接排列：
<style>
div {
margin-left: 20px;
display: flex;
height: 50px;
width: 500px;
justify-content: space-between;
align-items: center;
}
</style>
</head>
<body>
<div>
<span>新文</span>
<span>地图</span>
<span>贴吧</span>
<span>视频</span>
<span>图片</span>
<span>网盘</span>
</div>
</body>
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML 转 Markdown 互为补充。 在线工具，Markdown 转 HTML在线工具，online
将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML 转 Markdown在线工具，online
通过删除不必要的空白来缩小和压缩JSON。 在线工具，JSON 压缩在线工具，online
将JSON字符串修饰为友好的可读格式。 在线工具，JSON美化和格式化在线工具，online