python-CSS

作者: Lanpangzi
Icon发表于2026-01-20
Icon更新于2026-02-27
Iconpython
Icon

1. CSS 简介

CSS 是用来控制网页在浏览器中的显示外观的语言。

  • 样式美化：文本样式、背景、边框等

  • 布局与定位：元素排列、响应式设计

  • 动画交互：伪类、过度、动画

1.1 CSS 分类：

  1. 内嵌样式表（行内样式表）：样式写到标签内部，可以控制当前标签的样式，特殊情况使用。
1
<p style="color:red;font-size:14px;">文字内容</p>

  1. 内部样式表：写到 head 标签中，脱离结构，可以控制当前页面的所有标签，较为常用。

  2. 外部样式表：单独新建一个 CSS 文件，完全脱离结构，可以控制整个网站的所有标签，最常用。

1
<link rel="stylesheet" href="./css/index.css">

2. CSS 选择器

CSS 选择器：选择 HTML 元素的方式

CSS 属性：采取键值对形式。属性名：属性值;

2.1 选择器分类

  1. 基础选择器

  2. 关系选择器

  3. 分组选择器

  4. 伪类和伪元素

  5. 属性选择器

2.2 基础选择器

基础选择器指的是由单个选择器组成，常见的有：

  1. 类型选择器
1
2
3
p {
    color: gold;
}

类选择器选择某个类型的元素，也称为标签选择器

  1. 类选择器
1
2
3
.box {
    color: gold;
}

类选择器选择某 1 个元素或者多个元素

在 HTML 中可用 class=””

语法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .pink {
      color: pink;
    }

    .sub-nav {
      font-size: 20px;
    }
  </style>
</head>

<body>
  <div class="pink sub-nav">粉色</div>

</body>

  1. id 选择器
1
2
3
#box {
    color: gold;
}

跟 class 类似

类选择器 id 选择器
语法：以 . 开头，后跟类名（如 .nav） 语法：以#开头，后跟 id 名（如 #header）
作用：选择 class 属性的一个或多个元素 作用：选择特定 id 属性的唯一元素
特点：可用使用多次 特点：统一页面中，id 值必须唯一（不能重复）
类似：身份证的名字，可用使用多次 类似：身份证的编号，唯一，只能用一次
场景：后期修改样式基本都是类选择器 场景：后期主要是配合 JavaScript 添加交互效果
  1. 通配符选择器
1
2
3
* {
    color: gold;
}

通配符选择器可用选择 HTML 中所有的标签，进行样式修改。

特殊情况下通过是佩服清除所有元素的默认边距和填充，统一不同浏览器的默认样式。

1
2
3
4
5
6
7
8
9
* {
   /* 清除所有元素的外边框 */
    margin: 0;
    /* 清除所有元素的内边框 */
    padding: 0;
    /* 让块级的盒子水平居中展示 */
    margin:0 auto;
    box-sizing: border-box;
}

2.3 关系选择器

