【前端】CSS-flexbox弹性盒模型布局

news2024/11/14 20:03:05

目录

  • 一、前言
  • 二、flexbox简介
  • 三、属性
    • 1、容器属性
    • 2、容器成员属性
  • 四、容器属性的作用
    • 1、flex-direction
      • ①、定义
      • ②、语句
        • 1）、属性值
      • ③、代码示例
        • 1）、flex-direction: row
        • 2）、flex-direction: row-reverse
        • 3）、flex-direction: column
        • 4）、flex-direction: column-reverse
    • 2、flex-wrap
      • ①、定义
      • ②、语句
        • 1）、属性值
      • ③、代码示例
        • 1）、flex-wrap：nowrap
        • 2）、flex-wrap：wrap
        • 3）、flex-wrap：wrap-reverse
    • 3、flex-flow
      • ①、定义
      • ②、语句
      • ③、代码示例
    • 4、justify-content
      • ①、定义
      • ②、语句
        • 1）、属性值
      • ③、代码示例
        • 1）、justify-content
        • 2）、justify-content：flex-end
        • 3）、justify-content：center
        • 4）、justify-content：space-between
        • 5)、justify-content：space-around
    • 5、align-items
      • ①、定义
      • ②、语句
        • 1）、属性值
    • 6、align-content
      • ①、定义
      • ②、语句
        • 1）、属性值
  • 五、容器成员属性的作用
    • 1、order
      • ①、定义
      • ②、语句
      • ③、代码示例
    • 2、flex-grow
      • ①、定义
      • ②、语句
        • 1）、属性值
    • 3、flex-shrink
      • ①、定义
      • ②、语句
    • 4、flex-basis
      • ①、定义
      • ②、语句
    • 5、flex
      • ①、定义
      • ②、语句
        • 1)、属性值
    • 6、align-self
      • ①、定义
      • ②、语句
  • 六、弹性盒模型布局的应用场景
  • 七、弹性盒模型布局的优势
    • 1、简化布局
    • 2、响应式设计
    • 3、灵活性强
  • 八、总结
    • 1、实现原理
    • 2、布局工作步骤

一、前言

  CSS弹性盒子（Flexbox）是一种强大而灵活的布局模型，能够简化我们对网页布局的控制，并使页面在不同设备上的适应性更强。本文将介绍CSS弹性盒子的基本概念、属性和使用方法，帮助你更好地掌握弹性盒子布局。

二、flexbox简介

  CSS弹性盒子是一种用于网页布局的模型，旨在提供一种更简单、更灵活的方法来排列、对齐和分布元素。使用弹性盒子布局，我们可以轻松地调整和修改布局，适应不同设备和屏幕尺寸，实现自适应的网页布局。

三、属性

关于flex常用的属性，我们可以划分为容器属性和容器成员属性

1、容器属性

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

2、容器成员属性

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

四、容器属性的作用

1、flex-direction

①、定义

决定主轴的方向（即项目的排列方向）

②、语句

.container {
    flex-direction: row | row-reverse | column | column-reverse;
}

1）、属性值

  • row(默认值)：主轴为水平方向，起点在左端
  • row-reverse：主轴为水平方向，起点在右端
  • column：主轴为垂直方向，起点在上沿
  • column-reverse：主轴为垂直方向，起点在下沿

③、代码示例

1）、flex-direction: row

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

.container {
  display: flex;
  flex-direction: row;
}

.item {
  width: 100px;
  height: 100px;
  background-color: #f0f0f0;
  margin: 10px;
}

在这里插入图片描述

2）、flex-direction: row-reverse

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

.container {
  display: flex;
  flex-direction: row-reverse;
}

.item {
  width: 100px;
  height: 100px;
  background-color: #f0f0f0;
  margin: 10px;
}

在这里插入图片描述

3）、flex-direction: column

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

.container {
  display: flex;
  flex-direction: column;
}

.item {
  width: 100px;
  height: 100px;
  background-color: #f0f0f0;
  margin: 10px;
}

在这里插入图片描述

4）、flex-direction: column-reverse

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

.container {
  display: flex;
  flex-direction: column-reverse;
}

.item {
  width: 100px;
  height: 100px;
  background-color: #f0f0f0;
  margin: 10px;
}

在这里插入图片描述

2、flex-wrap

①、定义

弹性元素永远沿主轴排列，那么如果主轴排不下，通过flex-wrap决定容器内项目是否可换行

②、语句

.container {
    flex-wrap: nowrap | wrap | wrap-reverse;
}

1）、属性值

  • nowrap(默认值)：不换行
  • wrap：第一行在下方
  • wrap-reverse：换行，第一行在上方

默认情况是不换行，但这里也不会任由元素直接移除容器，会涉及到元素的弹性伸缩

③、代码示例

1）、flex-wrap：nowrap

<div class="content1">
   <div class="red">1</div>
   <div class="green">2</div>
   <div class="blue">3</div>
</div>

.content1 {
    color: #fff;
    font: 100 24px/100px sans-serif;
    height: 150px;
    width: 897px;
    text-align: center;
}

.content1 div {
     height: 50%;
     width: 300px;
}

.content1 {
    display: flex;
    flex-wrap: nowrap;
}

在这里插入图片描述

2）、flex-wrap：wrap

<div class="content">
   <div class="red">1</div>
   <div class="green">2</div>
   <div class="blue">3</div>
</div>

.content {
    color: #fff;
    font: 100 24px/100px sans-serif;
    height: 150px;
    width: 897px;
    text-align: center;
}

.content div {
     height: 50%;
     width: 300px;
}

.content {
    display: flex;
    flex-wrap: wrap;
}

在这里插入图片描述

3）、flex-wrap：wrap-reverse

<div class="content2">
   <div class="red">1</div>
   <div class="green">2</div>
   <div class="blue">3</div>
</div>

.content2 {
    color: #fff;
    font: 100 24px/100px sans-serif;
    height: 150px;
    width: 897px;
    text-align: center;
}

.content2 div {
     height: 50%;
     width: 300px;
}

.content2 {
    display: flex;
    flex-wrap: wrap-reverse;
}

在这里插入图片描述

3、flex-flow

①、定义

是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

②、语句

.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}

③、代码示例

element {
  flex-flow: column-reverse wrap;
}

4、justify-content

①、定义

定义了项目在主轴上的对齐方式

②、语句

.box {
    justify-content: flex-start | flex-end | center | space-between | space-around;
}

1）、属性值

  • flex-start（默认值）：左对齐
  • flex-end：右对齐
  • center：居中
  • spac-between：两端对齐，项目之间的间隔相等
  • space-around：两个项目两侧间隔相等

③、代码示例

1）、justify-content

    <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    .container {
       display: flex;
       justify-content: flex-start;
     }

     .item {
       width: 100px;
       height: 100px;
       background-color: #e18181;
       margin: 10px;
    }

在这里插入图片描述

2）、justify-content：flex-end

    <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    .container {
       display: flex;
       justify-content: flex-end;
     }

     .item {
       width: 100px;
       height: 100px;
       background-color: #e18181;
       margin: 10px;
    }

在这里插入图片描述

3）、justify-content：center

    <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    .container {
       display: flex;
       justify-content: center;
     }

     .item {
       width: 100px;
       height: 100px;
       background-color: #e18181;
       margin: 10px;
    }

在这里插入图片描述

4）、justify-content：space-between

    <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    .container {
      display: flex;
      justify-content: space-between;
    }

     .item {
       width: 100px;
       height: 100px;
       background-color: #e18181;
       margin: 10px;
    }

在这里插入图片描述

5)、justify-content：space-around

    <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    .container {
     display: flex;
     justify-content: space-around;
   }

     .item {
       width: 100px;
       height: 100px;
       background-color: #e18181;
       margin: 10px;
    }