关系选择器是通过位置关系来选择目标元素（标签），可以更精准选择某些元素。常见的有：

  1. 后代选择器(最重要）
1
2
3
.box p {
    color:pink;
}

说明：选择 div 标签里面的 p 元素，中间空格隔开；父级 div 作用是限定，子元素 p 修改样式。

选择某个元素的后代元素（不限层级，包括子元素、孙元素等）

  1. 子代选择器
1
2
3
.box>p {
    color:pink;
}

子代选择器只选择”亲儿子“

  1. 邻接兄弟选择器
1
2
3
h2+p {
    color:red;
}

选中紧跟在 h2 后面的第一个 p 元素

  1. 通用兄弟选择器
1
2
3
h2~p {
    color:blue;
}

选中紧跟在 h2 后面的所有 p 元素

2.4 分组选择器

是将不同的选择器组合在一起，使用逗号分隔，也称为并集选择器。

使用场景：多个元素具备相同样式

语法：

1
2
3
4
div,
span {
    color:pink;
}

2.5 伪类和伪元素选择器

选择元素的特定状态或结构位置，符号是冒号（：）

  1. 状态伪类：根据用户交互或状态变化选择。比如：鼠标经过链接、表单获得焦点等。

        1.1 链接伪类

        链接伪类用于根据链接的不同状态（如为访问、悬停、点击等）为其添加样式。从而提升用户体验和界面交互性。

    链接伪类 作用
    a:link 未访问链接的默认样式
    a:visited 已访问链接的样式
    a:hover 鼠标悬停在链接上时的反馈
    a:active 链接被点击时的瞬时状态（按下到松开）

        伪类顺序规划（LVHA 顺序）—>a:link->a:visited->a:hover->a:active

1
2
3
4
5
6
7
8
9
10
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>fifth</title>
  <link rel="stylesheet" href="./fifth.css">
</head>

<body>
  <a href="https://www.doubao.com" target="_blank">豆包一下</a>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
a:link {
  color: #000;
}

a:visited {
  color: antiquewhite;
}

a:hover {
  color: red;
}

a:active {
  color: blue;
}        
   

  

        1.2 用户行为伪类

        用户以某种方式和文档交互的时候应用，这些用户行为伪类，又是叫做伪类

使用场景：

  • 鼠标经过元素的时候，修改样式。

  • 表单获得焦点的时候

动态伪类 作用
:hover 鼠标经过元素
:focus 获得焦点的元素（表单） 
1
2
3
.box:hover {
    color:pink;
}
  1. 结构伪类：根据元素的位置选择。比如：第 5 个第 10 个元素、选择前 3 个元素等。
结构伪类 作用
:first-child 一组兄弟元素中的第一个元素
:last-child 一组兄弟元素中的最后一个元素
:nth-child(n) 一组兄弟元素列表中第 n 个元素 
1
2
3
.ul li:first-child {
    color:red;
}

n 的取值可以是：

  • 数字。从 1 开始

  • 关键字。odd 奇数，even 偶数

  • 公式。:nth-child(3n) 3的倍数：第3 6 9…个元素

                  :nth-child(n+2) 第 2 个以及以后的元素

                   :nth-child(-n+3) 前面 3 个元素

注意：公式的 n 取值从 0 开始计算  

  1. 表单伪类：针对表单元素的状态，比如：表单禁用、选中复选框等。
表单伪类 作用
:disabled 表单禁用
:checked 选中状态，单选复选按钮 
1
2
3
4
button:disabled{
    /* 透明度，嚷着按钮透明 0-1 */
    opacity:.4;
}
  1. 伪元素选择器：选中元素的特定部分（使用双冒号::）

使用场景：

  1. 让表单里面的 placeholder 文字便颜色

  2. 做更多的修饰效果

伪元素选择器 作用
::first-line 选择首行
::first-letter 首字母
::placeholder 选择 input 或者 textarea 占位符
::before 元素内插入伪元素，作为第一个元素
::after 元素内插入伪元素，作为最后一个元素 
1
2
3
4
5
6
7
8
div::before {
    content:"开始";
    color:red;
} 
div::after {
    content:"结束";
    color:red;
}

注意：

  • before 和 after 是插入伪元素，特性类似内联元素

  • content 属性是必须的，没有内容空引号即可

  • 后期非常常用，比如小图标、各种装饰效果等

  1. 属性选择器：根据元素的属性特征来精准定位元素，从而实现更灵活的样式控制

使用场景：

  1. 表单样式控制

  2. 图标字体控制

  3. 图表化语言适配等

属性选择器 作用
[属性] 匹配包含指定属性的元素
[属性=值] 匹配属性值等于指定值的元素
[属性^=值] 匹配属性值以指定字符串开头的元素
[属性$=值] 匹配属性值以指定字符串结尾的元素
[属性*=值] 匹配属性值任意位置包含指定子串的元素 
1
2
3
a[class] {
  color: red;
}
1
<a href="#" class="shux">属性</a>

3. CSS 文本样式

CSS 文本样式用于控制网页中文字的外观。包括字体、颜色、对齐、间距等，主要分为两大类：

  1. 字体样式：比如使用哪种字体，字体大小、字体粗体、斜体等等

  2. 文本布局：比如文本对齐、行高、字间距、首行缩进等等

注意：文字无法直接通过 CSS 来更改样式，必须要用适合的标签来包裹它们，本质是修改标签样式，里面的文字跟随样式变化。

3.1 字体样式

字体样式 说明
color 设置字体颜色
font-family 字体族
font-size 字体大小
font-style 字体风格
font-weigh 字体粗体
text-decoration 字体装饰

3.1.1 color-字体颜色

  1. 关键字

这些颜色通常不会在生产环境的网站中使用，主要学习使用。
比如：red、green、blue、pink等。
例如：p { color: pink;}

  1. 十六进制

这个是开发最常用的。实际开发中，我们从设计稿直接复制即可。

比如：红色 #FF0000 或者 #F00

例如：p { color: #f00; }

  1. rgb格式

rgb() 函数接受三个参数，分别表示颜色的红、绿和蓝。 也是设计稿复制的

比如：红色 rgb(255,0,0)

例如：p { color: rgb(255,0,0) }

另有：rgba(255,0,0, 0.3) 文字透明，最后一个数值取值 0~1。

0完全透明 1 完全不透明

3.1.2 font-family 字体族

给定一个有先后顺序的，有字体名或者字体族名组成的列表来为选定的元素设置字体。

1
body {font-family:Arial,Helvetica,sans-serif;}

属性值用逗号隔开。浏览器会选择列表中第一个该计算机上有安装的字体。网页建议开发使用无衬线字体。

3.1.3 font-size 字体大小

font-size 可以设置字体大小：像素 px

CSS 像素（CSS Pixel） 是 CSS 中用于定义长度、尺寸的单位（简写为 px）绝对单位

不同浏览器默认字体大小不一样，谷歌默认16px，建议给 body 标签统一指定大小，做到浏览器统一

1
2
3
body {
    font-size:16px;
}

3.1.4 font-style 字体风格

font-style 用来打开和关闭文本 italic (斜体) 。
属性值：

  • normal: 将文本设置为普通字体 (将存在的斜体关闭)

  • italic: 如果当前字体的斜体版本可用，那么文本设置为斜体版本

最常见：让 em 或 i 标签取消默认倾斜

3.1.5 font-weight 字体粗体

font-weight 设置文字的粗体大小

使用场景：

  1. 很多标题是不要加粗的，此时可以用 CSS 取消加粗。

  2. 部分大批量文字可以利用CSS加粗。

属性值：

  • normal: 正常粗细

  • bold: 加粗

其他值受属性影响基本不用。

数字属性值：（常用）

  • 400: 正常粗细

  • 700: 加粗

取值范围100~900 之间，常用就是400和700

3.1.6 text-decoration 字体装饰

设置 / 取消字体上的文本装饰。

使用场景：

  1. 最常见设置链接下划线，比如取消下划线等

  2. 特殊情况添加删除线

属性值：

  • none：取消文本装饰

  • underline：下划线

  • overline：上划线

  • line-through：穿过文本的线

3.2 文本布局

字体样式 说明
text-align 文本对齐
text-indent 首行缩进
letter-spacing 文本字符间距
line-height 行高

3.2.1 text-align 文本对齐

控制文本在它所在的块级盒子内如何水平对齐

适用场景：

  1. 文本/图片在盒子水平对齐。

  2. 文章文字两端对齐

属性值：

  • left：文本左对齐（默认）

  • right：文本右对齐

  • center：文本对平居中对齐

  • justify：自动改变字间距，两端对齐

3.2.2 text-indent 文本缩进

设置块级元素中文本行前面空格（缩进）的长度

适用场景：

  1. 段落首行缩进2个字的效果。

  2. logo隐藏文字效果（在笔记后面）。

属性值：数字：常见单位是em，相对单位，本元素的文字大小；1em 等于当前元素的字体大小，如果当前元素没有大小，则按照父元素文字大小。与 px 一样，1 em = 16 px

3.2.3 letter-spacing 字间距

用于设置文本字符的间距

使用场景：调整字与字之间距离，用户体验更好

属性值：数字，单位 px

3.2.4 line-height 行高

设置文本每行之间的高

使用场景：

  1. 设置多行文本之间的上下间距

  2. 让单行文本垂直居中

属性值：

  • 数字 px

  • 数字不带单位（当前字体大小的倍数）1.5 = 16 * 1.5 px

4. font 简写

font 简写属性在一个声明中设置多个字体属性

使用场景：给整个页面设置相关字体样式

语法：

1
font:font-style font-weight font-size/line-height font-family

有严格的书写顺序，其中 font-size 和 font-family 是必须写的，其他可以省略，默认显示

5. CSS 继承性

子元素自动继承父元素的某些 CSS 样式属性

  • 主要继承跟文字相关的样式属性，比如字体、颜色、文本对齐等

  • 但是子元素定义自己的样式，会优先自己的样式

  • 能继承大部分与文字相关的

6. CSS 优先级

优先级由选择器的权重决定，权重高的规则覆盖权重低的规则。浏览器通过优先级来判断哪些属性值与一个元素最为相关。优先级是基于不同种类选择器组成的匹配规则。
原则：

  1. 优先级相等的时候，CSS 中最后的那个声明的样式将会被应用到元素上。（层叠遵循就近原则）
  2. 其余判断那个选择器权重高，优先执行那个样式。
  3. 权重是4位一组，是分开的层级，不能进位。
选择器类型 示例 权重值 优先级说明
!important color:red !important 无限大 强制覆盖所有规则（慎用）
内联样式 div style=”color:red” (1,0,0,0) 行内样式权重最高(1，0，0，0)
ID 选择器 #myid (0,1,0,0) 每个 ID 增加 0,1,0,0
类 / 属性 / 伪类 .class, [type=”text”] (0, 0, 1, 0) 每个类/属性/伪类增加 0,0,1,0
类型（标签）/伪元素 div, ::after (0, 0, 0, 1) 每个标签/伪元素增加 0,0,0,1
通配符/继承 *, 继承的样式 (0, 0, 0, 0) 通配符和继承权重最低

7. 盒子模型

所有的元素都被一个个的“盒子”包围着，在 CSS 中，一般分为区块盒子和行内盒子。

区块盒子（block）：

  1. 盒子会产生换行

  2. width 和 height 属性可以发挥作用

  3. 不设置宽度则默认是父元素空间的 100%

  4. 内边距、外边距和边框会撑大元素

  5. 常见的比如：div、p、h、ul、table等

行内盒子（inline）：

  1. 盒子不会产生换行

  2. width 和 height 属性将不起作用

  3. 垂直方向的内边距、外边距不起效果

  4. 水平方向的内边距、外边距会有效果

  5. 常见的比如：span、em、a、strong等

7.1 盒子模型组成

CSS 盒子模型整体上适用于区块盒子，包含盒子内容、内边距、外边距、边框四部分

  1. 盒子内容：显示内容的区域，由内容或者指定宽度高度来决定内容大小

  2. 内边距 padding：内容距离边框之间的距离

  3. 边框 border：边框盒子包住内容和内边距

  4. 外边距 margin：更改盒子与其他元素值阿金的距离

7.1.1 边框

属性值：

border：边框粗细 边框样式 边框颜色；

  • 边框有三部分属性值组成，之间必须空格隔开

  • 三部分属性值没有先后顺序

边框样式 描述 视觉效果
dotted 点状边框 圆点组成的虚线
dashed 虚线边框 短横线组成的虚线
solid 实线边框 单一线条

若遇到需设置四个边框不同样式的情况，可根据方位名词：top、bottom、left、right

  1. border-top：1px solid pink；

  2. border-botton：1px solid pink；

  3. border-left：1px solid pink；

  4. border-right：1px solid pink；

圆角边框：border-radius：数字或百分比

1
2
3
.button {
    border-radius: 10px;
}

实现：

  • 胶囊圆角：长方形设置圆角为宽度的一半；

  • 圆形：正方形设置圆角为高度一半或者50%

若需对四个角分别设置样式，可：

圆角写法 作用
border-radius：10px;
border-radius:10px 20px; 左上 右下是10px；右上 左下是20px
border-radius:10px 20px 30px; 左上是10px；右上左下是20px；右下30px
border-radius:10px 20px 30px 40px; 左上10px；右下20px；右下30px；左下40px

border-radius：顺时针记忆（左上角 右上角 右下角 左下角）

7.1.2 内边距

内边距（padding）多个值用空格隔开，顺时针记忆

内边距写法 作用
padding:10px; 上下左右 4 个内边距都是 10px
padding：10px 20px; 上下内边距是10px，左右内边距是20px
padding:10px 20px 30px; 上是10px，左右是20px，下是30px
padding:10px 20px 30px 40px; 上10px，右20px，下30px，左40px

单边设置：根据方位名词：top、bottom、left、right（与边框设置一样）

7.1.3 外边距

外边距是盒子周围一圈看不到的空间，它会把其他元素推离盒子。

外边距写法 作用
margin:10px; 上下左右 4 个外边距都是 10px
margin:10px 20px 30px 40px; 上下外边距是10px，左右外边距是20px
margin:10px 20px 30px 40px; 上是10px，左右是20px，下是30px
margin:10px 20px 30px 40px; 上10px，右20px，下30px，左40px

单边设置：根据方位名词：top、bottom、left、right（与边框设置一样）

注意：

  1. 行内元素左右外边距生效，上下外边距无效

  2. 行内元素设置宽度和高度也无效

区块元素可以利用 margin 实现水平居中

  • 块级盒子必须有宽度

  • 只需要设置左右外边距为 auto 即可

外边距塌陷：区块元素上下外边距会出现塌陷情况：

  1. 嵌套关系（父子）的区块元素

  2. 给子盒子设置上下外边距会让父盒子塌陷移动

解决方案：

  1. 给父盒子添加上边框。（父盒子本身有边框则不会出现问题）

  2. 给父盒子添加上内边距。（同理）

  3. 给父盒子添加：overflow:hidden;（同理）

7.2 盒子模型-尺寸计算

在 CSS 盒子模型的默认定义里，除了宽度和高度增加盒子大小之外，padding 和 border 都会让盒子变大。

例如：

解决方法：box-sizing 用于定义元素的盒子模型计算方式，控制元素的 width 和 height 是否包含 padding 和 border

语法：box-sizing:属性值; 如：box-sizing:border-box;

属性值 描述
content-box 默认值。元素的 width 和 height 仅包含内容区域，不包含 padding 和 border。
理解：width = 内容的宽度
border-box 元素的 width 和 height 包含内容、padding 和 border。
理解：width = border + padding + 内容的宽度

7.3 盒子背景

用于设置元素背景相关属性，包括背景颜色、背景图片、背景位置、背景重复方式等

属性 作用 常用值 示例代码
background-color 设置元素背景颜色 颜色名称、十六进制、RGB、透明度 background-color:#f0f0f0;
background-image 设置背景图片 url（image.jpg） background-image:url(bg.png);
background-repeat 控制背景图片是否重复 repeat(默认)、no-repeat、repeat-x、repeat-y background-repeat:no-repeat;
background-position 定位背景图片位置 x y（如center top，或者px、%单位） background-position:center;
background-size 调整背景图片尺寸 默认 auto、cover（覆盖）、contain（包含）或者跟 px、% background-size:cover;
background-attachment 背景是否随页面滚动 scroll（默认）、fixed（固定，针对于当前视口） background-attachment:fixed;

背景复合写法：

background:颜色 图片 重复 固定 位置/尺寸;（与顺序无关）

7.4 背景渐变

在 CSS 中，可以通过 linear-gradient（线性渐变）和 radial-gradient（径向渐变）为元素添加渐变背景

属性 / 方法 描述 示例代码
linear-gradient(方向，颜色1 位置，颜色2 位置…) 线性渐变（方向可控） background：linear-gradient(to right，#ff6b6b,#4ecdc4)
background-image：linear-gradient(90deg，#ff6b6b 30%,#4ecdc4 70%)
radial-gradient(形状，颜色1，颜色2…) 径向渐变（形状和位置可控） radial-gradient（circle,#ff9a9e,#fad0c4)

线性渐变：

  1. 方向。可以是方位名词，也可以是 deg（角度）

  2. 位置。色标的位置，可选填。

文字背景线性渐变：

background:linear-gradient(to right,pink,red); 设置背景渐变

-webkit-background-clip:text; 兼容性写法，照顾谷歌老版本浏览器 -webkit-

background-clip:text; 文字范围裁剪背景

-webkit-text-fill-color:transparent; 文本填充颜色设置为透明

7.5 盒子阴影

CSS box-shadow 属性用于在元素的框架上添加阴影效果，盒子添加阴影，效果更立体，鼠标经过元素显示阴影，更加突出元素。

语法：

box-shadow:X轴偏移量 Y轴偏移量 模糊半径 扩散半径 颜色;

  1. 多个属性用空格隔开

  2. X轴偏移量和Y轴偏移量是必须要写的，奇语可省略采取默认值

  3. 默认是外阴影，如果改为内阴影要写 inset

1
2
3
.nav li {
    box-shadow:0 15px 30px rgba(0,0,0,.1)
}

7.6 过渡

过渡效果用于在元素的属性值发生变化时，平滑地过渡（而不是瞬间切换）

使用场景：

  1. 鼠标经过图片放大

  2. 表单获得焦点，输入框变宽

语法：

transition：过度属性 过渡时间

  1. 属性值中间空格隔开

  2. 过渡属性如果都要变化可以写 all

  3. 过渡时间单位是秒s，比如0.2s等

注意：过渡写到盒子上，谁做过渡给谁加

7.7 样式初始化

浏览器对 HTML 元素有默认样式（如 margin、padding、font-size）。

初始化的核心目的：

  1. 统一浏览器默认样式，消除差异

  2. 减少后续开发中的冗余代码

  3. 提高代码可维护性

7.8 单行文本溢出显示省略号

1
2
3
4
5
6
/* 溢出隐藏 */
overflow:hidden;
/* 文本溢出显示省略号 */
text-overflow:ellipsis;
/* 强制文字一行显示，不换行 */
white-space:nowrap;

7.9 多行文字溢出显示省略号

1
2
3
4
5
6
7
8
9
10
/* 旧版弹性盒子布局 */
display:-webkit-box;
/* 文本垂直排列 */
-webkit-box-orient:vertical;
/* 限制显示行数 */
-webkit-line-clamp:3;
/* 隐藏溢出内容 */
overflow:hidden;
/* 文本溢出显示省略号 */
text-overflow:ellipsis;

注意：盒子的高度需要与限制显示文本的高度一致才能正确显示省略号

8. 字体图标

字体图标是一种以字体形式嵌入网页的技术，允许开发者像使用文字一样通过 CSS 控制图标的样式（如颜色、大小、阴影等）

字体图标要么设计师提供，要么去字体库下载

图标库 特点 官网链接
Font Awesome 图标最全，支持免费版和 pro 付费版 fontawesome.com
Bootstrap Icons Bootstrap 生态内图标，简单易用 icons.getbootstrap.com
icomoon IcoMoon 最早推出了第一个自定义图标字体生成器 icomoon.io
iconfont 阿里字体库，包含淘宝图标库和阿里妈妈图标库（免费） http://www.iconfont.border/

使用步骤：

  1. 下载字体图标文件：去官网或者设计师准备字体图标文件，保存到项目目录下。

  2. 引入html文件中：根据提供的压缩包，引入CSS文件（link方式）

  3. 使用字体图标：一般情况下，我们通过标签调用类名选择对应字体图标。根据实际需求，调整字体样式，比如颜色、大小、位置等

9. 精灵图

CSS 精灵图（CSS Sprites）是将多个小图标或图像合并到一张大图中，通过调整 background-position 属性来显示特定部分的图像技术。

优势：

  1. 减少 HTTP 请求：多个小图标合并为一张图片，只需一次请求。

  2. 提升性能：减少网络开销，尤其适合移动端或低带宽场景。

  3. 统一管理：方便维护图标集，避免文件分散。

使用场景：

  1. 导航菜单图标

  2. 按钮操作图标

  3. 复杂彩色小图标更适合精灵图

注意：通过合理使用 CSS 精灵图，可以有效优化网页性能。对于复杂场景（如高清屏适配），建议结合 SVG 或字体图标使用。

原理：

  1. 给盒子添加背景图片

  2. 通过背景定位（background-position）移动位置对齐

  3. 注意网页坐标不同。

10. CSS布局

CSS 布局是网页设计的核心技术之一，用于控制元素在页面中的排列方式

  1. normal：正常布局

  2. display：模式转换布局

  3. flexbox：弹性布局（单行）

  4. grid：网格布局（多行）

  5. position：定位布局

  6. column：多列布局

10.1 display 转换

display 属性允许我们更改默认的显示方式

  1. display:block; 转换为区块元素（常用）

  2. display:inline; 转换为行内元素（罕见）

  3. display:inline-block; 转换为行内块元素（较少）

10.2 浮动(被放弃的布局方式)

浮动（float）可以让元素脱离文档流，向左或享有浮动，直到碰到父容器边缘或其他浮动元素

属性值 作用 示例
left 左侧浮动 float:left;
right 右侧浮动 float:right;
none 默认值，不浮动 float:none;

浮动带来的影响：

  1. 父盒子没有高度。（很多情况下不能给父亲指定高度）

  2. 子元素浮动。

  3. 影响其他盒子布局。

解决：清除浮动，也可理解为闭合浮动，就是让浮动的元素尽量控制在父盒子内，不要影响其他盒子。

清除浮动主要有四种方式：

  1. 额外标签法：在浮动元素的最后面，新增一个块级标签。添加属性：clear:both;

  2. 单伪元素清除浮动：父元素添加伪元素。

  3. 双伪元素清除浮动：父元素添加双伪元素。

  4. overflow 清除浮动：父元素添加 overflow:hidden;。

10.3 弹性盒子（主流）

Flexbox 是 CSS 弹性盒子布局模块（Flexible Box Layout Module）的缩写，可以快速实现元素的对齐、分布和空间分配。

弹性盒子核心：

  1. 父控子（亲父子）

    • 父盒子控制子盒子如何排列布局

    • 父盒子称为容器，子盒子成为项目

  2. 主轴和交叉轴（侧轴）

    • 主轴默认水平方向，交叉轴默认垂直方向（可以更改）

容器（父盒子）属性：

属性 作用 示例
display 定义元素为 Flex 容器 .container{display:flex;}
flex-direction 定义主轴方向（项目排列方向） .container{flex-direction:row;}
flex-wrap 控制是否换行 .container{flex-wrap:wrap;}
justify-content 定义主轴上的对齐方式（整体分布） .container{justify-content:center;}
align-items 定义交叉轴上的对齐方式（单行时整体对齐 .container{align-items:center;}
align-content 定义多行是交叉轴上的对齐方式（仅当 flex-wrap:wrap 且内容换行时生效） .container{align-content:space-between;}

项目（子盒子）属性：

属性 作用 示例
order 定义项目的排列顺序（默认0，数值越小越靠前） .item{order:-1;}
flex-grow 定义项目的放大比例（默认0，即不放大） .item{flex-grow:1;}
flex-shrink 定义项目的缩小比例（默认1，空间不足时等比缩小） {flex-shrink:0;}
flex-basis 定义项目在主轴方向上的初始大小（优先级高于 width / height） .item{flex-basis:200px;}
flex flex-grow flex-shrink flex-basis 的简写 .item{flex:1;}
align-self 覆盖容器的 align-items，单独定义某个项目的交叉轴对齐方式 .item{align-self:center;}

容器（父盒子）设置 display:flex; 可以让子盒子按照主轴方式排列

  • 如果子元素有大小，则按照给定大小来显示。

  • 如果子元素没有大小，则拉伸充满父容器。

  • 若子元素总宽度超过容器宽度，默认会压缩子元素。

大部分情况下，父容器设置 display:flex，子元素设定大小

10.3.1 justify-content 定义主轴上的对齐方式

属性值 效果 示例
flex-start 左对齐（默认） 子元素靠左排列
flex-end 右对齐 子元素靠右排列
center 居中对齐 子元素居中
space-between 两端对齐 首个子元素放置于七点，末尾元素放置于终点
space-around 项目两端间隔相等 每个子元素周围分配相同的空间
space-evenly 项目间隔均匀分布 每个子元素之间的间隔相等

10.3.2 align-items 定义交叉轴上的对齐方式（单行时整体对齐）

属性值 作用描述
flex-start 项目在交叉轴起点对齐（默认）
flex-end 项目在交叉轴终点对齐
center 项目在交叉轴居中对齐
stretch 项目拉伸填充整个容器高度（需子项目无固定高度）

10.3.3 flex-direction定义主轴方向（改变主轴方向）

属性值 描述 示例效果 代码示例
row 默认值。子元素沿水平主轴（从左到右）排列 A B C（横向排列） .container{flex-direction:row;}
row-reverse 子元素沿水平主轴反向排列（从右到左） C B A（反向横向排列） .container{flex-direction:reverse;}
column 子元素沿垂直主轴（从上到下）排列 A
B
C（纵向排列）		 .container{flex-direction:column;}
column-reverse 子元素沿垂直主轴反向排列（从下到上） C
B
A（反向纵向排列）		 .container{flex-direction:column-reverse;}

注意：行内元素设置了 flex ，可以直接设置宽高

10.3.4 flex-wrap 控制是否换行

属性值 排列效果
nowrap 不换行，全部横向排列，可能被压缩
wrap 换行
wrap-reverse 换行翻转（了解即可）

10.3.5 align-content 定义多行时交叉轴上的对齐方式（仅当 flex-wrap:wrap 且内容换行时生效）

属性值 效果 示例
flex-start 上对齐 子元素靠上排列
flex-end 下对齐 子元素靠下排列
center 居中对齐 子元素居中
space-between 两端对齐 首个子元素放置于七点，末尾元素放置于终点
space-around 项目两端间隔相等 每个子元素周围分配相同的空间
space-evenly 项目间隔均匀分布 每个子元素之间的间隔相等

开发中大部分情况下，该属性使用较少，大部分元素顺序排列即可

10.3.6 项目（子盒子）属性

子元素的属性用于控制自身的尺寸、顺序或对齐方式。

语法：

flex:1; 剩余空间占 1 份，并且可以伸缩盒子大小，数字表示剩余空间所占份数（正整数）

gap 间距

gap 简写属性用于设置行与列之间的间隙（间距）

使用场景：让子元素之间保留间隙

语法：

gap:20px; 行与列之间保持 20 像素间隙

gap:20px 30px; 行间距是 20 像素，列间距是 30 像素

注意：gap 是写到父元素（容器）上

10.3.7 垂直对齐-解决图片底部空白缝隙的问题

基线：浏览器行内元素（行内块元素）排版中存在用于对齐的基线（baseline）

解决方案：

  1. 把图片转换为块级元素

  2. 设置图片对齐方式不是基线对齐即可

属性值 效果
baseline 默认，基线对齐
top 顶部对齐
middle 中部对齐
bottom 底部对齐

vertical-align:middle; 文字和图片垂直居中

11. 定位布局

CSS 定位布局（position）是控制元素在页面中位置的核心技术之一。通过定位，可以实现元素脱离文档流、层叠、固定在特定位置布局效果（定位跟位置有关）。

场景：

  1. 固定导航栏。页面滚动时当行蓝适中固定在视口顶部。

  2. 吸顶效果。元素在滚动到某个位置后固定。

  3. 弹出菜单/下拉框。鼠标悬停时显示浮动菜单。

  4. 悬浮效果。元素悬浮在其他元素上方。

  5. ……

定位分类：

  1. 相对定位

  2. 绝对定位

  3. 固定定位

  4. 粘性定位

11.1 相对定位

CSS 相对定位（position:relative）核心在于元素相对于自身正常位置进行偏移，和绝对得搭配使用。

语法：

position:relative; 设定元素为相对定位

  1. 相对于自身原来位置移动距离

  2. 不脱离正常流，元素原位置仍被保留，其他元素按原布局排列

  3. 可以通过top、botton、left、right属性进行偏移

  4. 优先级：若同时设置 top 和 botton 仅 top 生效；同理 left 覆盖 right

11.2 绝对定位

CSS 绝对定位（position:absolute）核心是脱离正常流并基于得基准进行偏移。

场景：

  1. 弹出菜单 / 下拉框。鼠标悬停时显示浮动菜单。

  2. 悬浮效果。元素悬浮在其他元素上方。

语法：

position:absolute; 设定元素为绝对定位

  1. 元素脱离正常流，不占据空间，其他元素按原布局排列

  2. 相对于最近的已定位祖先元素移动位置。若都无定位则相对于视口来定位

  3. 可以通过top、botton、left、right属性进行偏移

  4. 优先级：若同时设置 top 和 botton 仅 top 生效；同理 left 覆盖 right

定位 - 子绝父相

定位最常用的布局技巧：子绝父相

场景：

  1. 弹出菜单 / 下拉框。鼠标悬停时显示浮动菜单。

  2. 悬浮效果。元素悬浮在其他元素上方。

为什么是子绝父相？

  1. 子元素可以悬浮其他元素上方，就不能占有位置，影响其他元素布局，所以绝对定位

  2. 但是子元素不能随便乱跑，要配合父元素移动位置，此时父元素需要加定位

  3. 父元素需要占原来的位置，不能影响其他元素布局，此时相对定位最合适

11.3 固定定位

CSS 固定定位（position:fixed）是一种将元素脱离文档流并始终相对于浏览器视口定位的布局技术

场景：

  1. 固定导航栏。页面滚动时导航栏适中固定在视口顶部

  2. 页面广告。广告覆盖整个页面

语法：

position:fixed; 设定元素为固定定位

  1. 元素脱离正常流，不占据空间，其他元素按原布局排列

  2. 始终相对于浏览器窗口（视口）定位，滚动页面时位置不变

  3. 可以通过top、botton、left、right属性进行偏移

  4. 优先级：若同时设置 top 和 botton 仅 top 生效；同理 left 覆盖 right

11.4 粘性定位

CSS 粘性定位（position:sticky）是一种混合定位模式，结合了相对定位（relative）和固定定位（fixed）的特性。

场景：

  1. 吸顶效果。元素在滚动到某个位置后固定

  2. 表格表头固定。长表格滚动时表头始终可见

语法：

position:sticky; 设定元素为粘性定位

  1. 元素在滚动到指定位置（如top:10px）前为相对定位，之后转为固定定位

  2. 父容器的 overflow 需为 visible，否则粘性定位失效

  3. 可以通过top、botton、left、right属性进行偏移

  4. 需指定 top、botton、left、right 中的其中之一，才能使粘性定位生效

11.5 层叠顺序

z-index 属性用于控制元素在三维空间中的层叠顺序（即 z 轴方向）。当多个元素在同一个平面（如同一行或列）重叠时，z-index 决定哪个元素显示在最上层。

语法：

z-index:数值; 设定层级

  1. 值类型：整数（正数、负数、零）或 auto 。数值越大，层级越高。

  2. 默认值：aoto（等同于未设置，后出现的元素覆盖前者）。

  3. 生效条件：仅对定位元素（position 值为 relative、absolute、fixed或sticky）有效。

12. 网格布局

网格布局是一种二维布局模型，允许开发者通过定义行（rows）和列（columns）来精准控制网页元素的位置和尺寸。还可以实现响应式设计。

实际开发中：

  1. flexbox：适合快速实现一维布局，动态内容对齐。比如单行布局。

  2. gird：适合构建复杂页面框架，提供更强大的二维控制能力。比如多列或者响应式等。

容器（父盒子）设置 display:girid;（块级）或者 display:inline-grid（行内），display:grid 的声明只创建了一个只有一列的网格。

绘制网格：（网格轨道）

grid-template-columns 定义网格中的列

grid-template-rows 定义网格中的行

属性值：

有几个属性值代表创建几列 / 行

长度单位 比如 100px

12.1 对齐方式

justify-content 是控制列轨道（Column Tracks）在容器内水平分布

align-content 是控制行轨道（Row Tracks）在容器内水平分布

属性值 水平方向效果 垂直方向效果
start（默认值） 左对齐 顶部对齐
end 右对齐 底部对齐
center 水平居中对齐 垂直居中对齐
space-around 两侧留出相等的空白，项目周围空间均匀分布 上下留出相等的空白，项目周围空间均匀分布
space-between 首尾项目贴边 上下项目贴边
space-evenly 项目间、首尾与边界的空白相等 项目间、首尾与边界的空白相等
属性值 说明 应用场景
固定长度 使用px、em 等固定单位定义列宽 需要精确列宽的固定布局
百分比 按容器宽度百分比分配列宽 响应式布局中按比例分列
fr 单位 分配轨道剩余空间的比例（1 fr 表示一份总和为容器剩余空间）fr 时 fraction 缩写，意思是分数 需要自适应比例分配的布局
auto 列宽由内容自动撑开 内容宽度不确定是的灵活布局
repeat() 函数 简化重复的列定义 多列等宽布局
minmax() 函数 定义列宽的最小值和最大值 响应式布局中限制列宽范围

12.2 网格间距

gap 简写属性用于设置行与列之间的间隙（网格间距）

语法：

  1. gap:20px; 行和列直接按保持 20 像素间隙

  2. gap:20px 30px; 行间距是 20 像素，列间距是 30 像素

注意：gap 是简写形式也可以分开写

column-gap:30px;

row-gap:20px;

12.3 repeat() 函数

语法：

repeat（次数，轨道尺寸）或repeat（自动填充，轨道尺寸）

自动填充：适用于响应式布局中“列数随容器宽度变化”的场景

auto-fill：尽可能多地创建列

auto-fit：尽可能拉伸列填满容器（会合并空白，列宽不小于 minmax 的最小值）

区别：当容器空间远远大于所有子元素大小

  1. auto-fill 留有空白空间

  2. auto-fit 会拉伸盒子占满父容器空间

12.4 网格线

如何实现元素跨越多个网格单元？

  1. 跨列：grid-column:开始线编号 / 结束线编号 或 开始线编号 / span 跨单元格数量

  2. 跨行：grid-row:开始线编号 / 结束线编号 或 开始线编号 / span 跨单元格数量

12.5 网格填充方式

grid-auto-flow 决定网格容器中子元素排列填充方式

语法：

  1. grid-auto-flow:row; （默认）：子元素按先行后列顺序填充，优先填满一行后换行

  2. grid-auto-flow:column; 子元素按先列后行顺序填充，优先填满一列后换行

12.6 object-fit

object-fit 是 CSS 中用于控制替换元素内容如何适应其容器尺寸的属性

值 描述
fill 默认值，拉伸内容以完全填充容器，不保持宽高比，可能导致内容变形
contain 保持内容固有宽高比，缩放至完全适应容器内部（内容全部可见），容器可能有空白
cover 保持内容固有宽高比，缩放至覆盖容器内部（内容可能部分被裁剪），容器无空白

配合：object-position:object-position 控制内容在容器内的对齐位置（如 center 居中、top left 左上角），常与objectfit 搭配使用（例如 cover 时调整裁剪区域）

12.7 项目对齐方式

在 CSS Grid 布局中，控制元素在网格内的对齐方式

语法：

  1. justify-items：水平对齐方式；

  2. align-items：垂直对齐方式；

  3. place-items：水平 + 垂直方式

属性值 水平方向效果 垂直方向效果 代码示例
start 对齐单元格起始边缘（左对齐） 对齐单元格起始边缘（顶部对齐） .container(justify-items:start;)
end 对齐单元格结束边缘（右对齐 对齐单元格结束边缘（底部对齐） .container(justify-items:end;)
center 水平居中对齐 垂直居中对齐 .container(justify-items:center;)
stretch 拉伸填满单元格宽度（默认值） 拉伸填满单元格宽度（默认值） .container(justify-items:stretch;)

12. 多列布局

多列布局用于将元素的内容自动分割为指定数量的垂直列

场景：

  1. 长文章分栏。文章自动分列，中间有间隙，也可以做响应式

  2. 图片瀑布流

属性 作用 示例值
column-count 根据容器宽度和 column-count 值，自动分配列宽 column-count:3;分为3 列
column-gap 列之间的间距 30px、normal（默认1em）
column-rule 列间的分割线样式（颜色、宽度、样式） column-rule:1px solid #ccc

break-inside:avoid-column; 强制元素不跨列分割（默认 auto，允许跨列），给子元素添加。

14. 鼠标样式

在 CSS 中，cursor 属性用于控制鼠标指针在元素上的显示样式，通过改变光标形态可以向用户传递交互提示（如：”可点击“ ”不可选中“等），从而提升界面交互体验。

值 描述
default 默认箭头（通常是系统默认的箭头光标）
pointer 手型（指尖朝下的小手），常用于可点击元素（如链接 a、按钮 button）
text
wait 等待（旋转圆圈或沙漏），表示操作进行中
help 帮助（带问号的箭头），提示用户需要帮助
not-allowed 禁止（圆圈带斜线），表示操作不可用
grab 抓取（手型带抓取动作），表示可拖动
grabbing 抓取中（手型抓紧），表示正在拖动
zoom-in 放大（+号），表示放大操作
zoom-out 缩小（-号），表示缩小动作

15. 2D变换

Icon
致谢名单
本作品由 Lanpangzi 于 2026-01-20 14:19:25 发布
作品地址：python-CSS
除特别声明外，本站作品均采用 CC BY-NC-SA 4.0 许可协议，转载请注明来自 Lanpangzi's Blog
Logo