在这里插入图片描述

5、align-items

①、定义

定义项目在交叉轴上如何对齐

②、语句

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

1）、属性值

  • flex-start：交叉轴的起点对齐
  • flex-end： 交叉轴的终点对齐
  • center：交叉轴的中点对齐
  • baseline：项目的第一行文字的基线对齐
  • stretch(默认值)：如果项目未设置高度或设置为auto，将沾满整个容器的高度

6、align-content

①、定义

定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

②、语句

.box {
    align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

1）、属性值

  • flex-start：与交叉轴的起点对齐
  • flex-end：与交叉轴的终点对齐
  • center：与交叉轴的中点对齐
  • space-between：与交叉轴两端对齐，轴线之间的间隔平均分布
  • space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
  • stretch（默认值）：轴线占满整个交叉轴

五、容器成员属性的作用

1、order

①、定义

定义项目的排列顺序。数值越小，排列越靠前，默认为0

②、语句

.item {
    order: <integer>;
}

③、代码示例

2、flex-grow

①、定义

  上面讲到当容器设为 flex-wrap: nowrap；不换行的时候，容器宽度不够分的情况，弹性元素会根据 flex-grow 来决定定义项目的放大比例（容器宽度 > 元素总宽度时如何伸展）。默认为0，即如果存在剩余空间，也不放大

②、语句

.item {
    flex-grow: <number>;
}

1）、属性值

  • 0(默认值)：如果存在剩余空间，也不放大
  • 如果所有项目的 flex-grow 属性都为1，则它们将等份剩余空间（如果有的话）
  • 如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍

注意：弹性容器的宽度正好等于元素宽度总和，无多余宽度，此时无论flex-grow是什么值都不会生效

3、flex-shrink

①、定义

定义了项目的缩小比例（容器宽度<元素总宽度时如何收缩），默认为1，即如果空间不足，该项目将缩小

②、语句

.item {
    flex-shrink: <number>; /* default 1 */
}

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小
如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小
在容器宽度有剩余时，flex-shrink也是不会生效的

4、flex-basis

①、定义

设置的是元素在主轴上的初始尺寸，所谓的初始尺寸就是元素在flex-grow和flex-shrink生效前的尺寸
浏览器根据这个属性，计算主轴是否有多余空间，默认值为auto，即项目的本来大小，如设置了width则元素尺寸由width/height决定（主轴方向），没有设置则由内容决定

②、语句

.item {
   flex-basis: <length> | auto; /* default auto */
}

当设置为0的是，会根据内容撑开
它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间

5、flex

①、定义

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto，也是比较难懂的一个复合属性

②、语句

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

1)、属性值

  • flex: 1 = flex: 1 1 0%
  • flex: 2 = flex: 2 1 0%
  • flex: auto = flex: 1 1 auto
  • flex: none = flex: 0 0 auto，常用于固定尺寸不伸缩

flex:1 和 flex:auto 的区别，可以归结于flex-basis:0和flex-basis:auto的区别
当设置为0时（绝对弹性元素），此时相当于告诉flex-grow和flex-shrink在伸缩的时候不需要考虑我的尺寸
当设置为auto时（相对弹性元素），此时则需要在伸缩时将元素尺寸纳入考虑
注意：建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值

6、align-self

①、定义

允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性
默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

②、语句

.item {
    align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

六、弹性盒模型布局的应用场景

   Flexbox弹性盒模型布局可以应用于几乎所有需要布局和排列元素的场景，特别是在响应式设计中非常重要。以下是一些应用场景：

  1. 垂直和水平居中元素
  2. 创建网格布局
  3. 创建自适应布局
  4. 管理空间分配和对齐
  5. 创建交错布局
  6. 创建多列布局
  7. 适应不同屏幕大小和设备

  总之，Flexbox弹性盒模型布局是一种非常灵活的布局方法，可用于简单和复杂的布局需求。它还可以与其他CSS属性一起使用，例如Grid布局和响应式设计技术，这使得它在Web开发中非常有用。

七、弹性盒模型布局的优势

1、简化布局

使用弹性盒子布局可以大大简化我们对网页布局的控制，减少定位和浮动等属性的使用

2、响应式设计

弹性盒子布局适应性强，可以根据不同的设备和屏幕尺寸自动调整布局，实现响应式设计

3、灵活性强

弹性盒子布局具有非常灵活的伸缩性，能够适应各种排列和对齐需求，提供更好的布局控制

八、总结

  Flex弹性布局的出现是为了满足软件界面和功能不断丰富、复杂的市场需求，它的核心诉求是子元素的尺寸要能够动态响应父元素尺寸变化，并保持一定的结构特征。

1、实现原理

在实现原理上，为了满足灵活多变的布局方式，flex布局引入一组非常重要的概念：

  • 主轴(main axis)：flex项延伸的方向，决定着下一个flex项的排列位置；
  • 交叉轴(cross axis)：和主轴垂直的方向，决定着主轴遇见换行情景时的具体行为细节。

2、布局工作步骤

对flex容器来说，整个布局工作可分为三步：

  • 第一步：所有flex项按照自身尺寸和主轴尺寸进行分行。简单来说，当主轴空间容纳不下flex项时，进行分行；
  • 第二步：根据上一步所得的分行信息，和每一行上flex项特征，计算本行所有flex项的主轴尺寸和布局信息；
  • 第三步：通过align-content、align-items和align-self三个属性计算所有flex项在交叉轴上的尺寸和布局信息。

  总的来说，flex布局的出现让形式丰富多样的网页布局成为可能，一方面解放了工程师们的创造力，另一方面满足了要求越来越多、越来越复杂的市场需求。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/958844.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

篇篇10万赞，3D原创动漫视频教程

篇篇10万赞，3D原创动漫视频教程

本期是赤辰第25期AI项目教程&#xff0c;底部准备了8月粉丝福利&#xff0c;可以免费领取。 赤辰AI实操记&#xff0c;专注于AI改造项目与生产方法分享&#xff1a;AI高效变现案例拆解、AI生产力工具使用技巧、改善工作流、AI自动化运营技术等干货分享 今天给大家拆解一个近期…
阅读更多...
探讨DPU驱动的高效AI大模型算力底座 中科驭数亮相中国IDC产业（长三角）年度大典

探讨DPU驱动的高效AI大模型算力底座 中科驭数亮相中国IDC产业（长三角）年度大典

8月31日&#xff0c;以“AI造物 算引变革”为主题的第十八届中国IDC产业&#xff08;长三角&#xff09;年度大典今日在上海隆重召开。大会由中国IDC产业年度大典组委会、上海市通信学会“算力浦江”专委会、中国通信工业协会数据中心委员会联合主办。中科驭数产品运营部副总经…
阅读更多...
go学习part21 Redis

go学习part21 Redis

300_尚硅谷_Redis的基本介绍和原理示意_哔哩哔哩_bilibili Redis 命令 | 菜鸟教程 (runoob.com) 1.基本介绍 2.基本操作 Redis的基本使用: 说明:Redis安装好后&#xff0c;默认有16个数据库&#xff0c;初始默认使用0号库,编号是0...15 1.添加key-val [set] 2.查看当前redi…
阅读更多...
打造全球研发中心城市，湖南湘江新区的挑战与机遇

打造全球研发中心城市，湖南湘江新区的挑战与机遇

作者 | 魏启扬 来源 | 洞见新研社 图源&#xff1a;长沙晚报 十年前&#xff0c;中国高铁还在为是选择德国技术&#xff0c;还是日本方案左右为难&#xff0c;如今全面自主化的“复兴号”已有超千组车组投入运营&#xff0c;我们随时可以来一场说走就走的旅行。 十年前&…
阅读更多...
【原创】H3C交换机链路聚合配置

【原创】H3C交换机链路聚合配置

图示 中间两个交换机&#xff0c;使用两根网线直连&#xff0c;这样本来是10G级联&#xff0c;变成了20G级联。 在默认情况下&#xff0c;这两根线在STP协议下&#xff0c;只有一路是通的&#xff0c;另一路处于备用状态。如果要将这两路都设置为级联&#xff0c;那么还需要…
阅读更多...
MySQL高阶语句之常用查询

MySQL高阶语句之常用查询

目录 常用查询 按关键字排序 区间判断及查询不重复记录 对结果进行分组 限制结果条目 设置别名 通配符 子查询 常用查询 &#xff08;增、删、改、查&#xff09; 对 MySQL 数据库的查询&#xff0c;除了基本的查询外&#xff0c;有时候需要对查询的结果集进行处理。 …
阅读更多...
JasperReport定义变量后打印PDF变量为null以及整个pdf文件为空白

JasperReport定义变量后打印PDF变量为null以及整个pdf文件为空白

问题1: JasperReport打印出来的整个pdf文件为空白文件&#xff1b; 问题2&#xff1a;JasperReport定义变量后打印PDF变量为null&#xff1b; 问题1原因是因为缺少数据源JRDataSource JasperFillManager.fillReport(jasperReport, params,new JREmptyDataSource());如果你打印…
阅读更多...
虹科案例 | 缆索挖掘机维护—小传感器，大作用！

虹科案例 | 缆索挖掘机维护—小传感器，大作用！

一、 应用背景 缆索挖掘机 缆索挖掘机的特点是具有坚固的部件&#xff0c;如上部结构、回转环和底盘。底盘是用于移动挖掘机的下部机械部件&#xff0c;根据尺寸和型号的不同&#xff0c;由轮子或履带引导&#xff0c;并承载可转动的上部车厢。回转环连接上部和下部机器部件&am…
阅读更多...
LTE ATTACH流程、PDN流程、PGW地址分配介绍

LTE ATTACH流程、PDN流程、PGW地址分配介绍

1、S-GW\P-GW选择 MME根据S-GW和P-GW的拓扑信息进行S-GW/P-GW的选择&#xff0c;在S-GW的候选序列和P-GW的候选序列中比较&#xff0c;寻找是否有合一的S-GW/P-GW&#xff0c;并且根据S-GW的优先级和权重信息进行排序&#xff0c;得到S-GW/P-GW的候选组。 2、SGW>PGW连接 PD…
阅读更多...
简单了解网络传输介质

简单了解网络传输介质

目录 一、同轴电缆 二、双绞线 三、光纤 四、串口电缆 一、同轴电缆 10BASE前面的数字表示传输带宽为10M&#xff0c;由于带宽较低、现在已不再使用。 50Ω同轴电缆主要用来传送基带数字信号&#xff0c;因此也被称作为基带同轴电缆&#xff0c;在局域网中得到了广泛的应用…
阅读更多...
在VScode中如何将界面语言设置为中文

在VScode中如何将界面语言设置为中文

VSCode安装后的默认界面是只有英文的&#xff0c;如果想用中文界面&#xff0c;那么就需要安装对应的插件&#xff0c;vscode插件可以从扩展中心去搜索并安装。 安装vscode后打开vscode&#xff0c;点击左侧的扩展按钮。 在搜索框中输入chinese&#xff0c;弹出chinese&#x…
阅读更多...
卫星通话发展

卫星通话发展

终端演进 华为Mate 50可以通过北斗卫星给个人定向发送文字、位置、轨迹图等信息&#xff0c;但内容会被审核&#xff0c;只有跟救援相关的信息才能被发送&#xff0c;而且收不到回复。 华为P60系列上&#xff0c;卫星通信功能被升级为双向&#xff0c;即支持发送和接收短信。…
阅读更多...
校园广播解决方案，公共广播解决方案

校园广播解决方案，公共广播解决方案

校园广播解决方案&#xff0c;公共广播解决方案 网络IP对讲系统的优势 a) 更强的功能 纯数字对讲系统&#xff0c;涵盖了传统对讲系统和校园广播系统的所有功能。并充分利用了校园网络的资源&#xff0c;可随时随地获取网络上的音频资源。由于每个终端有独立的IP地址…
阅读更多...
第64步 深度学习图像识别：多分类建模误判病例分析（Pytorch）

第64步 深度学习图像识别：多分类建模误判病例分析（Pytorch）

基于WIN10的64位系统演示 一、写在前面 上期我们基于TensorFlow环境介绍了多分类建模的误判病例分析。 本期以健康组、肺结核组、COVID-19组、细菌性&#xff08;病毒性&#xff09;肺炎组为数据集&#xff0c;基于Pytorch环境&#xff0c;构建SqueezeNet多分类模型&#xf…
阅读更多...
小黑受到了未来的焦虑，周四继续参加团跑活动仰山跑，跑奥森的坡，越跑越上瘾更加热爱生活的leetcode之旅:LCR 008. 长度最小的子数组

小黑受到了未来的焦虑，周四继续参加团跑活动仰山跑，跑奥森的坡，越跑越上瘾更加热爱生活的leetcode之旅:LCR 008. 长度最小的子数组

小黑代码1 class Solution:def minSubArrayLen(self, target: int, nums: List[int]) -> int:# 数组长度n len(nums)# 双指针head 0tail 0# 中间变量sum_ 0# 结果变量res n1# 开始双指针迭代while tail < n:sum_ nums[tail]tail 1while sum_ > target:if tail…
阅读更多...
源码安装cv_bridge

源码安装cv_bridge

1. 下载源码 1去github上下载GitHub - ros-perception/vision_opencv&#xff0c;进去后注意选择与自己的ros对应的版本&#xff1a;&#xff08;我的为noetic&#xff09; 如果你直接使用 git clone https://github.com/ros-perception/vision_opencv.git 来拉取的话cmake的…
阅读更多...
CTFshow 菜狗杯 web方向 全

CTFshow 菜狗杯 web方向 全

文章目录 菜狗杯 web签到菜狗杯 web2 c0me_t0_s1gn菜狗杯 我的眼里只有$菜狗杯 抽老婆菜狗杯 一言既出菜狗杯 驷马难追菜狗杯 TapTapTap菜狗杯 Webshell菜狗杯 化零为整菜狗杯 无一幸免菜狗杯 无一幸免_FIXED菜狗杯 传说之下&#xff08;雾&#xff09;菜狗杯 算力超群菜狗杯 算…
阅读更多...
webdriver对应浏览器

webdriver对应浏览器

Chrome for Testing availability 更多是在这里下载: http://chromedriver.storage.googleapis.com/index.html?path103.0.5060.53/ 但是这里截止2023年8月31日14:31分没有115以后得版本 但是我的浏览器已经到了116的版本 为了关闭掉Ch 所以下载webdriver的地址是: http…
阅读更多...
记录学习--字节码解析try catch

记录学习--字节码解析try catch

1.示例代码 Testpublic void someTest() {String s "111";try {s "222";int i 1/0;} catch (Exception e){e.printStackTrace();System.out.println(s);}System.out.println(s);}2.示例代码对应的字节码 0 ldc #2 <111>2 astore_13 ldc #3 <22…
阅读更多...
python实现语音识别

python实现语音识别

1. 首先安装依赖库 pip install playsound # 该库用于播放音频文件 pip install speech_recognition # 该库用于语音识别 pip install PocketSphinx # 语音识别模块中只有sphinx支持离线的&#xff0c;使用该模块需单独安装 pip install pyttsx3 # 该库用于将文本转换为语音播…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023